From 8d6d5ce341a68c43919a790dcf21bedf41458532 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Fri, 20 Sep 2024 09:39:22 +0700
Subject: [PATCH 01/14] [Issue-3461] Implement AppConfirmation

---
 .../MissionPool/MissionDetailModal.tsx        | 26 +++++--
 .../src/Popup/Settings/MissionPool/index.tsx  | 13 +++-
 .../src/Popup/Transaction/variants/Earn.tsx   | 32 ++++++++-
 .../Popup/Transaction/variants/SendFund.tsx   | 32 ++++++++-
 .../src/Popup/Transaction/variants/Unbond.tsx | 34 +++++++--
 .../Popup/Transaction/variants/Withdraw.tsx   | 34 +++++++--
 .../extension-koni-ui/src/Popup/router.tsx    |  6 +-
 .../src/contexts/AppOnlineContentProvider.tsx | 62 +++++++++++-----
 ...ontext.tsx => MktCampaignModalContext.tsx} | 53 ++++++++------
 .../hooks/campaign/useGetBannerByScreen.ts    |  2 +-
 .../campaign/useGetConfirmationByScreen.tsx   | 70 +++++++++++++++++++
 11 files changed, 303 insertions(+), 61 deletions(-)
 rename packages/extension-koni-ui/src/contexts/{AppPopupModalContext.tsx => MktCampaignModalContext.tsx} (51%)
 create mode 100644 packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx

diff --git a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
index 18821bea89..bf2c465201 100644
--- a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
+++ b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
@@ -1,9 +1,11 @@
 // Copyright 2019-2022 @subwallet/extension-web-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { AppConfirmationData } from '@subwallet/extension-base/services/mkt-campaign-service/types';
 import DefaultLogosMap from '@subwallet/extension-koni-ui/assets/logo';
 import { InfoItemBase, MetaInfo } from '@subwallet/extension-koni-ui/components';
 import { NetworkGroup } from '@subwallet/extension-koni-ui/components/MetaInfo/parts';
+import { MktCampaignModalContext } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { missionCategoryMap, MissionCategoryType, tagMap } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/predefined';
 import { Theme } from '@subwallet/extension-koni-ui/themes';
@@ -17,15 +19,18 @@ import styled, { ThemeContext } from 'styled-components';
 
 type Props = ThemeProps & {
   data: MissionInfo | null,
+  currentConfirmations?: AppConfirmationData[];
+  renderConfirmationButtons: (onClickCancel: () => void, onClickOk: () => void) => React.ReactElement;
 };
 
 export const PoolDetailModalId = 'PoolDetailModalId';
 
 const modalId = PoolDetailModalId;
 
