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/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/CONTRIBUTORS b/CONTRIBUTORS
index b8512d3343..c18639fab7 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -1,6 +1,6 @@
-    2838	AnhMTV                        	Release version 1.2.31
+    2842	AnhMTV                        	Release version 1.2.32
     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..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.31",
+  "version": "1.2.32",
   "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-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);
   });
 
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;
     }
   }
 
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-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 35e604a78a..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",
@@ -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",
@@ -79,13 +80,14 @@
     "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",
     "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-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningEntry/EarningOptions/index.tsx
index b12f3997f1..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
@@ -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,15 @@ function Component ({ className, hasEarningPositions, setEntryView }: Props) {
         subHeaderPaddingVertical={true}
         title={t<string>('Earning options')}
       >
+        {!!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'}
@@ -403,6 +413,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..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
@@ -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,15 @@ function Component ({ className, earningPositions, setEntryView, setLoading }: P
         subHeaderPaddingVertical={true}
         title={t<string>('Your earning positions')}
       >
+        {!!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'}
@@ -434,6 +445,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..ee21e629c5 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,31 @@ 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')}
-        />
+        <>
+          {!!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}
+            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 +220,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/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/Popup/Home/Tokens/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Tokens/index.tsx
index 999dada6b5..1999155ad9 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,7 +261,15 @@ const Component = (): React.ReactElement => {
             />
           )
         }
-
+        {!!banners.length && (
+          <div className={'token-banner-wrapper'}>
+            <BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />
+          </div>
+        )}
         {
           tokenGroupBalanceItems.map((item) => {
             return (
@@ -402,6 +411,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/MissionDetailModal.tsx b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
index 18821bea89..13c7cda82a 100644
--- a/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
+++ b/packages/extension-koni-ui/src/Popup/Settings/MissionPool/MissionDetailModal.tsx
@@ -4,7 +4,9 @@
 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';
@@ -26,7 +28,9 @@ const modalId = PoolDetailModalId;
 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');
@@ -38,20 +42,37 @@ function Component ({ className = '', data }: Props): React.ReactElement<Props>
     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) => {
-    e.stopPropagation();
-    data?.url && openInNewTab(data.url)();
-  }, [data?.url]);
+  const onClickJoinNow: ButtonProps['onClick'] = useCallback(() => {
+    if (currentConfirmation) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          mktCampaignModalContext.hideModal();
+          data?.url && openInNewTab(data.url)();
+        })
+      });
+    } else {
+      data?.url && openInNewTab(data.url)();
+    }
+  }, [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 eb13aa5b46..fba216d8f4 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 { 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 { banners, dismissBanner, onClickBanner } = useGetBannerByScreen('missionPools');
   const computedMission = useMemo(() => {
     return missions.map((item) => {
       return {
@@ -191,6 +192,16 @@ const Component: React.FC<Props> = ({ className }: Props) => {
       title={t<string>('Mission Pools')}
     >
       <div className={'__tool-area'}>
+        {!!banners.length && (
+          <div className={'mission-pool-banner-wrapper'}>
+            <BannerGenerator
+              banners={banners}
+              dismissBanner={dismissBanner}
+              onClickBanner={onClickBanner}
+            />
+          </div>
+        )}
+
         <Search
           actionBtnIcon={(
             <Icon
@@ -237,9 +248,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
         options={filterOptions}
         title={t('Filter')}
       />
-      <MissionDetailModal
-        data={currentSelectItem}
-      />
+      <MissionDetailModal data={currentSelectItem} />
     </Layout.Base>
   );
 };
@@ -273,12 +282,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': {
@@ -289,8 +298,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/Popup/Transaction/variants/Earn.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx
index 0a302b4731..519fd5ff9b 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 currentConfirmation = 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 (currentConfirmation) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmation, 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..a88fbb79b0 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 currentConfirmation = 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 (currentConfirmation) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmation, 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..4a0dcdd2b0 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 currentConfirmation = 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 (currentConfirmation) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmation, 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..f509bc75df 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 currentConfirmation = 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 (currentConfirmation) {
+      mktCampaignModalContext.openModal({
+        type: 'confirmation',
+        title: currentConfirmation.name,
+        message: currentConfirmation.content,
+        externalButtons: renderConfirmationButtons(mktCampaignModalContext.hideModal, () => {
+          onSubmit(values);
+          mktCampaignModalContext.hideModal();
+        })
+      });
+    } else {
+      onSubmit(values);
+    }
+  }, [currentConfirmation, 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/components/Modal/Campaign/AppPopupModal.tsx b/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
index 299aba2781..20c4d28798 100644
--- a/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
+++ b/packages/extension-koni-ui/src/components/Modal/Campaign/AppPopupModal.tsx
@@ -17,11 +17,11 @@ 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;
+  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(
@@ -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/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
     }
   };
 });
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 51e71164f5..d85ba95148 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;
 }
 
@@ -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';
@@ -69,7 +73,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 +115,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;
@@ -187,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)();
           }
@@ -218,18 +256,18 @@ 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,
             message: item.content || '',
             buttons: item.buttons,
-            onPressBtn: (url?: string) => {
+            onClickBtn: (url?: string) => {
               handleButtonClick(`${item.position}-${item.id}`)('popup', url);
             }
           }));
 
-          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/AppPopupModalContext.tsx
deleted file mode 100644
index 50d0696a20..0000000000
--- a/packages/extension-koni-ui/src/contexts/AppPopupModalContext.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2019-2022 @polkadot/extension-ui authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { APP_POPUP_MODAL, EARNING_WARNING_ANNOUNCEMENT } from '@subwallet/extension-koni-ui/constants';
-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 { useSelector } from 'react-redux';
-
-import AppPopupModal from '../components/Modal/Campaign/AppPopupModal';
-import { AppContentButton, PopupFrequency } from '../types/staticContent';
-
-interface AppPopupModalContextProviderProps {
-  children?: React.ReactElement;
-}
-
-export type AppPopupModalInfo = {
-  title?: string;
-  message?: string;
-  buttons?: AppContentButton[];
-  externalButtons?: React.ReactElement;
-  type?: 'popup' | 'banner' | 'confirmation';
-  onPressBtn?: (url?: string) => void;
-  repeat?: PopupFrequency;
-};
-
-export interface AppPopupModalType {
-  openAppPopupModal: (data: AppPopupModalInfo) => void;
-  hideAppPopupModal: () => void;
-}
-
-export const AppPopupModalContext = React.createContext({} as AppPopupModalType);
-
-export const AppPopupModalContextProvider = ({ children }: AppPopupModalContextProviderProps) => {
-  const [appPopupModal, setAppPopupModal] = useState<AppPopupModalInfo>({});
-  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);
-    }
-  }, [activeModal, isPopupVisible, storageEarningPosition]);
-
-  const hideAppPopupModal = useCallback(() => {
-    toggleCampaignPopup({ value: false }).then(() => {
-      inactiveModal(APP_POPUP_MODAL);
-      setAppPopupModal((prevState) => ({
-        ...prevState,
-        title: '',
-        message: '',
-        buttons: [],
-        externalButtons: <></>
-      }));
-    }).catch((e) => console.error(e));
-  }, [inactiveModal]);
-
-  return (
-    <AppPopupModalContext.Provider value={{ openAppPopupModal, hideAppPopupModal }}>
-      {children}
-      <AppPopupModal
-        buttons={appPopupModal.buttons || []}
-        externalButtons={appPopupModal.externalButtons}
-        message={appPopupModal.message || ''}
-        onCloseModal={hideAppPopupModal}
-        onPressButton={appPopupModal.onPressBtn}
-        title={appPopupModal.title || ''}
-      />
-    </AppPopupModalContext.Provider>
-  );
-};
diff --git a/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
new file mode 100644
index 0000000000..c16839ad5e
--- /dev/null
+++ b/packages/extension-koni-ui/src/contexts/MktCampaignModalContext.tsx
@@ -0,0 +1,74 @@
+// Copyright 2019-2022 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { APP_POPUP_MODAL, EARNING_WARNING_ANNOUNCEMENT } from '@subwallet/extension-koni-ui/constants';
+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, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import AppPopupModal from '../components/Modal/Campaign/AppPopupModal';
+import { AppContentButton, PopupFrequency } from '../types/staticContent';
+
+interface MktCampaignModalContextProviderProps {
+  children?: React.ReactElement;
+}
+
+export type MktCampaignModalInfo = {
+  title?: string;
+  message?: string;
+  buttons?: AppContentButton[];
+  externalButtons?: React.ReactElement;
+  type?: 'popup' | 'banner' | 'confirmation';
+  onClickBtn?: (url?: string) => void;
+  repeat?: PopupFrequency;
+};
+
+export interface MktCampaignModalType {
+  openModal: (data: MktCampaignModalInfo) => void;
+  hideModal: () => void;
+}
+
+export const MktCampaignModalContext = React.createContext({} as MktCampaignModalType);
+
+export const MktCampaignModalContextProvider = ({ children }: MktCampaignModalContextProviderProps) => {
+  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 (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, mktCampaignModal?.type, storageEarningPosition]);
+
+  const hideModal = useCallback(() => {
+    toggleCampaignPopup({ value: false }).catch((e) => console.error(e)).finally(() => {
+      inactiveModal(APP_POPUP_MODAL);
+      setMktCampaignModal(undefined);
+    });
+  }, [inactiveModal]);
+
+  const mktCampaignContextValue = useMemo(() => ({ openModal, hideModal }), [hideModal, openModal]);
+
+  return (
+    <MktCampaignModalContext.Provider value={mktCampaignContextValue}>
+      {children}
+      {mktCampaignModal && (<AppPopupModal
+        onCloseModal={hideModal}
+        {...mktCampaignModal}
+      />)}
+    </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..688bd40ede
--- /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.find((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;
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/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];
       }
     });
 
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/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 403afb4968..0871bb6b29 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -15,12 +15,12 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "1.2.31",
+  "version": "1.2.32",
   "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",
@@ -49,4 +49,4 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 3b63998fb3..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
@@ -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
@@ -6513,6 +6514,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
@@ -6527,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
@@ -6557,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:
@@ -6566,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:
@@ -6590,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
@@ -6777,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
@@ -6810,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
@@ -11925,6 +11927,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"
@@ -16021,6 +16030,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"
@@ -16044,6 +16099,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"
@@ -16053,6 +16123,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"
@@ -16205,6 +16288,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"
@@ -24374,6 +24464,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"
@@ -27521,6 +27622,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"
@@ -27700,6 +27811,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"