Add banner for accounts page for AHM (#11981)

* feat: add banner for accounts page for ah migration

* feat: improve banner styling

* feat: add banner for Asset Hub migration in Crowdloan component

* fix: show commission correct in rc staking tab

Author: ap211unitech

packages/page-accounts/src/Accounts/BannerAssetHubMigration.tsx

@@ -0,0 +1,53 @@
+// Copyright 2017-2025 @polkadot/app-accounts authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useMemo } from 'react';
+
+import { styled } from '@polkadot/react-components';
+import { useStakingAsyncApis } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate.js';
+import Banner from './Banner.js';
+
+const BannerAssetHubMigration = () => {
+  const { t } = useTranslation();
+  const { ahEndPoints, isRelayChain } = useStakingAsyncApis();
+
+  const assetHubEndPoint = useMemo(() => {
+    return ahEndPoints[Math.floor(Math.random() * ahEndPoints.length)];
+  }, [ahEndPoints]);
+
+  if (!isRelayChain) {
+    return null;
+  }
+
+  return (
+    <StyledBanner type='warning'>
+      <p>
+        {t('After Asset Hub migration, all funds have been moved to Asset Hub. Please switch to the ')}
+        <a
+          href={`/?rpc=${assetHubEndPoint}#/accounts`}
+          rel='noopener noreferrer'
+          target='_blank'
+        >
+          {t('Asset Hub chain')}
+        </a>
+        {t(' to view your balances and details.')}
+        <br />
+        {t('For more information about Asset Hub migration, check the ')}
+        <a
+          href='https://support.polkadot.network/support/solutions/articles/65000190561#What-would-happen-after-the-migration?'
+          rel='noopener noreferrer'
+          target='_blank'
+        >details here</a>.
+      </p>
+    </StyledBanner>
+  );
+};
+
+const StyledBanner = styled(Banner)`
+  border: 1px solid #ffc107;
+  font-size: 1rem !important;
+`;
+
+export default React.memo(BannerAssetHubMigration);

packages/page-accounts/src/Accounts/index.tsx

@@ -28,6 +28,7 @@ import Qr from '../modals/Qr.js';
 import { useTranslation } from '../translate.js';
 import { SORT_CATEGORY, sortAccounts } from '../util.js';
 import Account from './Account.js';
+import BannerAssetHubMigration from './BannerAssetHubMigration.js';
 import BannerClaims from './BannerClaims.js';
 import BannerExtension from './BannerExtension.js';
 import Summary from './Summary.js';
@@ -335,6 +336,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           onStatusChange={onStatusChange}
         />
       )}
+      <BannerAssetHubMigration />
       <BannerExtension />
       <BannerClaims />
       <Summary balance={balances.summary} />

packages/page-parachains/src/Crowdloan/BannerAssetHubMigration.tsx

@@ -0,0 +1,45 @@
+// Copyright 2017-2025 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { MarkWarning, styled } from '@polkadot/react-components';
+import { useStakingAsyncApis } from '@polkadot/react-hooks';
+
+import { useTranslation } from '../translate.js';
+
+const BannerAssetHubMigration = () => {
+  const { t } = useTranslation();
+  const { isRelayChain } = useStakingAsyncApis();
+
+  if (!isRelayChain) {
+    return null;
+  }
+
+  return (
+    <StyledBanner
+      className='warning centered'
+      withIcon={false}
+    >
+      <p>
+        {t('After the Asset Hub migration, crowdloan related activity has been transferred to the `ah_ops` pallet on Asset Hub. You can claim your funds from there, or visit ')}
+        <a
+          href='https://polkadot-crowdloan.com/'
+          rel='noopener noreferrer'
+          target='_blank'
+        >
+          {t('the Polkadot Crowdloan UI')}
+        </a>
+        {t(' for more details.')}
+      </p>
+    </StyledBanner>
+  );
+};
+
+const StyledBanner = styled(MarkWarning)`
+  border: 1px solid #ffc107;
+  background: #ffc10720;
+  font-size: 1rem !important;
+`;
+
+export default React.memo(BannerAssetHubMigration);

packages/page-parachains/src/Crowdloan/index.tsx

@@ -9,6 +9,7 @@ import { Button, MarkWarning } from '@polkadot/react-components';
 import { useBestNumber } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate.js';
+import BannerAssetHubMigration from './BannerAssetHubMigration.js';
 import FundAdd from './FundAdd.js';
 import Funds from './Funds.js';
 import Summary from './Summary.js';
@@ -27,6 +28,7 @@ function Crowdloan ({ auctionInfo, campaigns: { activeCap, activeRaised, funds,
 
   return (
     <div className={className}>
+      <BannerAssetHubMigration />
       <MarkWarning
         className='warning centered'
         content={t('Crowdloans will be deprecated in favor of Coretime. When Coretime is active in Polkadot, this page will be removed.')}

packages/page-staking-async/src/Actions/Account/index.tsx

@@ -61,7 +61,8 @@ function useStashCalls (api: ApiPromise, stashId: string) {
   return { balancesAll, spanCount, stakingAccount };
 }
 
-function Account ({ allSlashes, className = '', info: { controllerId, destination, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, minCommission, targets }: Props): React.ReactElement<Props> {
+function Account ({ allSlashes, className = '', info, isDisabled, minCommission, targets }: Props): React.ReactElement<Props> {
+  const { controllerId, destination, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId } = useMemo(() => info, [info]);
   const { t } = useTranslation();
   const { api } = useApi();
   const { isRelayChain } = useStakingAsyncApis();
@@ -211,6 +212,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
           <td className='all'>
             <AddressInfo
               address={stashId}
+              stakingInfo={info}
               withBalance={false}
               withHexSessionId={hexSessionIdNext !== '0x' && [hexSessionIdQueue, hexSessionIdNext]}
               withValidatorPrefs