-function Component ({ className = '', data }: Props): React.ReactElement<Props> {
+function Component ({ className = '', currentConfirmations, data, renderConfirmationButtons }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { inactiveModal } = useContext(ModalContext);
+  const mktCampaignModalContext = useContext(MktCampaignModalContext);
   const logoMap = useContext<Theme>(ThemeContext as Context<Theme>).logoMap;
   const timeline = useMemo<string>(() => {
     if (!data?.start_time && !data?.end_time) {
@@ -49,9 +54,22 @@ function Component ({ className = '', data }: Props): React.ReactElement<Props>
   }, [data?.twitter_url]);
 
   const onClickJoinNow: ButtonProps['onClick'] = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    data?.url && openInNewTab(data.url)();
-  }, [data?.url]);
+    if (currentConfirmations && currentConfirmations.length) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmations[0].name,
+        message: currentConfirmations[0].content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          e.stopPropagation();
+          mktCampaignModalContext.hideModal();
+          data?.url && openInNewTab(data.url)();
+        })
+      });
+    } else {
+      e.stopPropagation();
+      data?.url && openInNewTab(data.url)();
+    }
+  }, [currentConfirmations, data?.url, mktCampaignModalContext, renderConfirmationButtons]);
 
   const onCancel = useCallback(() => {
     inactiveModal(modalId);
diff --git a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
index eb13aa5b46..14ded8243a 100644
--- a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
@@ -6,6 +6,7 @@ import EmptyList from '@subwallet/extension-koni-ui/components/EmptyList/EmptyLi
 import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
 import Search from '@subwallet/extension-koni-ui/components/Search';
 import { useFilterModal, useSelector } from '@subwallet/extension-koni-ui/hooks';
+import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { MissionDetailModal, PoolDetailModalId } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/MissionDetailModal';
 import MissionItem from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/MissionPoolItem';
 import { missionCategories, MissionCategoryType, MissionTab } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/predefined';
@@ -31,7 +32,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   const { activeModal } = useContext(ModalContext);
   const [currentSelectItem, setCurrentSelectItem] = useState<MissionInfo | null>(null);
   const { missions } = useSelector((state: RootState) => state.missionPool);
-
+  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('missionPools');
   const computedMission = useMemo(() => {
     return missions.map((item) => {
       return {
@@ -41,6 +42,14 @@ const Component: React.FC<Props> = ({ className }: Props) => {
     });
   }, [missions]);
 
+  const currentConfirmation = useMemo(() => {
+    if (currentSelectItem) {
+      return getCurrentConfirmation([currentSelectItem.id.toString()]);
+    } else {
+      return undefined;
+    }
+  }, [getCurrentConfirmation, currentSelectItem]);
+
   const filterOptions = useMemo(() => [
     ...missionCategories.map((c) => ({
       label: t(c.name),
@@ -239,6 +248,8 @@ const Component: React.FC<Props> = ({ className }: Props) => {
       />
       <MissionDetailModal
         data={currentSelectItem}
+        currentConfirmations={currentConfirmation}
+        renderConfirmationButtons={renderConfirmationButtons}
       />
     </Layout.Base>
   );
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
index 0a302b4731..4f15cc92be 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
@@ -14,7 +14,9 @@ import { EarningProcessItem } from '@subwallet/extension-koni-ui/components/Earn
 import { getInputValuesFromString } from '@subwallet/extension-koni-ui/components/Field/AmountInput';
 import { EarningInstructionModal } from '@subwallet/extension-koni-ui/components/Modal/Earning';
 import { EARNING_INSTRUCTION_MODAL, STAKE_ALERT_DATA } from '@subwallet/extension-koni-ui/constants';
+import { MktCampaignModalContext } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useChainConnection, useFetchChainState, useGetBalance, useGetNativeTokenSlug, useGetYieldPositionForSpecificAccount, useInitValidateTransaction, useNotification, usePreCheckAction, useRestoreTransaction, useSelector, useTransactionContext, useWatchTransaction, useYieldPositionDetail } from '@subwallet/extension-koni-ui/hooks';
+import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { fetchPoolTarget, getOptimalYieldPath, submitJoinYieldPool, validateYieldProcess } from '@subwallet/extension-koni-ui/messaging';
 import { DEFAULT_YIELD_PROCESS, EarningActionType, earningReducer } from '@subwallet/extension-koni-ui/reducer';
 import { store } from '@subwallet/extension-koni-ui/stores';
@@ -48,7 +50,7 @@ const Component = () => {
   const { t } = useTranslation();
   const notify = useNotification();
   const { activeModal } = useContext(ModalContext);
-
+  const mktCampaignModalContext = useContext(MktCampaignModalContext);
   const { closeAlert, defaultData, goBack, onDone,
     openAlert, persistData,
     setBackProps, setIsDisableHeader, setSubHeaderRightButtons } = useTransactionContext<EarnParams>();
@@ -65,7 +67,7 @@ const Component = () => {
 
   const [form] = Form.useForm<EarnParams>();
   const formDefault = useMemo((): EarnParams => ({ ...defaultData }), [defaultData]);
-
+  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('stake');
   const fromValue = useWatchTransaction('from', form, defaultData);
   const amountValue = useWatchTransaction('value', form, defaultData);
   const chainValue = useWatchTransaction('chain', form, defaultData);
@@ -108,6 +110,14 @@ const Component = () => {
 
   const chainState = useFetchChainState(poolInfo?.chain || '');
 
+  const currentConfirmations = useMemo(() => {
+    if (slug) {
+      return getCurrentConfirmation([slug]);
+    } else {
+      return undefined;
+    }
+  }, [slug, getCurrentConfirmation]);
+
   const mustChooseTarget = useMemo(
     () => [YieldPoolType.NATIVE_STAKING, YieldPoolType.NOMINATION_POOL].includes(poolType),
     [poolType]
@@ -551,6 +561,22 @@ const Component = () => {
     }
   }, [chainInfoMap, chainStakingBoth, closeAlert, currentStep, onError, onSuccess, openAlert, poolInfo, poolTargets, processState.feeStructure, processState.steps, setIsDisableHeader, t]);
 
+  const onClickSubmit = useCallback((values: EarnParams) => {
+    if (currentConfirmations && currentConfirmations.length) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmations[0].name,
+        message: currentConfirmations[0].content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+
   const renderMetaInfo = useCallback(() => {
     const value = amountValue ? parseFloat(amountValue) / 10 ** assetDecimals : 0;
     const assetSymbol = inputAsset.symbol;
@@ -965,7 +991,7 @@ const Component = () => {
                 form={form}
                 initialValues={formDefault}
                 onFieldsChange={onFieldsChange}
-                onFinish={onSubmit}
+                onFinish={onClickSubmit}
               >
                 <HiddenInput fields={hideFields} />
 
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
index 1a23bb6199..8439e73d1f 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
@@ -11,7 +11,9 @@ import { SWTransactionResponse } from '@subwallet/extension-base/services/transa
 import { CommonStepType } from '@subwallet/extension-base/types/service-base';
 import { detectTranslate, isSameAddress } from '@subwallet/extension-base/utils';
 import { AccountSelector, AddressInput, AlertBox, AlertModal, AmountInput, ChainSelector, HiddenInput, TokenItemType, TokenSelector } from '@subwallet/extension-koni-ui/components';
+import { MktCampaignModalContext } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useAlert, useFetchChainAssetInfo, useGetChainPrefixBySlug, useInitValidateTransaction, useIsMantaPayEnabled, useNotification, usePreCheckAction, useRestoreTransaction, useSelector, useSetCurrentPage, useTransactionContext, useWatchTransaction } from '@subwallet/extension-koni-ui/hooks';
+import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import useHandleSubmitMultiTransaction from '@subwallet/extension-koni-ui/hooks/transaction/useHandleSubmitMultiTransaction';
 import { approveSpending, getMaxTransfer, getOptimalTransferProcess, makeCrossChainTransfer, makeTransfer } from '@subwallet/extension-koni-ui/messaging';
 import { CommonActionType, commonProcessReducer, DEFAULT_COMMON_PROCESS } from '@subwallet/extension-koni-ui/reducer';
@@ -23,7 +25,7 @@ import { Rule } from '@subwallet/react-ui/es/form';
 import BigN from 'bignumber.js';
 import CN from 'classnames';
 import { PaperPlaneRight, PaperPlaneTilt } from 'phosphor-react';
-import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { useIsFirstRender } from 'usehooks-ts';
@@ -216,6 +218,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
   useSetCurrentPage('/transaction/send-fund');
   const { t } = useTranslation();
   const notification = useNotification();
+  const mktCampaignModalContext = useContext(MktCampaignModalContext);
 
   const { defaultData, persistData } = useTransactionContext<TransferParams>();
   const { defaultSlug: sendFundSlug } = defaultData;
@@ -241,9 +244,18 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
   const { assetRegistry, assetSettingMap, multiChainAssetMap, xcmRefMap } = useSelector((root) => root.assetRegistry);
   const { accounts, isAllAccount } = useSelector((state: RootState) => state.accountState);
   const [maxTransfer, setMaxTransfer] = useState<string>('0');
+  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('send-fund');
   const checkAction = usePreCheckAction(from, true, detectTranslate('The account you are using is {{accountTitle}}, you cannot send assets with it'));
   const isZKModeEnabled = useIsMantaPayEnabled(from);
 
+  const currentConfirmations = useMemo(() => {
+    if (chain && destChain) {
+      return getCurrentConfirmation([chain, destChain]);
+    } else {
+      return undefined;
+    }
+  }, [chain, destChain, getCurrentConfirmation]);
+
   const hideMaxButton = useMemo(() => {
     const chainInfo = chainInfoMap[chain];
 
@@ -672,6 +684,22 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
     doSubmit(values);
   }, [assetInfo, chain, chainInfoMap, closeAlert, destChain, doSubmit, isTransferAll, openAlert, t]);
 
+  const onClickSubmit = useCallback((values: TransferParams) => {
+    if (currentConfirmations && currentConfirmations.length) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmations[0].name,
+        message: currentConfirmations[0].content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+
   // TODO: Need to review
   // Auto fill logic
   useEffect(() => {
@@ -805,7 +833,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
           className={'form-container form-space-sm'}
           form={form}
           initialValues={formDefault}
-          onFinish={onSubmit}
+          onFinish={onClickSubmit}
           onValuesChange={onValuesChange}
         >
           <Form.Item
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx
index 17f515d5bf..3e4f8d93c7 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx
@@ -9,7 +9,9 @@ import { isActionFromValidator } from '@subwallet/extension-base/services/earnin
 import { RequestYieldLeave, YieldPoolType, YieldPositionInfo } from '@subwallet/extension-base/types';
 import { AccountSelector, AlertBox, AmountInput, HiddenInput, InstructionItem, NominationSelector } from '@subwallet/extension-koni-ui/components';
 import { BN_ZERO, UNSTAKE_ALERT_DATA } from '@subwallet/extension-koni-ui/constants';
+import { MktCampaignModalContext } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useHandleSubmitTransaction, useInitValidateTransaction, usePreCheckAction, useRestoreTransaction, useSelector, useTransactionContext, useWatchTransaction, useYieldPositionDetail } from '@subwallet/extension-koni-ui/hooks';
+import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { yieldSubmitLeavePool } from '@subwallet/extension-koni-ui/messaging';
 import { FormCallbacks, FormFieldData, ThemeProps, UnStakeParams } from '@subwallet/extension-koni-ui/types';
 import { convertFieldToObject, getBannerButtonIcon, noop, simpleCheckForm } from '@subwallet/extension-koni-ui/utils';
@@ -18,7 +20,7 @@ import { getAlphaColor } from '@subwallet/react-ui/lib/theme/themes/default/colo
 import BigN from 'bignumber.js';
 import CN from 'classnames';
 import { MinusCircle } from 'phosphor-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -49,10 +51,10 @@ const validateFields: Array<keyof UnStakeParams> = ['value'];
 
 const Component: React.FC = () => {
   const { t } = useTranslation();
-
+  const mktCampaignModalContext = useContext(MktCampaignModalContext);
   const { defaultData, persistData, setCustomScreenTitle } = useTransactionContext<UnStakeParams>();
   const { slug } = defaultData;
-
+  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('unstake');
   const { accounts, isAllAccount } = useSelector((state) => state.accountState);
   const chainInfoMap = useSelector((state) => state.chainStore.chainInfoMap);
   const { poolInfoMap } = useSelector((state) => state.earning);
@@ -164,6 +166,14 @@ const Component: React.FC = () => {
     }
   }, [poolInfo.statistic, t]);
 
+  const currentConfirmations = useMemo(() => {
+    if (slug) {
+      return getCurrentConfirmation([slug]);
+    } else {
+      return undefined;
+    }
+  }, [getCurrentConfirmation, slug]);
+
   const handleDataForInsufficientAlert = useCallback(
     (estimateFee: AmountData) => {
       return {
@@ -249,6 +259,22 @@ const Component: React.FC = () => {
     }, 300);
   }, [currentValidator, mustChooseValidator, onError, onSuccess, poolInfo, positionInfo]);
 
+  const onClickSubmit = useCallback((values: UnStakeParams) => {
+    if (currentConfirmations && currentConfirmations.length) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmations[0].name,
+        message: currentConfirmations[0].content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+
   const renderBounded = useCallback(() => {
     return (
       <BondedBalance
@@ -344,7 +370,7 @@ const Component: React.FC = () => {
           initialValues={formDefault}
           name='unstake-form'
           onFieldsChange={onFieldsChange}
-          onFinish={onSubmit}
+          onFinish={onClickSubmit}
           onValuesChange={onValuesChange}
         >
           <HiddenInput fields={hideFields} />
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx
index 81ce81f740..ceb6f68c59 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx
@@ -9,7 +9,9 @@ import { getAstarWithdrawable } from '@subwallet/extension-base/services/earning
 import { RequestYieldWithdrawal, UnstakingInfo, UnstakingStatus, YieldPoolType, YieldPositionInfo } from '@subwallet/extension-base/types';
 import { isSameAddress } from '@subwallet/extension-base/utils';
 import { AccountSelector, HiddenInput, MetaInfo } from '@subwallet/extension-koni-ui/components';
+import { MktCampaignModalContext } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useGetChainAssetInfo, useHandleSubmitTransaction, useInitValidateTransaction, usePreCheckAction, useRestoreTransaction, useSelector, useTransactionContext, useWatchTransaction, useYieldPositionDetail } from '@subwallet/extension-koni-ui/hooks';
+import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { yieldSubmitStakingWithdrawal } from '@subwallet/extension-koni-ui/messaging';
 import { accountFilterFunc } from '@subwallet/extension-koni-ui/Popup/Transaction/helper';
 import { FormCallbacks, FormFieldData, ThemeProps, WithdrawParams } from '@subwallet/extension-koni-ui/types';
@@ -17,7 +19,7 @@ import { convertFieldToObject, isAccountAll, simpleCheckForm } from '@subwallet/
 import { Button, Form, Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { ArrowCircleRight, XCircle } from 'phosphor-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -49,13 +51,13 @@ const filterAccount = (
 const Component = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-
+  const mktCampaignModalContext = useContext(MktCampaignModalContext);
   const { defaultData, persistData } = useTransactionContext<WithdrawParams>();
   const { slug } = defaultData;
 
   const [form] = Form.useForm<WithdrawParams>();
   const formDefault = useMemo((): WithdrawParams => ({ ...defaultData }), [defaultData]);
-
+  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('withdraw');
   const { accounts, isAllAccount } = useSelector((state) => state.accountState);
   const { chainInfoMap } = useSelector((state) => state.chainStore);
   const { poolInfoMap } = useSelector((state) => state.earning);
@@ -81,6 +83,14 @@ const Component = () => {
   const poolChain = poolInfo?.chain || '';
   const networkPrefix = chainInfoMap[poolChain]?.substrateInfo?.addressPrefix;
 
+  const currentConfirmations = useMemo(() => {
+    if (slug) {
+      return getCurrentConfirmation([slug]);
+    } else {
+      return undefined;
+    }
+  }, [getCurrentConfirmation, slug]);
+
   const goHome = useCallback(() => {
     navigate('/home/earning');
   }, [navigate]);
@@ -144,6 +154,22 @@ const Component = () => {
     }, 300);
   }, [onError, onSuccess, unstakingInfo]);
 
+  const onClickSubmit = useCallback((values: WithdrawParams) => {
+    if (currentConfirmations && currentConfirmations.length) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmations[0].name,
+        message: currentConfirmations[0].content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+
   const onPreCheck = usePreCheckAction(fromValue);
 
   useRestoreTransaction(form);
@@ -187,7 +213,7 @@ const Component = () => {
           form={form}
           initialValues={formDefault}
           onFieldsChange={onFieldsChange}
-          onFinish={onSubmit}
+          onFinish={onClickSubmit}
         >
 
           <HiddenInput fields={hideFields} />
diff --git a/packages/extension-koni-ui/src/Popup/router.tsx b/packages/extension-koni-ui/src/Popup/router.tsx
index 6e1a1f1883..a6ad6d31b2 100644
--- a/packages/extension-koni-ui/src/Popup/router.tsx
+++ b/packages/extension-koni-ui/src/Popup/router.tsx
@@ -4,7 +4,7 @@
 import { PHISHING_PAGE_REDIRECT } from '@subwallet/extension-base/defaults';
 import { PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { AppOnlineContentContextProvider } from '@subwallet/extension-koni-ui/contexts/AppOnlineContentProvider';
-import { AppPopupModalContextProvider } from '@subwallet/extension-koni-ui/contexts/AppPopupModalContext';
+import { MktCampaignModalContextProvider } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import ErrorFallback from '@subwallet/extension-koni-ui/Popup/ErrorFallback';
 import { Root } from '@subwallet/extension-koni-ui/Popup/Root';
 import { i18nPromise } from '@subwallet/extension-koni-ui/utils/common/i18n';
@@ -144,11 +144,11 @@ export function Example () {
 
 export function RootWrapper () {
   return (
-    <AppPopupModalContextProvider>
+    <MktCampaignModalContextProvider>
       <AppOnlineContentContextProvider>
         <Root />
       </AppOnlineContentContextProvider>
-    </AppPopupModalContextProvider>
+    </MktCampaignModalContextProvider>
   );
 }
 
diff --git a/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx b/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
index 51e71164f5..7fb1a0856e 100644
--- a/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
+++ b/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { AppBannerData, AppConfirmationData, AppPopupData } from '@subwallet/extension-base/services/mkt-campaign-service/types';
-import { AppPopupModalContext, AppPopupModalInfo } from '@subwallet/extension-koni-ui/contexts/AppPopupModalContext';
+import { MktCampaignModalContext, MktCampaignModalInfo } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useGetAppInstructionData } from '@subwallet/extension-koni-ui/hooks/static-content/useGetAppInstructionData';
 import { useHandleAppBannerMap } from '@subwallet/extension-koni-ui/hooks/static-content/useHandleAppBannerMap';
 import { useHandleAppConfirmationMap } from '@subwallet/extension-koni-ui/hooks/static-content/useHandleAppConfirmationMap';
@@ -38,7 +38,7 @@ interface AppOnlineContentContextType {
   ) => boolean;
   handleButtonClick: (id: string) => (type: OnlineContentDataType, url?: string) => void;
   checkBannerVisible: (showTimes: number) => boolean;
-  checkPositionParam: (screen: string, positionParams: { property: string; value: string }[], value: string) => boolean;
+  checkPositionParam: (screen: string, positionParams: { property: string; value: string }[], value: string[]) => boolean;
   showAppPopup: (currentRoute: string | undefined) => void;
 }
 
@@ -69,7 +69,7 @@ const getPositionByRouteName = (currentRoute?: string) => {
 };
 
 export const AppOnlineContentContextProvider = ({ children }: AppOnlineContentContextProviderProps) => {
-  const appPopupModalContext = useContext(AppPopupModalContext);
+  const mktCampaignModalContext = useContext(MktCampaignModalContext);
   const language = useSelector((state: RootState) => state.settings.language);
   const { getAppInstructionData } = useGetAppInstructionData(language);
   const navigate = useNavigate();
@@ -111,20 +111,50 @@ export const AppOnlineContentContextProvider = ({ children }: AppOnlineContentCo
   }, []);
 
   const checkPositionParam = useCallback(
-    (screen: string, positionParams: { property: string; value: string }[], value: string) => {
+    (screen: string, positionParams: { property: string; value: string }[], value: string[]) => {
       if (positionParams && positionParams.length) {
-        if (screen === 'token_detail') {
-          const allowTokenSlugs = positionParams
-            .filter((item) => item.property === 'tokenSlug')
-            .map((param) => param.value);
+        switch (screen) {
+          case 'token_detail': {
+            const allowTokenSlugs = positionParams
+              .filter((item) => item.property === 'tokenSlug')
+              .map((param) => param.value);
 
-          return allowTokenSlugs.some((slug) => value.toLowerCase().includes(slug.toLowerCase()));
-        } else if (screen === 'earning') {
-          const allowPoolSlugs = positionParams.filter((item) => item.property === 'poolSlug').map((param) => param.value);
+            return allowTokenSlugs.some((slug) => value[0].toLowerCase().includes(slug.toLowerCase()));
+          }
 
-          return allowPoolSlugs.some((slug) => value.toLowerCase().includes(slug.toLowerCase()));
-        } else {
-          return true;
+          case 'earning': {
+            const allowPoolSlugs = positionParams.filter((item) => item.property === 'poolSlug').map((param) => param.value);
+
+            return allowPoolSlugs.some((slug) => value[0].toLowerCase().includes(slug.toLowerCase()));
+          }
+
+          case 'missionPools': {
+            const selectedIds = positionParams.filter((item) => item.property === 'id').map((param) => param.value);
+
+            return selectedIds.some((id) => value[0].toLowerCase().includes(id.toLowerCase()));
+          }
+
+          case 'send-fund': {
+            const currentChain = value[0];
+            const currentDestChain = value[1];
+            let isValidChain = true;
+            let isValidDestChain = true;
+
+            positionParams.forEach((item) => {
+              if (item.property === 'chainValue') {
+                isValidChain = item.value === currentChain;
+              }
+
+              if (item.property === 'destChainValue') {
+                isValidDestChain = item.value === currentDestChain;
+              }
+            });
+
+            return isValidChain && isValidDestChain;
+          }
+
+          default:
+            return true;
         }
       } else {
         return true;
@@ -218,7 +248,7 @@ export const AppOnlineContentContextProvider = ({ children }: AppOnlineContentCo
         }).sort((a, b) => a.priority - b.priority);
 
         if (filteredPopupList && filteredPopupList.length) {
-          const result: AppPopupModalInfo[] = filteredPopupList.map((item) => ({
+          const result: MktCampaignModalInfo[] = filteredPopupList.map((item) => ({
             type: 'popup',
             repeat: item.repeat,
             title: item.info?.name,
@@ -229,7 +259,7 @@ export const AppOnlineContentContextProvider = ({ children }: AppOnlineContentCo
             }
           }));
 
-          appPopupModalContext.openAppPopupModal(result[0]);
+          mktCampaignModalContext.openModal(result[0]);
         }
       }
     },
diff --git a/packages/extension-koni-ui/src/contexts/AppPopupModalContext.tsx b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
similarity index 51%
rename from packages/extension-koni-ui/src/contexts/AppPopupModalContext.tsx
rename to packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
index 50d0696a20..c1d48428cd 100644
--- a/packages/extension-koni-ui/src/contexts/AppPopupModalContext.tsx
+++ b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
@@ -11,11 +11,11 @@ import { useSelector } from 'react-redux';
 import AppPopupModal from '../components/Modal/Campaign/AppPopupModal';
 import { AppContentButton, PopupFrequency } from '../types/staticContent';
 
-interface AppPopupModalContextProviderProps {
+interface MktCampaignModalContextProviderProps {
   children?: React.ReactElement;
 }
 
-export type AppPopupModalInfo = {
+export type MktCampaignModalInfo = {
   title?: string;
   message?: string;
   buttons?: AppContentButton[];
@@ -25,31 +25,38 @@ export type AppPopupModalInfo = {
   repeat?: PopupFrequency;
 };
 
-export interface AppPopupModalType {
-  openAppPopupModal: (data: AppPopupModalInfo) => void;
-  hideAppPopupModal: () => void;
+export interface MktCampaignModalType {
+  openModal: (data: MktCampaignModalInfo) => void;
+  hideModal: () => void;
 }
 
-export const AppPopupModalContext = React.createContext({} as AppPopupModalType);
+export const MktCampaignModalContext = React.createContext({} as MktCampaignModalType);
 
-export const AppPopupModalContextProvider = ({ children }: AppPopupModalContextProviderProps) => {
-  const [appPopupModal, setAppPopupModal] = useState<AppPopupModalInfo>({});
+export const MktCampaignModalContextProvider = ({ children }: MktCampaignModalContextProviderProps) => {
+  const [mktCampaignModal, setMktCampaignModal] = useState<MktCampaignModalInfo>({});
   const { activeModal, inactiveModal } = useContext(ModalContext);
   const { isPopupVisible } = useSelector((state: RootState) => state.campaign);
   const storageEarningPosition = window.localStorage.getItem(EARNING_WARNING_ANNOUNCEMENT);
 
   // TODO: This is a hotfix solution; a better solution must be found.
-  const openAppPopupModal = useCallback((data: AppPopupModalInfo) => {
-    if (isPopupVisible && ((!storageEarningPosition || storageEarningPosition.includes('confirmed')))) {
-      setAppPopupModal(data);
-      activeModal(APP_POPUP_MODAL);
+  const openModal = useCallback((data: MktCampaignModalInfo) => {
+    if (mktCampaignModal.type === 'popup') {
+      if (isPopupVisible && (!storageEarningPosition || storageEarningPosition.includes('confirmed'))) {
+        setMktCampaignModal(data);
+        activeModal(APP_POPUP_MODAL);
+      }
+    } else {
+      if (!storageEarningPosition || storageEarningPosition.includes('confirmed')) {
+        setMktCampaignModal(data);
+        activeModal(APP_POPUP_MODAL);
+      }
     }
-  }, [activeModal, isPopupVisible, storageEarningPosition]);
+  }, [activeModal, isPopupVisible, mktCampaignModal.type, storageEarningPosition]);
 
-  const hideAppPopupModal = useCallback(() => {
+  const hideModal = useCallback(() => {
     toggleCampaignPopup({ value: false }).then(() => {
       inactiveModal(APP_POPUP_MODAL);
-      setAppPopupModal((prevState) => ({
+      setMktCampaignModal((prevState) => ({
         ...prevState,
         title: '',
         message: '',
@@ -60,16 +67,16 @@ export const AppPopupModalContextProvider = ({ children }: AppPopupModalContextP
   }, [inactiveModal]);
 
   return (
-    <AppPopupModalContext.Provider value={{ openAppPopupModal, hideAppPopupModal }}>
+    <MktCampaignModalContext.Provider value={{ openModal, hideModal }}>
       {children}
       <AppPopupModal
-        buttons={appPopupModal.buttons || []}
-        externalButtons={appPopupModal.externalButtons}
-        message={appPopupModal.message || ''}
-        onCloseModal={hideAppPopupModal}
-        onPressButton={appPopupModal.onPressBtn}
-        title={appPopupModal.title || ''}
+        buttons={mktCampaignModal.buttons || []}
+        externalButtons={mktCampaignModal.externalButtons}
+        message={mktCampaignModal.message || ''}
+        onCloseModal={hideModal}
+        onPressButton={mktCampaignModal.onPressBtn}
+        title={mktCampaignModal.title || ''}
       />
-    </AppPopupModalContext.Provider>
+    </MktCampaignModalContext.Provider>
   );
 };
diff --git a/packages/extension-koni-ui/src/hooks/campaign/useGetBannerByScreen.ts b/packages/extension-koni-ui/src/hooks/campaign/useGetBannerByScreen.ts
index fc8048c1e1..447cf90170 100644
--- a/packages/extension-koni-ui/src/hooks/campaign/useGetBannerByScreen.ts
+++ b/packages/extension-koni-ui/src/hooks/campaign/useGetBannerByScreen.ts
@@ -37,7 +37,7 @@ const useGetBannerByScreen = (screen: string, compareValue?: string) => {
         const isBannerVisible = checkBannerVisible(bannerHistory?.showTimes);
 
         if (compareValue) {
-          return checkPositionParam(screen, banner.position_params, compareValue) && isBannerVisible;
+          return checkPositionParam(screen, banner.position_params, [compareValue]) && isBannerVisible;
         } else {
           return isBannerVisible;
         }
diff --git a/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx b/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx
new file mode 100644
index 0000000000..ee60ee38d6
--- /dev/null
+++ b/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx
@@ -0,0 +1,70 @@
+// Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { AppOnlineContentContext } from '@subwallet/extension-koni-ui/contexts/AppOnlineContentProvider';
+import { Button } from '@subwallet/react-ui';
+import React, { useCallback, useContext, useMemo } from 'react';
+
+const useGetConfirmationByScreen = (screen: string) => {
+  const { appConfirmationMap, checkPositionParam, updateConfirmationHistoryMap } = useContext(AppOnlineContentContext);
+
+  const confirmations = useMemo(() => {
+    return appConfirmationMap[screen] || [];
+  }, [appConfirmationMap, screen]);
+
+  const getCurrentConfirmation = useCallback(
+    (compareVals: string[]) => {
+      return confirmations.filter((item) => {
+        return checkPositionParam(screen, item.position_params, compareVals);
+      });
+    },
+    [checkPositionParam, confirmations, screen]
+  );
+
+  const onClickCancelBtn = useCallback((confirmationId: string, onClickCancel: VoidFunction) => {
+    return () => {
+      updateConfirmationHistoryMap(confirmationId);
+      onClickCancel();
+    };
+  }, [updateConfirmationHistoryMap]);
+
+  const onClickConfirmBtn = useCallback((confirmationId: string, onClickOk: VoidFunction) => {
+    return () => {
+      updateConfirmationHistoryMap(confirmationId);
+      onClickOk();
+    };
+  }, [updateConfirmationHistoryMap]);
+
+  const renderConfirmationButtons = useCallback(
+    (onClickCancel: () => void, onClickOk: () => void) => {
+      if (!confirmations || !confirmations.length) {
+        return <></>;
+      }
+
+      const confirmationId = `${confirmations[0].position}-${confirmations[0].id}`;
+
+      return (
+        <div style={{ marginTop: 16, display: 'flex' }}>
+          <Button
+            block
+            onClick={onClickCancelBtn(confirmationId, onClickCancel)}
+            schema={'secondary'}
+          >
+            {confirmations[0].cancel_label}
+          </Button>
+          <Button
+            block
+            onClick={onClickConfirmBtn(confirmationId, onClickOk)}
+          >
+            {confirmations[0].confirm_label}
+          </Button>
+        </div>
+      );
+    },
+    [confirmations, onClickCancelBtn, onClickConfirmBtn]
+  );
+
+  return { confirmations, renderConfirmationButtons, getCurrentConfirmation };
+};
+
+export default useGetConfirmationByScreen;

From 02ebfc4446fc490bbe585b74de16001951d91be5 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Fri, 20 Sep 2024 15:52:43 +0700
Subject: [PATCH 02/14] [Issue-3461] Implement some app banner position

---
 .../EarningEntry/EarningOptions/index.tsx     | 18 ++++++-
 .../EarningEntry/EarningPositions/index.tsx   | 17 ++++++-
 .../src/Popup/Home/Nfts/NftCollections.tsx    | 47 +++++++++++++------
 .../src/Popup/Home/Tokens/index.tsx           | 16 ++++++-
 .../src/Popup/Settings/MissionPool/index.tsx  | 24 ++++++++--
 .../src/components/StaticContent/Banner.tsx   |  4 +-
 6 files changed, 99 insertions(+), 27 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
index b12f3997f1..31b63544ad 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
@@ -8,9 +8,10 @@ import { YieldPoolInfo, YieldPoolType } from '@subwallet/extension-base/types';
 import { BN_ZERO } from '@subwallet/extension-base/utils';
 import { EmptyList, FilterModal, Layout } from '@subwallet/extension-koni-ui/components';
 import { EarningOptionItem } from '@subwallet/extension-koni-ui/components/Earning';
+import BannerGenerator from '@subwallet/extension-koni-ui/components/StaticContent/BannerGenerator';
 import { ASTAR_PORTAL_URL, DEFAULT_EARN_PARAMS, EARN_TRANSACTION } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
-import { useFilterModal, useGroupYieldPosition, useHandleChainConnection, useSelector, useTranslation, useYieldGroupInfo } from '@subwallet/extension-koni-ui/hooks';
+import { useFilterModal, useGetBannerByScreen, useGroupYieldPosition, useHandleChainConnection, useSelector, useTranslation, useYieldGroupInfo } from '@subwallet/extension-koni-ui/hooks';
 import { getBalanceValue } from '@subwallet/extension-koni-ui/hooks/screen/home/useAccountBalance';
 import { ChainConnectionWrapper } from '@subwallet/extension-koni-ui/Popup/Home/Earning/shared/ChainConnectionWrapper';
 import { EarningEntryView, EarningPoolsParam, ThemeProps, YieldGroupInfo } from '@subwallet/extension-koni-ui/types';
@@ -71,7 +72,7 @@ function Component ({ className, hasEarningPositions, setEntryView }: Props) {
   const chainInfoMap = useSelector((state) => state.chainStore.chainInfoMap);
   const { currentAccount } = useSelector((state) => state.accountState);
   const { accountBalance: { tokenBalanceMap } } = useContext(HomeContext);
-
+  const { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('earning');
   const isShowBalance = useSelector((state) => state.settings.isShowBalance);
 
   const [, setEarnStorage] = useLocalStorage(EARN_TRANSACTION, DEFAULT_EARN_PARAMS);
@@ -360,6 +361,13 @@ function Component ({ className, hasEarningPositions, setEntryView }: Props) {
         subHeaderPaddingVertical={true}
         title={t<string>('Earning options')}
       >
+        <div className={'earning-banner-wrapper'}>
+          {!!banners.length && (<BannerGenerator
+            banners={banners}
+            dismissBanner={dismissBanner}
+            onClickBanner={onClickBanner}
+          />)}
+        </div>
         <SwList.Section
           actionBtnIcon={<Icon phosphorIcon={FadersHorizontal} />}
           className={'__section-list-container'}
@@ -403,6 +411,12 @@ const EarningOptions = styled(Component)<Props>(({ theme: { token } }: Props) =>
     '+ .earning-option-item': {
       marginTop: token.marginXS
     }
+  },
+
+  '.earning-banner-wrapper': {
+    paddingLeft: token.padding,
+    paddingRight: token.padding,
+    marginBottom: token.sizeXS
   }
 }));
 
diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx
index 2ed46da661..ce567a56c7 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx
@@ -6,8 +6,9 @@ import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
 import { YieldPoolType, YieldPositionInfo } from '@subwallet/extension-base/types';
 import { AlertModal, EmptyList, FilterModal, Layout } from '@subwallet/extension-koni-ui/components';
 import { EarningPositionItem } from '@subwallet/extension-koni-ui/components/Earning';
+import BannerGenerator from '@subwallet/extension-koni-ui/components/StaticContent/BannerGenerator';
 import { ASTAR_PORTAL_URL, BN_TEN, EARNING_WARNING_ANNOUNCEMENT } from '@subwallet/extension-koni-ui/constants';
-import { useAlert, useFilterModal, useGetYieldPositionForSpecificAccount, useSelector, useTranslation } from '@subwallet/extension-koni-ui/hooks';
+import { useAlert, useFilterModal, useGetBannerByScreen, useGetYieldPositionForSpecificAccount, useSelector, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { reloadCron } from '@subwallet/extension-koni-ui/messaging';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { EarningEntryView, EarningPositionDetailParam, ExtraYieldPositionInfo, ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -46,6 +47,7 @@ function Component ({ className, earningPositions, setEntryView, setLoading }: P
   const { filterSelectionMap, onApplyFilter, onChangeFilterOption, onCloseFilterModal, selectedFilters } = useFilterModal(FILTER_MODAL_ID);
   const { alertProps, closeAlert, openAlert } = useAlert(alertModalId);
   const specificList = useGetYieldPositionForSpecificAccount(currentAccount?.address);
+  const { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('earning');
   const [announcement, setAnnouncement] = useLocalStorage(EARNING_WARNING_ANNOUNCEMENT, 'nonConfirmed');
 
   const items: ExtraYieldPositionInfo[] = useMemo(() => {
@@ -369,6 +371,13 @@ function Component ({ className, earningPositions, setEntryView, setLoading }: P
         subHeaderPaddingVertical={true}
         title={t<string>('Your earning positions')}
       >
+        <div className={'earning-banner-wrapper'}>
+          {!!banners.length && (<BannerGenerator
+            banners={banners}
+            dismissBanner={dismissBanner}
+            onClickBanner={onClickBanner}
+          />)}
+        </div>
         <SwList.Section
           actionBtnIcon={<Icon phosphorIcon={FadersHorizontal} />}
           className={'__section-list-container'}
@@ -434,6 +443,12 @@ const EarningPositions = styled(Component)<Props>(({ theme: { token } }: Props)
     '+ .earning-position-item': {
       marginTop: token.marginXS
     }
+  },
+
+  '.earning-banner-wrapper': {
+    paddingLeft: token.padding,
+    paddingRight: token.padding,
+    marginBottom: token.sizeXS
   }
 }));
 
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
index b29418297b..b9bd32ea8a 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
@@ -3,8 +3,9 @@
 
 import { NftCollection, NftItem } from '@subwallet/extension-base/background/KoniTypes';
 import { EmptyList, Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
+import BannerGenerator from '@subwallet/extension-koni-ui/components/StaticContent/BannerGenerator';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
-import { useGetNftByAccount, useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
+import { useGetBannerByScreen, useGetNftByAccount, useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { reloadCron } from '@subwallet/extension-koni-ui/messaging';
 import { NftGalleryWrapper } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/component/NftGalleryWrapper';
 import { INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
@@ -38,6 +39,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const { nftCollections, nftItems } = useGetNftByAccount();
   const [loading, setLoading] = React.useState<boolean>(false);
   const notify = useNotification();
+  const { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('nft');
 
   const subHeaderButton: ButtonProps[] = [
     {
@@ -163,20 +165,29 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         subHeaderPaddingVertical={true}
         title={t<string>('Your collections')}
       >
-        <SwList.Section
-          className={CN('nft_collection_list__container')}
-          displayGrid={true}
-          enableSearchInput={true}
-          gridGap={'14px'}
-          list={nftCollections}
-          minColumnWidth={'160px'}
-          renderItem={renderNftCollection}
-          renderOnScroll={true}
-          renderWhenEmpty={emptyNft}
-          searchFunction={searchCollection}
-          searchMinCharactersCount={2}
-          searchPlaceholder={t<string>('Search collection name')}
-        />
+        <>
+          <div className={'nft-banner-wrapper'}>
+            {!!banners.length && (<BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />)}
+          </div>
+          <SwList.Section
+            className={CN('nft_collection_list__container')}
+            displayGrid={true}
+            enableSearchInput={true}
+            gridGap={'14px'}
+            list={nftCollections}
+            minColumnWidth={'160px'}
+            renderItem={renderNftCollection}
+            renderOnScroll={true}
+            renderWhenEmpty={emptyNft}
+            searchFunction={searchCollection}
+            searchMinCharactersCount={2}
+            searchPlaceholder={t<string>('Search collection name')}
+          />
+        </>
       </Layout.Base>
     </PageWrapper>
   );
@@ -207,6 +218,12 @@ const NftCollections = styled(Component)<Props>(({ theme: { token } }: Props) =>
         paddingBottom: 1,
         marginBottom: -1
       }
+    },
+
+    '.nft-banner-wrapper': {
+      paddingLeft: token.padding,
+      paddingRight: token.padding,
+      marginBottom: token.sizeXS
     }
   });
 });
diff --git a/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
index 999dada6b5..2ca1c3382f 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
@@ -5,11 +5,12 @@ import { EmptyList, PageWrapper } from '@subwallet/extension-koni-ui/components'
 import { AccountSelectorModal } from '@subwallet/extension-koni-ui/components/Modal/AccountSelectorModal';
 import ReceiveQrModal from '@subwallet/extension-koni-ui/components/Modal/ReceiveModal/ReceiveQrModal';
 import { TokensSelectorModal } from '@subwallet/extension-koni-ui/components/Modal/ReceiveModal/TokensSelectorModal';
+import BannerGenerator from '@subwallet/extension-koni-ui/components/StaticContent/BannerGenerator';
 import { TokenGroupBalanceItem } from '@subwallet/extension-koni-ui/components/TokenItem/TokenGroupBalanceItem';
 import { DEFAULT_SWAP_PARAMS, DEFAULT_TRANSFER_PARAMS, SWAP_TRANSACTION, TRANSFER_TRANSACTION } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
-import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
+import { useGetBannerByScreen, useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import useNotification from '@subwallet/extension-koni-ui/hooks/common/useNotification';
 import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
 import useReceiveQR from '@subwallet/extension-koni-ui/hooks/screen/home/useReceiveQR';
@@ -53,7 +54,7 @@ const Component = (): React.ReactElement => {
   const zkModeSyncProgress = useSelector((state: RootState) => state.mantaPay.progress);
   const [, setStorage] = useLocalStorage<TransferParams>(TRANSFER_TRANSACTION, DEFAULT_TRANSFER_PARAMS);
   const [, setSwapStorage] = useLocalStorage(SWAP_TRANSACTION, DEFAULT_SWAP_PARAMS);
-
+  const { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('token');
   const transactionFromValue = useMemo(() => {
     return currentAccount?.address ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
   }, [currentAccount?.address]);
@@ -260,6 +261,13 @@ const Component = (): React.ReactElement => {
             />
           )
         }
+        <div className={'token-banner-wrapper'}>
+          {!!banners.length && (<BannerGenerator
+            banners={banners}
+            dismissBanner={dismissBanner}
+            onClickBanner={onClickBanner}
+          />)}
+        </div>
 
         {
           tokenGroupBalanceItems.map((item) => {
@@ -402,6 +410,10 @@ const Tokens = styled(WrapperComponent)<ThemeProps>(({ theme: { extendToken, tok
 
     '.zk-mode-alert-area': {
       marginBottom: token.marginXS
+    },
+
+    '.token-banner-wrapper': {
+      marginBottom: token.sizeXS
     }
   });
 });
diff --git a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
index 14ded8243a..dd69a998ec 100644
--- a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
@@ -5,7 +5,8 @@ import { FilterModal, Layout } from '@subwallet/extension-koni-ui/components';
 import EmptyList from '@subwallet/extension-koni-ui/components/EmptyList/EmptyList';
 import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
 import Search from '@subwallet/extension-koni-ui/components/Search';
-import { useFilterModal, useSelector } from '@subwallet/extension-koni-ui/hooks';
+import BannerGenerator from '@subwallet/extension-koni-ui/components/StaticContent/BannerGenerator';
+import { useFilterModal, useGetBannerByScreen, useSelector } from '@subwallet/extension-koni-ui/hooks';
 import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { MissionDetailModal, PoolDetailModalId } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/MissionDetailModal';
 import MissionItem from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/MissionPoolItem';
@@ -32,6 +33,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   const { activeModal } = useContext(ModalContext);
   const [currentSelectItem, setCurrentSelectItem] = useState<MissionInfo | null>(null);
   const { missions } = useSelector((state: RootState) => state.missionPool);
+  const { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('missionPools');
   const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('missionPools');
   const computedMission = useMemo(() => {
     return missions.map((item) => {
@@ -200,6 +202,14 @@ const Component: React.FC<Props> = ({ className }: Props) => {
       title={t<string>('Mission Pools')}
     >
       <div className={'__tool-area'}>
+        <div className={'mission-pool-banner-wrapper'}>
+          {!!banners.length && (<BannerGenerator
+            banners={banners}
+            dismissBanner={dismissBanner}
+            onClickBanner={onClickBanner}
+          />)}
+        </div>
+
         <Search
           actionBtnIcon={(
             <Icon
@@ -247,8 +257,8 @@ const Component: React.FC<Props> = ({ className }: Props) => {
         title={t('Filter')}
       />
       <MissionDetailModal
-        data={currentSelectItem}
         currentConfirmations={currentConfirmation}
+        data={currentSelectItem}
         renderConfirmationButtons={renderConfirmationButtons}
       />
     </Layout.Base>
@@ -284,12 +294,12 @@ const MissionPool = styled(Component)<Props>(({ theme: { token } }: Props) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      paddingTop: token.paddingXS
+      paddingTop: token.paddingXS,
+      paddingBottom: token.paddingXS
     },
     '.__tool-area': {
       display: 'flex',
       flexDirection: 'column',
-      gap: token.sizeXS,
       marginBottom: token.marginXS
     },
     '.__content-wrapper': {
@@ -300,8 +310,12 @@ const MissionPool = styled(Component)<Props>(({ theme: { token } }: Props) => {
       paddingBottom: 0,
       marginTop: '8px !important',
       marginBottom: '8px !important'
+    },
+    '.mission-pool-banner-wrapper': {
+      paddingTop: token.paddingXS,
+      paddingLeft: token.padding,
+      paddingRight: token.padding
     }
-
   };
 });
 
diff --git a/packages/extension-koni-ui/src/components/StaticContent/Banner.tsx b/packages/extension-koni-ui/src/components/StaticContent/Banner.tsx
index c4f05ca3a5..a281ad8e14 100644
--- a/packages/extension-koni-ui/src/components/StaticContent/Banner.tsx
+++ b/packages/extension-koni-ui/src/components/StaticContent/Banner.tsx
@@ -101,8 +101,8 @@ const Banner = styled(Component)<Props>(({ theme: { token } }: Props) => {
 
     '.dismiss-button': {
       position: 'absolute',
-      right: -3,
-      top: token.sizeXXS
+      right: -token.sizeXXS,
+      top: -token.sizeXXS
     }
   };
 });

From a6264faf61fd92f6fbad8ad77788e4b5ec80fbdf Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Fri, 20 Sep 2024 19:14:55 +0700
Subject: [PATCH 03/14] [Issue-3461] Update UI popup update version

---
 packages/extension-koni-ui/package.json       |   1 +
 .../StaticContent/ContentGenerator.tsx        |   4 +-
 .../src/contexts/AppOnlineContentProvider.tsx |   4 +
 yarn.lock                                     | 110 ++++++++++++++++++
 4 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/packages/extension-koni-ui/package.json b/packages/extension-koni-ui/package.json
index d906e03319..c40736bb42 100644
--- a/packages/extension-koni-ui/package.json
+++ b/packages/extension-koni-ui/package.json
@@ -79,6 +79,7 @@
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
     "redux-toolkit": "^1.1.2",
+    "rehype-raw": "^7.0.0",
     "semantic-ui-react": "^2.1.4",
     "styled-components": "^5.3.6",
     "url-parse": "^1.5.10",
diff --git a/packages/extension-koni-ui/src/components/StaticContent/ContentGenerator.tsx b/packages/extension-koni-ui/src/components/StaticContent/ContentGenerator.tsx
index b384442261..13932b7095 100644
--- a/packages/extension-koni-ui/src/components/StaticContent/ContentGenerator.tsx
+++ b/packages/extension-koni-ui/src/components/StaticContent/ContentGenerator.tsx
@@ -7,6 +7,7 @@ import { Image } from '@subwallet/react-ui';
 import CN from 'classnames';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 import gfm from 'remark-gfm';
 import styled from 'styled-components';
 
@@ -96,6 +97,7 @@ const Component = ({ className, content }: Props) => {
           );
         }
       }}
+      rehypePlugins={[rehypeRaw]}
       remarkPlugins={[gfm]}
     >{content}</ReactMarkdown>
   );
@@ -121,7 +123,7 @@ const ContentGenerator = styled(Component)<Props>(({ theme: { token } }: Props)
       paddingBottom: 4,
       marginTop: 4,
       marginBottom: 4,
-      display: 'inline-block'
+      display: 'block'
     },
     '.custom-hr': {
       backgroundColor: token.colorBgBorder,
diff --git a/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx b/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
index 7fb1a0856e..9ede23a6c0 100644
--- a/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
+++ b/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
@@ -62,6 +62,10 @@ const getPositionByRouteName = (currentRoute?: string) => {
       return 'earning';
     case '/home/crowdloans':
       return 'crowdloan';
+    case '/home/mission-pools':
+      return 'mission_pool';
+    case '/home/history':
+      return 'history';
     case '/':
     default:
       return 'token';
diff --git a/yarn.lock b/yarn.lock
index 7e3b688e6d..0898cd540d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6489,6 +6489,7 @@ __metadata:
     redux: ^4.2.0
     redux-persist: ^6.0.0
     redux-toolkit: ^1.1.2
+    rehype-raw: ^7.0.0
     semantic-ui-react: ^2.1.4
     sinon-chrome: ^3.0.1
     styled-components: ^5.3.6
@@ -15986,6 +15987,52 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-from-parse5@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "hast-util-from-parse5@npm:8.0.1"
+  dependencies:
+    "@types/hast": ^3.0.0
+    "@types/unist": ^3.0.0
+    devlop: ^1.0.0
+    hastscript: ^8.0.0
+    property-information: ^6.0.0
+    vfile: ^6.0.0
+    vfile-location: ^5.0.0
+    web-namespaces: ^2.0.0
+  checksum: fdd1ab8b03af13778ecb94ef9a58b1e3528410cdfceb3d6bb7600508967d0d836b451bc7bc3baf66efb7c730d3d395eea4bb1b30352b0162823d9f0de976774b
+  languageName: node
+  linkType: hard
+
+"hast-util-parse-selector@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "hast-util-parse-selector@npm:4.0.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+  checksum: 76087670d3b0b50b23a6cb70bca53a6176d6608307ccdbb3ed18b650b82e7c3513bfc40348f1389dc0c5ae872b9a768851f4335f44654abd7deafd6974c52402
+  languageName: node
+  linkType: hard
+
+"hast-util-raw@npm:^9.0.0":
+  version: 9.0.4
+  resolution: "hast-util-raw@npm:9.0.4"
+  dependencies:
+    "@types/hast": ^3.0.0
+    "@types/unist": ^3.0.0
+    "@ungap/structured-clone": ^1.0.0
+    hast-util-from-parse5: ^8.0.0
+    hast-util-to-parse5: ^8.0.0
+    html-void-elements: ^3.0.0
+    mdast-util-to-hast: ^13.0.0
+    parse5: ^7.0.0
+    unist-util-position: ^5.0.0
+    unist-util-visit: ^5.0.0
+    vfile: ^6.0.0
+    web-namespaces: ^2.0.0
+    zwitch: ^2.0.0
+  checksum: 1096c21ca78908549fa392f10783eb7a3f4c6f11d7a6f572b597464edf53e7bcf36181ddf3432ff7cec8b5455b8d5f054b2214cfb35d705a5ff3968c94409e7a
+  languageName: node
+  linkType: hard
+
 "hast-util-to-jsx-runtime@npm:^2.0.0":
   version: 2.3.0
   resolution: "hast-util-to-jsx-runtime@npm:2.3.0"
@@ -16009,6 +16056,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-parse5@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "hast-util-to-parse5@npm:8.0.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+    comma-separated-tokens: ^2.0.0
+    devlop: ^1.0.0
+    property-information: ^6.0.0
+    space-separated-tokens: ^2.0.0
+    web-namespaces: ^2.0.0
+    zwitch: ^2.0.0
+  checksum: 137469209cb2b32b57387928878dc85310fbd5afa4807a8da69529199bb1d19044bfc95b50c3dc68d4fb2b6cb8bf99b899285597ab6ab318f50422eefd5599dd
+  languageName: node
+  linkType: hard
+
 "hast-util-whitespace@npm:^3.0.0":
   version: 3.0.0
   resolution: "hast-util-whitespace@npm:3.0.0"
@@ -16018,6 +16080,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hastscript@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "hastscript@npm:8.0.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+    comma-separated-tokens: ^2.0.0
+    hast-util-parse-selector: ^4.0.0
+    property-information: ^6.0.0
+    space-separated-tokens: ^2.0.0
+  checksum: ae3c20223e7b847320c0f98b6fb3c763ebe1bf3913c5805fbc176cf84553a9db1117ca34cf842a5235890b4b9ae0e94501bfdc9a9b870a5dbf5fc52426db1097
+  languageName: node
+  linkType: hard
+
 "he@npm:^1.2.0":
   version: 1.2.0
   resolution: "he@npm:1.2.0"
@@ -16170,6 +16245,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-void-elements@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-void-elements@npm:3.0.0"
+  checksum: 59be397525465a7489028afa064c55763d9cccd1d7d9f630cca47137317f0e897a9ca26cef7e745e7cff1abc44260cfa407742b243a54261dfacd42230e94fce
+  languageName: node
+  linkType: hard
+
 "html-webpack-plugin@npm:^5.5.0":
   version: 5.5.0
   resolution: "html-webpack-plugin@npm:5.5.0"
@@ -24339,6 +24421,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-raw@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "rehype-raw@npm:7.0.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+    hast-util-raw: ^9.0.0
+    vfile: ^6.0.0
+  checksum: f9e28dcbf4c6c7d91a97c10a840310f18ef3268aa45abb3e0428b6b191ff3c4fa8f753b910d768588a2dac5c7da7e557b4ddc3f1b6cd252e8d20cb62d60c65ed
+  languageName: node
+  linkType: hard
+
 "relateurl@npm:^0.2.7":
   version: 0.2.7
   resolution: "relateurl@npm:0.2.7"
@@ -27486,6 +27579,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-location@npm:^5.0.0":
+  version: 5.0.3
+  resolution: "vfile-location@npm:5.0.3"
+  dependencies:
+    "@types/unist": ^3.0.0
+    vfile: ^6.0.0
+  checksum: bfb3821b6981b6e9aa369bed67a40090b800562064ea312e84437762562df3225a0ca922695389cc0ef1e115f19476c363f53e3ed44dec17c50678b7670b5f2b
+  languageName: node
+  linkType: hard
+
 "vfile-message@npm:^4.0.0":
   version: 4.0.2
   resolution: "vfile-message@npm:4.0.2"
@@ -27665,6 +27768,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-namespaces@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "web-namespaces@npm:2.0.1"
+  checksum: b6d9f02f1a43d0ef0848a812d89c83801d5bbad57d8bb61f02eb6d7eb794c3736f6cc2e1191664bb26136594c8218ac609f4069722c6f56d9fc2d808fa9271c6
+  languageName: node
+  linkType: hard
+
 "web-streams-polyfill@npm:^3.0.3":
   version: 3.2.1
   resolution: "web-streams-polyfill@npm:3.2.1"

From c8d17251b6ba0c1df980c6f776e1b6c42b4bd5f3 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Mon, 23 Sep 2024 09:28:09 +0700
Subject: [PATCH 04/14] [Issue-3461] Update UI popup update version

---
 .../hooks/static-content/useHandleAppConfirmationMap.ts   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension-koni-ui/src/hooks/static-content/useHandleAppConfirmationMap.ts b/packages/extension-koni-ui/src/hooks/static-content/useHandleAppConfirmationMap.ts
index 3724e14c16..99c42c393f 100644
--- a/packages/extension-koni-ui/src/hooks/static-content/useHandleAppConfirmationMap.ts
+++ b/packages/extension-koni-ui/src/hooks/static-content/useHandleAppConfirmationMap.ts
@@ -16,10 +16,10 @@ export interface AppConfirmationHookType {
 export const useHandleAppConfirmationMap = (): AppConfirmationHookType => {
   const dispatch = useDispatch();
   const { appConfirmationData, confirmationHistoryMap } = useSelector((state: RootState) => state.staticContent);
-  const bannerHistoryMapRef = useRef<Record<string, MktCampaignHistoryData>>(confirmationHistoryMap);
+  const confirmationHistoryMapRef = useRef<Record<string, MktCampaignHistoryData>>(confirmationHistoryMap);
 
   useEffect(() => {
-    bannerHistoryMapRef.current = confirmationHistoryMap;
+    confirmationHistoryMapRef.current = confirmationHistoryMap;
   }, [confirmationHistoryMap]);
 
   useEffect(() => {
@@ -38,10 +38,10 @@ export const useHandleAppConfirmationMap = (): AppConfirmationHookType => {
     const result: Record<string, MktCampaignHistoryData> = {};
 
     Object.keys(newData).forEach((key) => {
-      if (!bannerHistoryMapRef.current[key]) {
+      if (!confirmationHistoryMapRef.current[key]) {
         result[key] = newData[key];
       } else {
-        result[key] = bannerHistoryMapRef.current[key];
+        result[key] = confirmationHistoryMapRef.current[key];
       }
     });
 

From 158ce71e41a2462a99b6633df6e2b0f374ec8428 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Mon, 23 Sep 2024 18:55:17 +0700
Subject: [PATCH 05/14] [Issue-3461] Optimize code

---
 .../EarningEntry/EarningOptions/index.tsx     | 16 +++++----
 .../EarningEntry/EarningPositions/index.tsx   | 16 +++++----
 .../src/Popup/Home/Nfts/NftCollections.tsx    | 16 +++++----
 .../src/Popup/Home/Tokens/index.tsx           | 17 +++++-----
 .../MissionPool/MissionDetailModal.tsx        | 33 ++++++++++---------
 .../src/Popup/Settings/MissionPool/index.tsx  | 32 ++++++------------
 .../src/Popup/Transaction/variants/Earn.tsx   | 10 +++---
 .../Popup/Transaction/variants/SendFund.tsx   | 10 +++---
 .../src/Popup/Transaction/variants/Unbond.tsx | 10 +++---
 .../Popup/Transaction/variants/Withdraw.tsx   | 10 +++---
 .../Modal/Campaign/AppPopupModal.tsx          | 12 +++----
 .../src/contexts/MktCampaignModalContext.tsx  | 30 +++++++----------
 .../campaign/useGetConfirmationByScreen.tsx   |  2 +-
 13 files changed, 102 insertions(+), 112 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
index 31b63544ad..16cbec1c9e 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
@@ -361,13 +361,15 @@ function Component ({ className, hasEarningPositions, setEntryView }: Props) {
         subHeaderPaddingVertical={true}
         title={t<string>('Earning options')}
       >
-        <div className={'earning-banner-wrapper'}>
-          {!!banners.length && (<BannerGenerator
-            banners={banners}
-            dismissBanner={dismissBanner}
-            onClickBanner={onClickBanner}
-          />)}
-        </div>
+        {!!banners.length && (
+          <div className={'earning-banner-wrapper'}>
+            <BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />
+          </div>
+        )}
         <SwList.Section
           actionBtnIcon={<Icon phosphorIcon={FadersHorizontal} />}
           className={'__section-list-container'}
diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx
index ce567a56c7..aa95716866 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningPositions/index.tsx
@@ -371,13 +371,15 @@ function Component ({ className, earningPositions, setEntryView, setLoading }: P
         subHeaderPaddingVertical={true}
         title={t<string>('Your earning positions')}
       >
-        <div className={'earning-banner-wrapper'}>
-          {!!banners.length && (<BannerGenerator
-            banners={banners}
-            dismissBanner={dismissBanner}
-            onClickBanner={onClickBanner}
-          />)}
-        </div>
+        {!!banners.length && (
+          <div className={'earning-banner-wrapper'}>
+            <BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />
+          </div>
+        )}
         <SwList.Section
           actionBtnIcon={<Icon phosphorIcon={FadersHorizontal} />}
           className={'__section-list-container'}
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
index b9bd32ea8a..ee21e629c5 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
@@ -166,13 +166,15 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         title={t<string>('Your collections')}
       >
         <>
-          <div className={'nft-banner-wrapper'}>
-            {!!banners.length && (<BannerGenerator
-              banners={banners}
-              dismissBanner={dismissBanner}
-              onClickBanner={onClickBanner}
-            />)}
-          </div>
+          {!!banners.length && (
+            <div className={'nft-banner-wrapper'}>
+              <BannerGenerator
+                banners={banners}
+                dismissBanner={dismissBanner}
+                onClickBanner={onClickBanner}
+              />
+            </div>
+          )}
           <SwList.Section
             className={CN('nft_collection_list__container')}
             displayGrid={true}
diff --git a/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
index 2ca1c3382f..1999155ad9 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
@@ -261,14 +261,15 @@ const Component = (): React.ReactElement => {
             />
           )
         }
-        <div className={'token-banner-wrapper'}>
-          {!!banners.length && (<BannerGenerator
-            banners={banners}
-            dismissBanner={dismissBanner}
-            onClickBanner={onClickBanner}
-          />)}
-        </div>
-
+        {!!banners.length && (
+          <div className={'token-banner-wrapper'}>
+            <BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />
+          </div>
+        )}
         {
           tokenGroupBalanceItems.map((item) => {
             return (
diff --git a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
index bf2c465201..13c7cda82a 100644
--- a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
+++ b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
@@ -1,12 +1,12 @@
 // Copyright 2019-2022 @subwallet/extension-web-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { AppConfirmationData } from '@subwallet/extension-base/services/mkt-campaign-service/types';
 import DefaultLogosMap from '@subwallet/extension-koni-ui/assets/logo';
 import { InfoItemBase, MetaInfo } from '@subwallet/extension-koni-ui/components';
 import { NetworkGroup } from '@subwallet/extension-koni-ui/components/MetaInfo/parts';
 import { MktCampaignModalContext } from '@subwallet/extension-koni-ui/contexts/MktCampaignModalContext';
 import { useTranslation } from '@subwallet/extension-koni-ui/hooks';
+import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { missionCategoryMap, MissionCategoryType, tagMap } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/predefined';
 import { Theme } from '@subwallet/extension-koni-ui/themes';
 import { MissionInfo, ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -19,19 +19,18 @@ import styled, { ThemeContext } from 'styled-components';
 
 type Props = ThemeProps & {
   data: MissionInfo | null,
-  currentConfirmations?: AppConfirmationData[];
-  renderConfirmationButtons: (onClickCancel: () => void, onClickOk: () => void) => React.ReactElement;
 };
 
 export const PoolDetailModalId = 'PoolDetailModalId';
 
 const modalId = PoolDetailModalId;
 
-function Component ({ className = '', currentConfirmations, data, renderConfirmationButtons }: Props): React.ReactElement<Props> {
+function Component ({ className = '', data }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { inactiveModal } = useContext(ModalContext);
   const mktCampaignModalContext = useContext(MktCampaignModalContext);
   const logoMap = useContext<Theme>(ThemeContext as Context<Theme>).logoMap;
+  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('missionPools');
   const timeline = useMemo<string>(() => {
     if (!data?.start_time && !data?.end_time) {
       return t('TBD');
@@ -43,33 +42,37 @@ function Component ({ className = '', currentConfirmations, data, renderConfirma
     return `${start} - ${end}`;
   }, [data?.end_time, data?.start_time, t]);
 
-  const onClickGlobalIcon: ButtonProps['onClick'] = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
+  const currentConfirmation = useMemo(() => {
+    if (data) {
+      return getCurrentConfirmation([data.id.toString()]);
+    } else {
+      return undefined;
+    }
+  }, [getCurrentConfirmation, data]);
+
+  const onClickGlobalIcon: ButtonProps['onClick'] = useCallback(() => {
     data?.campaign_url && openInNewTab(data.campaign_url)();
   }, [data?.campaign_url]);
 
-  const onClickTwitterIcon: ButtonProps['onClick'] = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
+  const onClickTwitterIcon: ButtonProps['onClick'] = useCallback(() => {
     data?.twitter_url && openInNewTab(data.twitter_url)();
   }, [data?.twitter_url]);
 
-  const onClickJoinNow: ButtonProps['onClick'] = useCallback((e: React.MouseEvent) => {
-    if (currentConfirmations && currentConfirmations.length) {
+  const onClickJoinNow: ButtonProps['onClick'] = useCallback(() => {
+    if (currentConfirmation) {
       mktCampaignModalContext.openModal({
         type: 'confirmation',
-        title: currentConfirmations[0].name,
-        message: currentConfirmations[0].content,
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
         externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
-          e.stopPropagation();
           mktCampaignModalContext.hideModal();
           data?.url && openInNewTab(data.url)();
         })
       });
     } else {
-      e.stopPropagation();
       data?.url && openInNewTab(data.url)();
     }
-  }, [currentConfirmations, data?.url, mktCampaignModalContext, renderConfirmationButtons]);
+  }, [currentConfirmation, data?.url, mktCampaignModalContext, renderConfirmationButtons]);
 
   const onCancel = useCallback(() => {
     inactiveModal(modalId);
diff --git a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
index dd69a998ec..fba216d8f4 100644
--- a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/index.tsx
@@ -7,7 +7,6 @@ import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/comp
 import Search from '@subwallet/extension-koni-ui/components/Search';
 import BannerGenerator from '@subwallet/extension-koni-ui/components/StaticContent/BannerGenerator';
 import { useFilterModal, useGetBannerByScreen, useSelector } from '@subwallet/extension-koni-ui/hooks';
-import useGetConfirmationByScreen from '@subwallet/extension-koni-ui/hooks/campaign/useGetConfirmationByScreen';
 import { MissionDetailModal, PoolDetailModalId } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/MissionDetailModal';
 import MissionItem from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/MissionPoolItem';
 import { missionCategories, MissionCategoryType, MissionTab } from '@subwallet/extension-koni-ui/Popup/Settings/MissionPool/predefined';
@@ -34,7 +33,6 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   const [currentSelectItem, setCurrentSelectItem] = useState<MissionInfo | null>(null);
   const { missions } = useSelector((state: RootState) => state.missionPool);
   const { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('missionPools');
-  const { getCurrentConfirmation, renderConfirmationButtons } = useGetConfirmationByScreen('missionPools');
   const computedMission = useMemo(() => {
     return missions.map((item) => {
       return {
@@ -44,14 +42,6 @@ const Component: React.FC<Props> = ({ className }: Props) => {
     });
   }, [missions]);
 
-  const currentConfirmation = useMemo(() => {
-    if (currentSelectItem) {
-      return getCurrentConfirmation([currentSelectItem.id.toString()]);
-    } else {
-      return undefined;
-    }
-  }, [getCurrentConfirmation, currentSelectItem]);
-
   const filterOptions = useMemo(() => [
     ...missionCategories.map((c) => ({
       label: t(c.name),
@@ -202,13 +192,15 @@ const Component: React.FC<Props> = ({ className }: Props) => {
       title={t<string>('Mission Pools')}
     >
       <div className={'__tool-area'}>
-        <div className={'mission-pool-banner-wrapper'}>
-          {!!banners.length && (<BannerGenerator
-            banners={banners}
-            dismissBanner={dismissBanner}
-            onClickBanner={onClickBanner}
-          />)}
-        </div>
+        {!!banners.length && (
+          <div className={'mission-pool-banner-wrapper'}>
+            <BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />
+          </div>
+        )}
 
         <Search
           actionBtnIcon={(
@@ -256,11 +248,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
         options={filterOptions}
         title={t('Filter')}
       />
-      <MissionDetailModal
-        currentConfirmations={currentConfirmation}
-        data={currentSelectItem}
-        renderConfirmationButtons={renderConfirmationButtons}
-      />
+      <MissionDetailModal data={currentSelectItem} />
     </Layout.Base>
   );
 };
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
index 4f15cc92be..519fd5ff9b 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
@@ -110,7 +110,7 @@ const Component = () => {
 
   const chainState = useFetchChainState(poolInfo?.chain || '');
 
-  const currentConfirmations = useMemo(() => {
+  const currentConfirmation = useMemo(() => {
     if (slug) {
       return getCurrentConfirmation([slug]);
     } else {
@@ -562,11 +562,11 @@ const Component = () => {
   }, [chainInfoMap, chainStakingBoth, closeAlert, currentStep, onError, onSuccess, openAlert, poolInfo, poolTargets, processState.feeStructure, processState.steps, setIsDisableHeader, t]);
 
   const onClickSubmit = useCallback((values: EarnParams) => {
-    if (currentConfirmations && currentConfirmations.length) {
+    if (currentConfirmation) {
       mktCampaignModalContext.openModal({
         type: 'confirmation',
-        title: currentConfirmations[0].name,
-        message: currentConfirmations[0].content,
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
         externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
           onSubmit(values);
           mktCampaignModalContext.hideModal();
@@ -575,7 +575,7 @@ const Component = () => {
     } else {
       onSubmit(values);
     }
-  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+  }, [currentConfirmation, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
 
   const renderMetaInfo = useCallback(() => {
     const value = amountValue ? parseFloat(amountValue) / 10 ** assetDecimals : 0;
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
index 8439e73d1f..a88fbb79b0 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx
@@ -248,7 +248,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
   const checkAction = usePreCheckAction(from, true, detectTranslate('The account you are using is {{accountTitle}}, you cannot send assets with it'));
   const isZKModeEnabled = useIsMantaPayEnabled(from);
 
-  const currentConfirmations = useMemo(() => {
+  const currentConfirmation = useMemo(() => {
     if (chain && destChain) {
       return getCurrentConfirmation([chain, destChain]);
     } else {
@@ -685,11 +685,11 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
   }, [assetInfo, chain, chainInfoMap, closeAlert, destChain, doSubmit, isTransferAll, openAlert, t]);
 
   const onClickSubmit = useCallback((values: TransferParams) => {
-    if (currentConfirmations && currentConfirmations.length) {
+    if (currentConfirmation) {
       mktCampaignModalContext.openModal({
         type: 'confirmation',
-        title: currentConfirmations[0].name,
-        message: currentConfirmations[0].content,
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
         externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
           onSubmit(values);
           mktCampaignModalContext.hideModal();
@@ -698,7 +698,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
     } else {
       onSubmit(values);
     }
-  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+  }, [currentConfirmation, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
 
   // TODO: Need to review
   // Auto fill logic
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx
index 3e4f8d93c7..4a0dcdd2b0 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/Unbond.tsx
@@ -166,7 +166,7 @@ const Component: React.FC = () => {
     }
   }, [poolInfo.statistic, t]);
 
-  const currentConfirmations = useMemo(() => {
+  const currentConfirmation = useMemo(() => {
     if (slug) {
       return getCurrentConfirmation([slug]);
     } else {
@@ -260,11 +260,11 @@ const Component: React.FC = () => {
   }, [currentValidator, mustChooseValidator, onError, onSuccess, poolInfo, positionInfo]);
 
   const onClickSubmit = useCallback((values: UnStakeParams) => {
-    if (currentConfirmations && currentConfirmations.length) {
+    if (currentConfirmation) {
       mktCampaignModalContext.openModal({
         type: 'confirmation',
-        title: currentConfirmations[0].name,
-        message: currentConfirmations[0].content,
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
         externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
           onSubmit(values);
           mktCampaignModalContext.hideModal();
@@ -273,7 +273,7 @@ const Component: React.FC = () => {
     } else {
       onSubmit(values);
     }
-  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+  }, [currentConfirmation, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
 
   const renderBounded = useCallback(() => {
     return (
diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx
index ceb6f68c59..f509bc75df 100644
--- a/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx
+++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/Withdraw.tsx
@@ -83,7 +83,7 @@ const Component = () => {
   const poolChain = poolInfo?.chain || '';
   const networkPrefix = chainInfoMap[poolChain]?.substrateInfo?.addressPrefix;
 
-  const currentConfirmations = useMemo(() => {
+  const currentConfirmation = useMemo(() => {
     if (slug) {
       return getCurrentConfirmation([slug]);
     } else {
@@ -155,11 +155,11 @@ const Component = () => {
   }, [onError, onSuccess, unstakingInfo]);
 
   const onClickSubmit = useCallback((values: WithdrawParams) => {
-    if (currentConfirmations && currentConfirmations.length) {
+    if (currentConfirmation) {
       mktCampaignModalContext.openModal({
         type: 'confirmation',
-        title: currentConfirmations[0].name,
-        message: currentConfirmations[0].content,
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
         externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
           onSubmit(values);
           mktCampaignModalContext.hideModal();
@@ -168,7 +168,7 @@ const Component = () => {
     } else {
       onSubmit(values);
     }
-  }, [currentConfirmations, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
+  }, [currentConfirmation, mktCampaignModalContext, onSubmit, renderConfirmationButtons]);
 
   const onPreCheck = usePreCheckAction(fromValue);
 
diff --git a/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx b/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
index 299aba2781..b86eacccd7 100644
--- a/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
+++ b/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
@@ -17,9 +17,9 @@ import { useLocalStorage } from 'usehooks-ts';
 import OnlineButtonGroups from '../../StaticContent/OnlineButtonGroups';
 
 interface Props extends ThemeProps {
-  message: string;
-  title: string;
-  buttons: AppContentButton[];
+  message?: string;
+  title?: string;
+  buttons?: AppContentButton[];
   externalButtons?: React.ReactNode;
   onPressButton?: (url?: string) => void;
   onCloseModal?: () => void;
@@ -106,16 +106,16 @@ const Component: React.FC<Props> = (props: Props) => {
         className={CN(className)}
         closable={false}
         footer={
-          externalButtons || <OnlineButtonGroups
+          externalButtons || (buttons && (<OnlineButtonGroups
             buttons={buttons}
             onClickButton={_onClickButton}
-          />
+          />))
         }
         id={modalId}
         maskClosable={false}
         title={title}
       >
-        <ContentGenerator content={message} />
+        <ContentGenerator content={message || ''} />
       </SwModal>
 
       {!!instructionButton && instructionButton.instruction && currentInstructionData && (
diff --git a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
index c1d48428cd..44d6275925 100644
--- a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
+++ b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
@@ -5,7 +5,7 @@ import { APP_POPUP_MODAL, EARNING_WARNING_ANNOUNCEMENT } from '@subwallet/extens
 import { toggleCampaignPopup } from '@subwallet/extension-koni-ui/messaging/campaigns';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ModalContext } from '@subwallet/react-ui';
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import AppPopupModal from '../components/Modal/Campaign/AppPopupModal';
@@ -33,14 +33,14 @@ export interface MktCampaignModalType {
 export const MktCampaignModalContext = React.createContext({} as MktCampaignModalType);
 
 export const MktCampaignModalContextProvider = ({ children }: MktCampaignModalContextProviderProps) => {
-  const [mktCampaignModal, setMktCampaignModal] = useState<MktCampaignModalInfo>({});
+  const [mktCampaignModal, setMktCampaignModal] = useState<MktCampaignModalInfo | undefined>(undefined);
   const { activeModal, inactiveModal } = useContext(ModalContext);
   const { isPopupVisible } = useSelector((state: RootState) => state.campaign);
   const storageEarningPosition = window.localStorage.getItem(EARNING_WARNING_ANNOUNCEMENT);
 
   // TODO: This is a hotfix solution; a better solution must be found.
   const openModal = useCallback((data: MktCampaignModalInfo) => {
-    if (mktCampaignModal.type === 'popup') {
+    if (mktCampaignModal?.type === 'popup') {
       if (isPopupVisible && (!storageEarningPosition || storageEarningPosition.includes('confirmed'))) {
         setMktCampaignModal(data);
         activeModal(APP_POPUP_MODAL);
@@ -51,32 +51,24 @@ export const MktCampaignModalContextProvider = ({ children }: MktCampaignModalCo
         activeModal(APP_POPUP_MODAL);
       }
     }
-  }, [activeModal, isPopupVisible, mktCampaignModal.type, storageEarningPosition]);
+  }, [activeModal, isPopupVisible, mktCampaignModal?.type, storageEarningPosition]);
 
   const hideModal = useCallback(() => {
     toggleCampaignPopup({ value: false }).then(() => {
       inactiveModal(APP_POPUP_MODAL);
-      setMktCampaignModal((prevState) => ({
-        ...prevState,
-        title: '',
-        message: '',
-        buttons: [],
-        externalButtons: <></>
-      }));
+      setMktCampaignModal(undefined);
     }).catch((e) => console.error(e));
   }, [inactiveModal]);
 
+  const mktCampaignContextValue = useMemo(() => ({ openModal, hideModal }), [hideModal, openModal]);
+
   return (
-    <MktCampaignModalContext.Provider value={{ openModal, hideModal }}>
+    <MktCampaignModalContext.Provider value={mktCampaignContextValue}>
       {children}
-      <AppPopupModal
-        buttons={mktCampaignModal.buttons || []}
-        externalButtons={mktCampaignModal.externalButtons}
-        message={mktCampaignModal.message || ''}
+      {mktCampaignModal && (<AppPopupModal
         onCloseModal={hideModal}
-        onPressButton={mktCampaignModal.onPressBtn}
-        title={mktCampaignModal.title || ''}
-      />
+        {...mktCampaignModal}
+      />)}
     </MktCampaignModalContext.Provider>
   );
 };
diff --git a/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx b/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx
index ee60ee38d6..688bd40ede 100644
--- a/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx
+++ b/packages/extension-koni-ui/src/hooks/campaign/useGetConfirmationByScreen.tsx
@@ -14,7 +14,7 @@ const useGetConfirmationByScreen = (screen: string) => {
 
   const getCurrentConfirmation = useCallback(
     (compareVals: string[]) => {
-      return confirmations.filter((item) => {
+      return confirmations.find((item) => {
         return checkPositionParam(screen, item.position_params, compareVals);
       });
     },

From 1d2dddda1960dc84607fcfa20c3cc401a697ebb6 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Tue, 24 Sep 2024 09:28:09 +0700
Subject: [PATCH 06/14] [Issue-3461] Optimize code

---
 .../src/contexts/MktCampaignModalContext.tsx                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
index 44d6275925..1f41c35cb0 100644
--- a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
+++ b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
@@ -54,10 +54,10 @@ export const MktCampaignModalContextProvider = ({ children }: MktCampaignModalCo
   }, [activeModal, isPopupVisible, mktCampaignModal?.type, storageEarningPosition]);
 
   const hideModal = useCallback(() => {
-    toggleCampaignPopup({ value: false }).then(() => {
+    toggleCampaignPopup({ value: false }).finally(() => {
       inactiveModal(APP_POPUP_MODAL);
       setMktCampaignModal(undefined);
-    }).catch((e) => console.error(e));
+    });
   }, [inactiveModal]);
 
   const mktCampaignContextValue = useMemo(() => ({ openModal, hideModal }), [hideModal, openModal]);

From 26f9a90f00058e3d8c0cecb574aec8f1233d74c2 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Tue, 24 Sep 2024 09:36:41 +0700
Subject: [PATCH 07/14] [Issue-3461] Optimize code

---
 .../extension-koni-ui/src/contexts/MktCampaignModalContext.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
index 1f41c35cb0..e1c5574553 100644
--- a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
+++ b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
@@ -54,7 +54,7 @@ export const MktCampaignModalContextProvider = ({ children }: MktCampaignModalCo
   }, [activeModal, isPopupVisible, mktCampaignModal?.type, storageEarningPosition]);
 
   const hideModal = useCallback(() => {
-    toggleCampaignPopup({ value: false }).finally(() => {
+    toggleCampaignPopup({ value: false }).catch((e) => console.error(e)).finally(() => {
       inactiveModal(APP_POPUP_MODAL);
       setMktCampaignModal(undefined);
     });

From e9d36387f7f4caae3c669395ab694860b3e10bb1 Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Tue, 24 Sep 2024 09:50:56 +0700
Subject: [PATCH 08/14] [Issue-3461] Implement appVersionRange for Mkt campaign

---
 .../src/services/mkt-campaign-service/types.ts |  4 ++++
 packages/extension-koni-ui/package.json        |  1 +
 .../static-content/useHandleAppBannerMap.ts    | 18 +++++++++++++++---
 .../static-content/useHandleAppPopupMap.ts     | 18 +++++++++++++++---
 yarn.lock                                      |  8 ++++++++
 5 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/extension-base/src/services/mkt-campaign-service/types.ts b/packages/extension-base/src/services/mkt-campaign-service/types.ts
index 55b5968be8..1865edee8d 100644
--- a/packages/extension-base/src/services/mkt-campaign-service/types.ts
+++ b/packages/extension-base/src/services/mkt-campaign-service/types.ts
@@ -94,6 +94,8 @@ export interface AppPopupData extends AppCommonData {
   media: string;
   buttons: AppContentButton[];
   repeat_every_x_days: number | null;
+  ios_version_range: string;
+  app_version_range: string;
 }
 
 export interface AppBannerData extends AppCommonData {
@@ -101,6 +103,8 @@ export interface AppBannerData extends AppCommonData {
   media: string;
   action: AppContentButtonAction;
   instruction: AppContentButtonInstruction | null;
+  ios_version_range: string;
+  app_version_range: string;
 }
 
 export interface AppConfirmationData extends AppCommonData {
diff --git a/packages/extension-koni-ui/package.json b/packages/extension-koni-ui/package.json
index 8fb9953fee..2042dbc643 100644
--- a/packages/extension-koni-ui/package.json
+++ b/packages/extension-koni-ui/package.json
@@ -47,6 +47,7 @@
     "boring-avatars": "^1.7.0",
     "bowser": "^2.11.0",
     "classnames": "^2.3.2",
+    "compare-versions": "^6.1.1",
     "copy-to-clipboard": "^3.3.3",
     "cross-fetch": "^4.0.0",
     "file-saver": "^2.0.5",
diff --git a/packages/extension-koni-ui/src/hooks/static-content/useHandleAppBannerMap.ts b/packages/extension-koni-ui/src/hooks/static-content/useHandleAppBannerMap.ts
index 5140bf9a4b..0ccb7ea03e 100644
--- a/packages/extension-koni-ui/src/hooks/static-content/useHandleAppBannerMap.ts
+++ b/packages/extension-koni-ui/src/hooks/static-content/useHandleAppBannerMap.ts
@@ -2,9 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { AppBannerData } from '@subwallet/extension-base/services/mkt-campaign-service/types';
+import { EXTENSION_VERSION } from '@subwallet/extension-koni-ui/constants';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { updateBannerHistoryData } from '@subwallet/extension-koni-ui/stores/base/StaticContent';
 import { MktCampaignHistoryData } from '@subwallet/extension-koni-ui/types/staticContent';
+import { satisfies } from 'compare-versions';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -58,10 +60,20 @@ export const useHandleAppBannerMap = (): AppBannerHookType => {
     [bannerHistoryMap, dispatch]
   );
 
+  const filteredData = useMemo(() => {
+    return appBannerData.filter(({ app_version_range: appVersionRange, info }) => {
+      if (appVersionRange) {
+        return info?.platforms.includes('extension') && satisfies(EXTENSION_VERSION, appVersionRange);
+      } else {
+        return info?.platforms.includes('extension');
+      }
+    });
+  }, [appBannerData]);
+
   const appBannerMap = useMemo(() => {
-    if (appBannerData) {
+    if (filteredData) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const result: Record<string, AppBannerData[]> = appBannerData.reduce((r, a) => {
+      const result: Record<string, AppBannerData[]> = filteredData.reduce((r, a) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
         r[a.position] = r[a.position] || [];
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
@@ -75,7 +87,7 @@ export const useHandleAppBannerMap = (): AppBannerHookType => {
     } else {
       return {};
     }
-  }, [appBannerData]);
+  }, [filteredData]);
 
   return {
     updateBannerHistoryMap,
diff --git a/packages/extension-koni-ui/src/hooks/static-content/useHandleAppPopupMap.ts b/packages/extension-koni-ui/src/hooks/static-content/useHandleAppPopupMap.ts
index 9c738baf29..1b67a2e967 100644
--- a/packages/extension-koni-ui/src/hooks/static-content/useHandleAppPopupMap.ts
+++ b/packages/extension-koni-ui/src/hooks/static-content/useHandleAppPopupMap.ts
@@ -2,9 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { AppPopupData } from '@subwallet/extension-base/services/mkt-campaign-service/types';
+import { EXTENSION_VERSION } from '@subwallet/extension-koni-ui/constants';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { updatePopupHistoryData } from '@subwallet/extension-koni-ui/stores/base/StaticContent';
 import { MktCampaignHistoryData } from '@subwallet/extension-koni-ui/types/staticContent';
+import { satisfies } from 'compare-versions';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -52,10 +54,20 @@ export const useHandleAppPopupMap = (): AppPopupHookType => {
     [dispatch, popupHistoryMap]
   );
 
+  const filteredData = useMemo(() => {
+    return appPopupData.filter(({ app_version_range: appVersionRange, info }) => {
+      if (appVersionRange) {
+        return info?.platforms.includes('extension') && satisfies(EXTENSION_VERSION, appVersionRange);
+      } else {
+        return info?.platforms.includes('extension');
+      }
+    });
+  }, [appPopupData]);
+
   const appPopupMap = useMemo(() => {
-    if (appPopupData) {
+    if (filteredData) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const result: Record<string, AppPopupData[]> = appPopupData.reduce((r, a) => {
+      const result: Record<string, AppPopupData[]> = filteredData.reduce((r, a) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
         r[a.position] = r[a.position] || [];
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
@@ -69,7 +81,7 @@ export const useHandleAppPopupMap = (): AppPopupHookType => {
     } else {
       return {};
     }
-  }, [appPopupData]);
+  }, [filteredData]);
 
   return {
     updatePopupHistoryMap,
diff --git a/yarn.lock b/yarn.lock
index b63afc8321..898690e730 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6479,6 +6479,7 @@ __metadata:
     boring-avatars: ^1.7.0
     bowser: ^2.11.0
     classnames: ^2.3.2
+    compare-versions: ^6.1.1
     copy-to-clipboard: ^3.3.3
     cross-fetch: ^4.0.0
     enzyme: ^3.11.0
@@ -11915,6 +11916,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compare-versions@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "compare-versions@npm:6.1.1"
+  checksum: 73fe6c4f52d22efe28f0a3be10df2afd704e10b3593360cd963e86b33a7a263c263b41a1361b69c30a0fe68bfa70fef90860c1cf2ef41502629d4402890fcd57
+  languageName: node
+  linkType: hard
+
 "compressible@npm:~2.0.16":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"

From b61b808b30155669deaead46c9ef6622805e74ac Mon Sep 17 00:00:00 2001
From: dominhquang <quangdm@subwallet.app>
Date: Fri, 27 Sep 2024 18:17:05 +0700
Subject: [PATCH 09/14] [Issue-3461] Fix some UI bug for Mkt campaign

---
 .../src/Popup/Home/Tokens/DetailList.tsx          | 15 +++++++--------
 .../components/Modal/Campaign/AppPopupModal.tsx   |  8 ++++----
 .../src/contexts/AppOnlineContentProvider.tsx     |  6 +++++-
 .../src/contexts/MktCampaignModalContext.tsx      |  2 +-
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Tokens/DetailList.tsx b/packages/extension-koni-ui/src/Popup/Home/Tokens/DetailList.tsx
index eb84633f7b..f99bf6da8f 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Tokens/DetailList.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Tokens/DetailList.tsx
@@ -423,6 +423,13 @@ function Component (): React.ReactElement {
       <div
         className={'__scroll-container'}
       >
+        <div className={'token-detail-banner-wrapper'}>
+          {!!banners.length && (<BannerGenerator
+            banners={banners}
+            dismissBanner={dismissBanner}
+            onClickBanner={onClickBanner}
+          />)}
+        </div>
         {
           tokenBalanceItems.map((item) => (
             <TokenBalanceDetailItem
@@ -432,14 +439,6 @@ function Component (): React.ReactElement {
             />
           ))
         }
-
-        <div className={'token-detail-banner-wrapper'}>
-          {!!banners.length && (<BannerGenerator
-            banners={banners}
-            dismissBanner={dismissBanner}
-            onClickBanner={onClickBanner}
-          />)}
-        </div>
       </div>
 
       <DetailModal
diff --git a/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx b/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
index b86eacccd7..20c4d28798 100644
--- a/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
+++ b/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
@@ -21,7 +21,7 @@ interface Props extends ThemeProps {
   title?: string;
   buttons?: AppContentButton[];
   externalButtons?: React.ReactNode;
-  onPressButton?: (url?: string) => void;
+  onClickBtn?: (url?: string) => void;
   onCloseModal?: () => void;
 }
 
@@ -39,7 +39,7 @@ const modalId = APP_POPUP_MODAL;
 const instructionModalId = APP_INSTRUCTION_MODAL;
 
 const Component: React.FC<Props> = (props: Props) => {
-  const { buttons, className, externalButtons, message, onCloseModal, onPressButton, title } = props;
+  const { buttons, className, externalButtons, message, onClickBtn, onCloseModal, title } = props;
   const [appInstructionData] = useLocalStorage(APP_INSTRUCTION_DATA, '[]');
   const instructionDataList: StaticDataProps[] = useMemo(() => {
     try {
@@ -77,10 +77,10 @@ const Component: React.FC<Props> = (props: Props) => {
   const onAccept = useCallback(
     (url?: string) => {
       inactiveModal(instructionModalId);
-      onPressButton && onPressButton(url);
+      onClickBtn && onClickBtn(url);
       onCloseModal && onCloseModal();
     },
-    [onCloseModal, onPressButton, inactiveModal]
+    [onCloseModal, onClickBtn, inactiveModal]
   );
 
   const _onClickButton = useCallback(
diff --git a/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx b/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
index 9ede23a6c0..d85ba95148 100644
--- a/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
+++ b/packages/extension-koni-ui/src/contexts/AppOnlineContentProvider.tsx
@@ -221,6 +221,10 @@ export const AppOnlineContentContextProvider = ({ children }: AppOnlineContentCo
                 symbol: urlQueryMap.symbol
               } as EarningPoolsParam });
             }
+
+            if (parseUrl.pathname.startsWith('/main/tokens/tokens/token-groups-detail')) {
+              navigate(`home/tokens/detail/${urlQueryMap.slug}`);
+            }
           } else {
             openInNewTab(url)();
           }
@@ -258,7 +262,7 @@ export const AppOnlineContentContextProvider = ({ children }: AppOnlineContentCo
             title: item.info?.name,
             message: item.content || '',
             buttons: item.buttons,
-            onPressBtn: (url?: string) => {
+            onClickBtn: (url?: string) => {
               handleButtonClick(`${item.position}-${item.id}`)('popup', url);
             }
           }));
diff --git a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
index e1c5574553..c16839ad5e 100644
--- a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
+++ b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
@@ -21,7 +21,7 @@ export type MktCampaignModalInfo = {
   buttons?: AppContentButton[];
   externalButtons?: React.ReactElement;
   type?: 'popup' | 'banner' | 'confirmation';
-  onPressBtn?: (url?: string) => void;
+  onClickBtn?: (url?: string) => void;
   repeat?: PopupFrequency;
 };
 

From 226ddf5fd614f72bdc21bf3a9a6d419ecce9e419 Mon Sep 17 00:00:00 2001
From: S2kael <laiducminh1002@gmail.com>
Date: Mon, 30 Sep 2024 12:02:38 +0700
Subject: [PATCH 10/14] [Issue-3711] Hotfix handle api status

---
 .../src/services/chain-service/handler/SubstrateApi.ts           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/extension-base/src/services/chain-service/handler/SubstrateApi.ts b/packages/extension-base/src/services/chain-service/handler/SubstrateApi.ts
index aaa1542222..fb56fead7f 100644
--- a/packages/extension-base/src/services/chain-service/handler/SubstrateApi.ts
+++ b/packages/extension-base/src/services/chain-service/handler/SubstrateApi.ts
@@ -251,6 +251,7 @@ export class SubstrateApi implements _SubstrateApi {
 
     if (this.isApiReadyOnce) {
       this.handleApiReady.resolve(this);
+      this.isApiReady = true;
     }
   }
 

From 597cf2db2e8705d38d9e8de40f8679b3bda602bc Mon Sep 17 00:00:00 2001
From: S2kael <laiducminh1002@gmail.com>
Date: Mon, 30 Sep 2024 18:03:06 +0700
Subject: [PATCH 11/14] [Issue-3711] Rollback handle pending state for balance
 item

---
 .../balance-service/helpers/subscribe/index.ts         | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/extension-base/src/services/balance-service/helpers/subscribe/index.ts b/packages/extension-base/src/services/balance-service/helpers/subscribe/index.ts
index a11099325d..a5208545e9 100644
--- a/packages/extension-base/src/services/balance-service/helpers/subscribe/index.ts
+++ b/packages/extension-base/src/services/balance-service/helpers/subscribe/index.ts
@@ -159,16 +159,6 @@ export function subscribeBalance (
 
     const substrateApi = await substrateApiMap[chainSlug].isReady;
 
-    if (!substrateApi.isApiReady) {
-      handleUnsupportedOrPendingAddresses(
-        useAddresses,
-        chainSlug,
-        chainAssetMap,
-        APIItemState.PENDING,
-        callback
-      );
-    }
-
     return subscribeSubstrateBalance(useAddresses, chainInfo, chainAssetMap, substrateApi, evmApi, callback, extrinsicType);
   });
 

From 4b40359c8f3c1529c5bbcd155e1e46d4283e23b5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <action@github.com>
Date: Tue, 1 Oct 2024 12:07:28 +0000
Subject: [PATCH 12/14] [CI Skip] release/beta 1.2.32-0

skip-checks: true
---
 CONTRIBUTORS                                  |  6 +-
 package.json                                  |  2 +-
 packages/extension-base/package.json          | 12 ++--
 packages/extension-base/src/packageInfo.ts    |  2 +-
 packages/extension-chains/package.json        |  4 +-
 packages/extension-chains/src/packageInfo.ts  |  2 +-
 .../extension-compat-metamask/package.json    |  4 +-
 .../src/packageInfo.ts                        |  2 +-
 packages/extension-dapp/package.json          |  4 +-
 packages/extension-dapp/src/packageInfo.ts    |  2 +-
 packages/extension-inject/package.json        |  2 +-
 packages/extension-inject/src/packageInfo.ts  |  2 +-
 packages/extension-koni-ui/package.json       | 12 ++--
 packages/extension-koni/package.json          |  8 +--
 packages/extension-koni/src/packageInfo.ts    |  2 +-
 packages/extension-mocks/package.json         |  2 +-
 packages/extension-web-ui/package.json        | 12 ++--
 packages/web-runner/package.json              |  8 +--
 packages/webapp/package.json                  |  8 +--
 yarn.lock                                     | 68 +++++++++----------
 20 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index b8512d3343..f0508c9e63 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -1,6 +1,6 @@
-    2838	AnhMTV                        	Release version 1.2.31
+    2841	AnhMTV                        	
     2541	Nam Phạm                      	[Issue 3680] chore: update chainlist
-    2190	S2kael                        	[Issue-3680] Update stable version for chain-list
+    2192	S2kael                        	[Issue-3711] Rollback handle pending state for balance item
      848	lw-cdm                        	[Issue-3407] WebApp - Support Avail Ledger app
      565	nguyentiendung                	[Issue-2845] Fix UI bugs export accounts
      465	Jaco                          	0.42.5 (#969)
@@ -8,7 +8,7 @@
      241	Thiendekaco                   	
      185	quangdo                       	
      160	Automation Bot                	[CI Skip] Auto increase webapp build number
-     146	dominhquang                   	[Issue-3468] Improve condition for Marketing campaign
+     157	dominhquang                   	
      118	lw-cdm                        	
      104	khainh                        	predefine metadata for Polkadot & Kusama chains
       83	Hieu Dao                      	Update README.md
diff --git a/package.json b/package.json
index 6b84a3a3b7..827333a45c 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "url": "https://github.com/Koniverse/Subwallet-V2.git"
   },
   "sideEffects": false,
-  "version": "1.2.31",
+  "version": "1.2.32-0",
   "workspaces": [
     "packages/*"
   ],
diff --git a/packages/extension-base/package.json b/packages/extension-base/package.json
index 5b1c2fa62f..81a654934e 100644
--- a/packages/extension-base/package.json
+++ b/packages/extension-base/package.json
@@ -17,7 +17,7 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "main": "index.js",
   "dependencies": {
     "@acala-network/api": "^5.0.2",
@@ -56,10 +56,10 @@
     "@sora-substrate/type-definitions": "^1.17.7",
     "@substrate/connect": "^0.8.9",
     "@subwallet/chain-list": "0.2.88",
-    "@subwallet/extension-base": "^1.2.31-0",
-    "@subwallet/extension-chains": "^1.2.31-0",
-    "@subwallet/extension-dapp": "^1.2.31-0",
-    "@subwallet/extension-inject": "^1.2.31-0",
+    "@subwallet/extension-base": "^1.2.32-0",
+    "@subwallet/extension-chains": "^1.2.32-0",
+    "@subwallet/extension-dapp": "^1.2.32-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
     "@subwallet/keyring": "^0.1.7",
     "@subwallet/ui-keyring": "^0.1.7",
     "@walletconnect/keyvaluestorage": "^1.1.1",
@@ -100,7 +100,7 @@
     "web3-utils": "^1.10.0"
   },
   "devDependencies": {
-    "@subwallet/extension-mocks": "^1.2.31-0",
+    "@subwallet/extension-mocks": "^1.2.32-0",
     "@types/uuid": "^9.0.1"
   }
 }
diff --git a/packages/extension-base/src/packageInfo.ts b/packages/extension-base/src/packageInfo.ts
index 3939cbbec0..b7508cf5f7 100644
--- a/packages/extension-base/src/packageInfo.ts
+++ b/packages/extension-base/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@subwallet/extension-base', path: 'auto', type: 'auto', version: '1.2.31-0' };
+export const packageInfo = { name: '@subwallet/extension-base', path: 'auto', type: 'auto', version: '1.2.32-0' };
diff --git a/packages/extension-chains/package.json b/packages/extension-chains/package.json
index 02a642ec68..4764a78b07 100644
--- a/packages/extension-chains/package.json
+++ b/packages/extension-chains/package.json
@@ -17,14 +17,14 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "main": "index.js",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
     "@polkadot/networks": "^12.6.2",
     "@polkadot/util": "^12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
-    "@subwallet/extension-inject": "^1.2.31-0"
+    "@subwallet/extension-inject": "^1.2.32-0"
   },
   "peerDependencies": {
     "@polkadot/api": "*",
diff --git a/packages/extension-chains/src/packageInfo.ts b/packages/extension-chains/src/packageInfo.ts
index dd58698dbf..bb6145e54c 100644
--- a/packages/extension-chains/src/packageInfo.ts
+++ b/packages/extension-chains/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@subwallet/extension-chains', path: 'auto', type: 'auto', version: '1.2.31-0' };
+export const packageInfo = { name: '@subwallet/extension-chains', path: 'auto', type: 'auto', version: '1.2.32-0' };
diff --git a/packages/extension-compat-metamask/package.json b/packages/extension-compat-metamask/package.json
index 2dbf4157f5..f23bfbed5b 100644
--- a/packages/extension-compat-metamask/package.json
+++ b/packages/extension-compat-metamask/package.json
@@ -17,14 +17,14 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "main": "index.js",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
     "@metamask/detect-provider": "^1.2.0",
     "@polkadot/types": "^11.0.3",
     "@polkadot/util": "^12.6.2",
-    "@subwallet/extension-inject": "^1.2.31-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
     "web3": "^1.10.0"
   },
   "peerDependencies": {
diff --git a/packages/extension-compat-metamask/src/packageInfo.ts b/packages/extension-compat-metamask/src/packageInfo.ts
index 00568c9666..3f50ade149 100644
--- a/packages/extension-compat-metamask/src/packageInfo.ts
+++ b/packages/extension-compat-metamask/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@subwallet/extension-compat-metamask', path: 'auto', type: 'auto', version: '1.2.31-0' };
+export const packageInfo = { name: '@subwallet/extension-compat-metamask', path: 'auto', type: 'auto', version: '1.2.32-0' };
diff --git a/packages/extension-dapp/package.json b/packages/extension-dapp/package.json
index 28a480742d..fd11f926fd 100644
--- a/packages/extension-dapp/package.json
+++ b/packages/extension-dapp/package.json
@@ -17,13 +17,13 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "main": "index.js",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
     "@polkadot/util": "^12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
-    "@subwallet/extension-inject": "^1.2.31-0"
+    "@subwallet/extension-inject": "^1.2.32-0"
   },
   "peerDependencies": {
     "@polkadot/api": "*",
diff --git a/packages/extension-dapp/src/packageInfo.ts b/packages/extension-dapp/src/packageInfo.ts
index d457271a60..841146ebe4 100644
--- a/packages/extension-dapp/src/packageInfo.ts
+++ b/packages/extension-dapp/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@subwallet/extension-dapp', path: 'auto', type: 'auto', version: '1.2.31-0' };
+export const packageInfo = { name: '@subwallet/extension-dapp', path: 'auto', type: 'auto', version: '1.2.32-0' };
diff --git a/packages/extension-inject/package.json b/packages/extension-inject/package.json
index 6c1ae1226b..18a5b492bf 100644
--- a/packages/extension-inject/package.json
+++ b/packages/extension-inject/package.json
@@ -14,7 +14,7 @@
   },
   "sideEffects": true,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "main": "index.js",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
diff --git a/packages/extension-inject/src/packageInfo.ts b/packages/extension-inject/src/packageInfo.ts
index e98eeb5501..ba0768bf74 100644
--- a/packages/extension-inject/src/packageInfo.ts
+++ b/packages/extension-inject/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@subwallet/extension-inject', path: 'auto', type: 'auto', version: '1.2.31-0' };
+export const packageInfo = { name: '@subwallet/extension-inject', path: 'auto', type: 'auto', version: '1.2.32-0' };
diff --git a/packages/extension-koni-ui/package.json b/packages/extension-koni-ui/package.json
index c5e008ee79..6172f2b261 100644
--- a/packages/extension-koni-ui/package.json
+++ b/packages/extension-koni-ui/package.json
@@ -14,7 +14,7 @@
   },
   "sideEffects": true,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
     "@coinbase/cbpay-js": "^1.7.0",
@@ -35,10 +35,10 @@
     "@ramonak/react-progress-bar": "^5.0.3",
     "@reduxjs/toolkit": "^1.9.1",
     "@subwallet/chain-list": "0.2.88",
-    "@subwallet/extension-base": "^1.2.31-0",
-    "@subwallet/extension-chains": "^1.2.31-0",
-    "@subwallet/extension-dapp": "^1.2.31-0",
-    "@subwallet/extension-inject": "^1.2.31-0",
+    "@subwallet/extension-base": "^1.2.32-0",
+    "@subwallet/extension-chains": "^1.2.32-0",
+    "@subwallet/extension-dapp": "^1.2.32-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
     "@subwallet/keyring": "^0.1.7",
     "@subwallet/react-ui": "5.1.2-b77",
     "@subwallet/ui-keyring": "^0.1.7",
@@ -87,7 +87,7 @@
     "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
-    "@subwallet/extension-mocks": "^1.2.31-0",
+    "@subwallet/extension-mocks": "^1.2.32-0",
     "@types/bn.js": "^5.1.1",
     "@types/enzyme": "^3.10.12",
     "@types/enzyme-adapter-react-16": "^1.0.6",
diff --git a/packages/extension-koni/package.json b/packages/extension-koni/package.json
index 277e40d986..56653a68c1 100644
--- a/packages/extension-koni/package.json
+++ b/packages/extension-koni/package.json
@@ -14,12 +14,12 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
-    "@subwallet/extension-base": "^1.2.31-0",
-    "@subwallet/extension-inject": "^1.2.31-0",
-    "@subwallet/extension-koni-ui": "^1.2.31-0"
+    "@subwallet/extension-base": "^1.2.32-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
+    "@subwallet/extension-koni-ui": "^1.2.32-0"
   },
   "devDependencies": {
     "@polkadot/dev": "^0.65.23",
diff --git a/packages/extension-koni/src/packageInfo.ts b/packages/extension-koni/src/packageInfo.ts
index a987923137..0084860fe5 100644
--- a/packages/extension-koni/src/packageInfo.ts
+++ b/packages/extension-koni/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@subwallet/extension-koni', path: 'auto', type: 'auto', version: '1.2.31-0' };
+export const packageInfo = { name: '@subwallet/extension-koni', path: 'auto', type: 'auto', version: '1.2.32-0' };
diff --git a/packages/extension-mocks/package.json b/packages/extension-mocks/package.json
index f83ee624e5..7379ddbc1e 100644
--- a/packages/extension-mocks/package.json
+++ b/packages/extension-mocks/package.json
@@ -14,7 +14,7 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "main": "index.js",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
diff --git a/packages/extension-web-ui/package.json b/packages/extension-web-ui/package.json
index 8ac2ba4634..953f0e78f1 100644
--- a/packages/extension-web-ui/package.json
+++ b/packages/extension-web-ui/package.json
@@ -14,7 +14,7 @@
   },
   "sideEffects": true,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
     "@coinbase/cbpay-js": "^1.7.0",
@@ -36,10 +36,10 @@
     "@ramonak/react-progress-bar": "^5.0.3",
     "@reduxjs/toolkit": "^1.9.1",
     "@subwallet/chain-list": "0.2.88",
-    "@subwallet/extension-base": "^1.2.31-0",
-    "@subwallet/extension-chains": "^1.2.31-0",
-    "@subwallet/extension-dapp": "^1.2.31-0",
-    "@subwallet/extension-inject": "^1.2.31-0",
+    "@subwallet/extension-base": "^1.2.32-0",
+    "@subwallet/extension-chains": "^1.2.32-0",
+    "@subwallet/extension-dapp": "^1.2.32-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
     "@subwallet/keyring": "^0.1.7",
     "@subwallet/react-ui": "^5.1.2-b77",
     "@subwallet/ui-keyring": "^0.1.7",
@@ -88,7 +88,7 @@
     "usehooks-ts": "^2.9.1"
   },
   "devDependencies": {
-    "@subwallet/extension-mocks": "^1.2.31-0",
+    "@subwallet/extension-mocks": "^1.2.32-0",
     "@types/bn.js": "^5.1.1",
     "@types/enzyme": "^3.10.12",
     "@types/enzyme-adapter-react-16": "^1.0.6",
diff --git a/packages/web-runner/package.json b/packages/web-runner/package.json
index 8763506ff8..bff26bbadc 100644
--- a/packages/web-runner/package.json
+++ b/packages/web-runner/package.json
@@ -14,12 +14,12 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
-    "@subwallet/extension-base": "^1.2.31-0",
-    "@subwallet/extension-inject": "^1.2.31-0",
-    "@subwallet/extension-koni-ui": "^1.2.31-0"
+    "@subwallet/extension-base": "^1.2.32-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
+    "@subwallet/extension-koni-ui": "^1.2.32-0"
   },
   "devDependencies": {
     "@polkadot/dev": "^0.65.23",
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 02e3332418..c786547ca1 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -15,12 +15,12 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "1.2.31-0",
+  "version": "1.2.32-0",
   "dependencies": {
     "@babel/runtime": "^7.20.6",
-    "@subwallet/extension-base": "^1.2.31-0",
-    "@subwallet/extension-inject": "^1.2.31-0",
-    "@subwallet/extension-web-ui": "^1.2.31-0"
+    "@subwallet/extension-base": "^1.2.32-0",
+    "@subwallet/extension-inject": "^1.2.32-0",
+    "@subwallet/extension-web-ui": "^1.2.32-0"
   },
   "devDependencies": {
     "@polkadot/dev": "^0.65.23",
diff --git a/yarn.lock b/yarn.lock
index bbfd1f9a6e..33856b80fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6279,7 +6279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@subwallet/extension-base@^1.2.31-0, @subwallet/extension-base@workspace:packages/extension-base":
+"@subwallet/extension-base@^1.2.32-0, @subwallet/extension-base@workspace:packages/extension-base":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-base@workspace:packages/extension-base"
   dependencies:
@@ -6319,11 +6319,11 @@ __metadata:
     "@sora-substrate/type-definitions": ^1.17.7
     "@substrate/connect": ^0.8.9
     "@subwallet/chain-list": 0.2.88
-    "@subwallet/extension-base": ^1.2.31-0
-    "@subwallet/extension-chains": ^1.2.31-0
-    "@subwallet/extension-dapp": ^1.2.31-0
-    "@subwallet/extension-inject": ^1.2.31-0
-    "@subwallet/extension-mocks": ^1.2.31-0
+    "@subwallet/extension-base": ^1.2.32-0
+    "@subwallet/extension-chains": ^1.2.32-0
+    "@subwallet/extension-dapp": ^1.2.32-0
+    "@subwallet/extension-inject": ^1.2.32-0
+    "@subwallet/extension-mocks": ^1.2.32-0
     "@subwallet/keyring": ^0.1.7
     "@subwallet/ui-keyring": ^0.1.7
     "@types/uuid": ^9.0.1
@@ -6366,7 +6366,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@subwallet/extension-chains@^1.2.31-0, @subwallet/extension-chains@workspace:packages/extension-chains":
+"@subwallet/extension-chains@^1.2.32-0, @subwallet/extension-chains@workspace:packages/extension-chains":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-chains@workspace:packages/extension-chains"
   dependencies:
@@ -6374,7 +6374,7 @@ __metadata:
     "@polkadot/networks": ^12.6.2
     "@polkadot/util": ^12.6.2
     "@polkadot/util-crypto": ^12.6.2
-    "@subwallet/extension-inject": ^1.2.31-0
+    "@subwallet/extension-inject": ^1.2.32-0
   peerDependencies:
     "@polkadot/api": "*"
     "@polkadot/types": "*"
@@ -6389,21 +6389,21 @@ __metadata:
     "@metamask/detect-provider": ^1.2.0
     "@polkadot/types": ^11.0.3
     "@polkadot/util": ^12.6.2
-    "@subwallet/extension-inject": ^1.2.31-0
+    "@subwallet/extension-inject": ^1.2.32-0
     web3: ^1.10.0
   peerDependencies:
     "@polkadot/util": "*"
   languageName: unknown
   linkType: soft
 
-"@subwallet/extension-dapp@^1.2.31-0, @subwallet/extension-dapp@workspace:packages/extension-dapp":
+"@subwallet/extension-dapp@^1.2.32-0, @subwallet/extension-dapp@workspace:packages/extension-dapp":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-dapp@workspace:packages/extension-dapp"
   dependencies:
     "@babel/runtime": ^7.20.6
     "@polkadot/util": ^12.6.2
     "@polkadot/util-crypto": ^12.6.2
-    "@subwallet/extension-inject": ^1.2.31-0
+    "@subwallet/extension-inject": ^1.2.32-0
   peerDependencies:
     "@polkadot/api": "*"
     "@polkadot/util": "*"
@@ -6411,7 +6411,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@subwallet/extension-inject@^1.2.31-0, @subwallet/extension-inject@workspace:packages/extension-inject":
+"@subwallet/extension-inject@^1.2.32-0, @subwallet/extension-inject@workspace:packages/extension-inject":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-inject@workspace:packages/extension-inject"
   dependencies:
@@ -6429,7 +6429,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@subwallet/extension-koni-ui@^1.2.31-0, @subwallet/extension-koni-ui@workspace:packages/extension-koni-ui":
+"@subwallet/extension-koni-ui@^1.2.32-0, @subwallet/extension-koni-ui@workspace:packages/extension-koni-ui":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-koni-ui@workspace:packages/extension-koni-ui"
   dependencies:
@@ -6452,11 +6452,11 @@ __metadata:
     "@ramonak/react-progress-bar": ^5.0.3
     "@reduxjs/toolkit": ^1.9.1
     "@subwallet/chain-list": 0.2.88
-    "@subwallet/extension-base": ^1.2.31-0
-    "@subwallet/extension-chains": ^1.2.31-0
-    "@subwallet/extension-dapp": ^1.2.31-0
-    "@subwallet/extension-inject": ^1.2.31-0
-    "@subwallet/extension-mocks": ^1.2.31-0
+    "@subwallet/extension-base": ^1.2.32-0
+    "@subwallet/extension-chains": ^1.2.32-0
+    "@subwallet/extension-dapp": ^1.2.32-0
+    "@subwallet/extension-inject": ^1.2.32-0
+    "@subwallet/extension-mocks": ^1.2.32-0
     "@subwallet/keyring": ^0.1.7
     "@subwallet/react-ui": 5.1.2-b77
     "@subwallet/ui-keyring": ^0.1.7
@@ -6529,9 +6529,9 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.20.6
     "@polkadot/dev": ^0.65.23
-    "@subwallet/extension-base": ^1.2.31-0
-    "@subwallet/extension-inject": ^1.2.31-0
-    "@subwallet/extension-koni-ui": ^1.2.31-0
+    "@subwallet/extension-base": ^1.2.32-0
+    "@subwallet/extension-inject": ^1.2.32-0
+    "@subwallet/extension-koni-ui": ^1.2.32-0
     "@types/chrome": ^0.0.254
     "@types/serviceworker": ^0.0.80
     assert: ^2.0.0
@@ -6559,7 +6559,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@subwallet/extension-mocks@^1.2.31-0, @subwallet/extension-mocks@workspace:packages/extension-mocks":
+"@subwallet/extension-mocks@^1.2.32-0, @subwallet/extension-mocks@workspace:packages/extension-mocks":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-mocks@workspace:packages/extension-mocks"
   dependencies:
@@ -6568,7 +6568,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@subwallet/extension-web-ui@^1.2.31-0, @subwallet/extension-web-ui@workspace:packages/extension-web-ui":
+"@subwallet/extension-web-ui@^1.2.32-0, @subwallet/extension-web-ui@workspace:packages/extension-web-ui":
   version: 0.0.0-use.local
   resolution: "@subwallet/extension-web-ui@workspace:packages/extension-web-ui"
   dependencies:
@@ -6592,11 +6592,11 @@ __metadata:
     "@ramonak/react-progress-bar": ^5.0.3
     "@reduxjs/toolkit": ^1.9.1
     "@subwallet/chain-list": 0.2.88
-    "@subwallet/extension-base": ^1.2.31-0
-    "@subwallet/extension-chains": ^1.2.31-0
-    "@subwallet/extension-dapp": ^1.2.31-0
-    "@subwallet/extension-inject": ^1.2.31-0
-    "@subwallet/extension-mocks": ^1.2.31-0
+    "@subwallet/extension-base": ^1.2.32-0
+    "@subwallet/extension-chains": ^1.2.32-0
+    "@subwallet/extension-dapp": ^1.2.32-0
+    "@subwallet/extension-inject": ^1.2.32-0
+    "@subwallet/extension-mocks": ^1.2.32-0
     "@subwallet/keyring": ^0.1.7
     "@subwallet/react-ui": ^5.1.2-b77
     "@subwallet/ui-keyring": ^0.1.7
@@ -6779,9 +6779,9 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.20.6
     "@polkadot/dev": ^0.65.23
-    "@subwallet/extension-base": ^1.2.31-0
-    "@subwallet/extension-inject": ^1.2.31-0
-    "@subwallet/extension-koni-ui": ^1.2.31-0
+    "@subwallet/extension-base": ^1.2.32-0
+    "@subwallet/extension-inject": ^1.2.32-0
+    "@subwallet/extension-koni-ui": ^1.2.32-0
     assert: ^2.0.0
     babel-loader: ^9.1.3
     browser-resolve: ^2.0.0
@@ -6812,9 +6812,9 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.20.6
     "@polkadot/dev": ^0.65.23
-    "@subwallet/extension-base": ^1.2.31-0
-    "@subwallet/extension-inject": ^1.2.31-0
-    "@subwallet/extension-web-ui": ^1.2.31-0
+    "@subwallet/extension-base": ^1.2.32-0
+    "@subwallet/extension-inject": ^1.2.32-0
+    "@subwallet/extension-web-ui": ^1.2.32-0
     assert: ^2.0.0
     babel-loader: ^9.1.3
     browser-resolve: ^2.0.0

From 9f793d21865d38d7fab40555ed87512a26b03161 Mon Sep 17 00:00:00 2001
From: AnhMTV <maithachvietanh@gmail.com>
Date: Tue, 1 Oct 2024 19:32:00 +0700
Subject: [PATCH 13/14] Release version 1.2.32

---
 CHANGELOG.md | 9 +++++++++
 package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 125cef5346..680f0d091b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 1.2.32
+Build date: Oct 01, 2024.
+
+Features & Update:
+- Improve marketing campaign (#3461, #2807)
+
+Bugs fixed:
+- Hot fix handle API status (#3711)
+
 ## 1.2.31
 Build date: Sep 28, 2024.
 
diff --git a/package.json b/package.json
index 827333a45c..fc61522823 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "url": "https://github.com/Koniverse/Subwallet-V2.git"
   },
   "sideEffects": false,
-  "version": "1.2.32-0",
+  "version": "1.2.32",
   "workspaces": [
     "packages/*"
   ],

From 2c00906ebd18101b70c2c8ae237bd9366cc2a118 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <action@github.com>
Date: Tue, 1 Oct 2024 12:43:45 +0000
Subject: [PATCH 14/14] [CI Skip] release/stable 1.2.32

skip-checks: true
---
 .123trigger  | 3 ++-
 CONTRIBUTORS | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.123trigger b/.123trigger
index f2552b17c4..691895ca17 100644
--- a/.123trigger
+++ b/.123trigger
@@ -165,4 +165,5 @@
 1.2.28
 1.2.29
 1.2.30
-1.2.31
\ No newline at end of file
+1.2.31
+1.2.32
\ No newline at end of file
diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index f0508c9e63..c18639fab7 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -1,4 +1,4 @@
-    2841	AnhMTV                        	
+    2842	AnhMTV                        	Release version 1.2.32
     2541	Nam Phạm                      	[Issue 3680] chore: update chainlist
     2192	S2kael                        	[Issue-3711] Rollback handle pending state for balance item
      848	lw-cdm                        	[Issue-3407] WebApp - Support Avail Ledger app