Add AHM warning page (#1601)

packages/extension-ui/src/Popup/AssetHubMigration.tsx

@@ -0,0 +1,81 @@
+// Copyright 2019-2025 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useCallback, useContext } from 'react';
+
+import { ActionContext, Box, Button, ButtonArea, List } from '../components/index.js';
+import { useTranslation } from '../hooks/index.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
+
+interface Props {
+  className?: string;
+}
+
+function AssetHubMigration ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const onAction = useContext(ActionContext);
+
+  const _onClick = useCallback(
+    (): void => {
+      window.localStorage.setItem('asset_hub_migration_read', 'ok');
+      onAction();
+    },
+    [onAction]
+  );
+
+  return (
+    <>
+      <Header text={t('Asset Hub Migration Notice')} />
+      <div className={className}>
+        <p>{t('The Asset Hub migration has been completed. Please note the following important changes:')}</p>
+        <Box>
+          <List>
+            <li>{t('All balances have been migrated from the Relay Chain to Asset Hub')}</li>
+            <li>{t('All on-chain functionality has been moved to Asset Hub')}</li>
+            <li>{t('Asset Hub now holds user balances and provides general functionality')}</li>
+          </List>
+        </Box>
+        <p className='warning'>{t('Do not teleport balances to the Relay Chain unless:')}</p>
+        <Box>
+          <List>
+            <li>{t('You are opening HRMP channels, or')}</li>
+            <li>{t('You are starting a Parachain')}</li>
+          </List>
+        </Box>
+        <p>{t('For all other operations, your balances are already on Asset Hub.')}</p>
+      </div>
+      <ButtonArea>
+        <Button onClick={_onClick}>{t('I Understand')}</Button>
+      </ButtonArea>
+    </>
+  );
+}
+
+export default styled(AssetHubMigration)<Props>`
+  p {
+    color: var(--subTextColor);
+    margin-bottom: 4px;
+    margin-top: 0;
+    line-height: 1.4;
+  }
+
+  p.warning {
+    color: var(--errorColor);
+    font-weight: 600;
+    font-size: 1.1em;
+    margin-top: 6px;
+    margin-bottom: 2px;
+    text-transform: uppercase;
+    line-height: 1.3;
+  }
+
+  article {
+    margin: 0.4rem 24px;
+    padding: 8px 20px;
+  }
+
+  ul {
+    margin: 0;
+  }
+`;

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

@@ -25,6 +25,7 @@ import Derive from './Derive/index.js';
 import ImportSeed from './ImportSeed/index.js';
 import Metadata from './Metadata/index.js';
 import Signing from './Signing/index.js';
+import AssetHubMigration from './AssetHubMigration.js';
 import Export from './Export.js';
 import ExportAll from './ExportAll.js';
 import Forget from './Forget.js';
@@ -76,12 +77,14 @@ export default function Popup (): React.ReactElement {
   const [metaRequests, setMetaRequests] = useState<null | MetadataRequest[]>(null);
   const [signRequests, setSignRequests] = useState<null | SigningRequest[]>(null);
   const [isWelcomeDone, setWelcomeDone] = useState(false);
+  const [isMigrationDone, setMigrationDone] = useState(false);
   const [settingsCtx, setSettingsCtx] = useState<SettingsStruct>(startSettings);
   const history = useHistory();
 
   const _onAction = useCallback(
     (to?: string): void => {
       setWelcomeDone(window.localStorage.getItem('welcome_read') === 'ok');
+      setMigrationDone(window.localStorage.getItem('asset_hub_migration_read') === 'ok');
 
       if (!to) {
         return;
@@ -130,15 +133,17 @@ export default function Popup (): React.ReactElement {
     return <ErrorBoundary trigger={trigger}>{component}</ErrorBoundary>;
   }
 
-  const Root = isWelcomeDone
-    ? authRequests?.length
-      ? wrapWithErrorBoundary(<Authorize />, 'authorize')
-      : metaRequests?.length
-        ? wrapWithErrorBoundary(<Metadata />, 'metadata')
-        : signRequests?.length
-          ? wrapWithErrorBoundary(<Signing />, 'signing')
-          : wrapWithErrorBoundary(<Accounts />, 'accounts')
-    : wrapWithErrorBoundary(<Welcome />, 'welcome');
+  const Root = !isWelcomeDone
+    ? wrapWithErrorBoundary(<Welcome />, 'welcome')
+    : !isMigrationDone
+      ? wrapWithErrorBoundary(<AssetHubMigration />, 'asset-hub-migration')
+      : authRequests?.length
+        ? wrapWithErrorBoundary(<Authorize />, 'authorize')
+        : metaRequests?.length
+          ? wrapWithErrorBoundary(<Metadata />, 'metadata')
+          : signRequests?.length
+            ? wrapWithErrorBoundary(<Signing />, 'signing')
+            : wrapWithErrorBoundary(<Accounts />, 'accounts');
 
   return (
     <Loading>{accounts && authRequests && metaRequests && signRequests && (

packages/extension/public/locales/en/translation.json

@@ -186,5 +186,16 @@
   "Ethereum Account": "",
   "It looks like this request is coming from an suspicious origin. Please verify the source carefully.": "",
   "Password is not strong enough": "",
-  "Password must be at least {{length}} characters long": ""
+  "Password must be at least {{length}} characters long": "",
+  "Asset Hub Migration Notice": "",
+  "The Asset Hub migration has been completed. Please note the following important changes:": "",
+  "All balances have been migrated from the Relay Chain to Asset Hub": "",
+  "All on-chain functionality has been moved to Asset Hub": "",
+  "Asset Hub now holds user balances and provides general functionality": "",
+  "⚠️ Do not teleport balances to the Relay Chain unless:": "",
+  "You are opening HRMP channels, or": "",
+  "You are starting a Parachain": "",
+  "For all other operations, your balances are already on Asset Hub.": "",
+  "I Understand": "",
+  "Do not teleport balances to the Relay Chain unless:": ""
 }