✨ Enhance migration complete with "What's New" welcome for upgraded users

Adds WhatsNewSheet to MigrationCompleteStep, showing feature highlights when users upgrade from mpay. This completes the version-upgrade UX gap in the migration flow.

Changes:
- WhatsNewSheet component with feature highlights (3 key features)
- Updated MigrationCompleteStep with welcome heading and WhatsNew button
- Full i18n support across 4 locales (en, zh-CN, zh-TW, ar)
- Storybook story for WhatsNewSheet

This enhances the T021 migration experience by celebrating the upgrade moment and orienting users to KeyApp improvements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Gaubee

src/components/migration/MigrationCompleteStep.tsx

@@ -2,9 +2,11 @@
  * 迁移完成步骤
  */
 
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CheckCircle2, XCircle, AlertTriangle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { WhatsNewSheet } from './WhatsNewSheet'
 
 interface MigrationCompleteStepProps {
   /** 是否成功 */
@@ -30,6 +32,7 @@ export function MigrationCompleteStep({
   onRetry,
 }: MigrationCompleteStepProps) {
   const { t } = useTranslation('migration')
+  const [whatsNewOpen, setWhatsNewOpen] = useState(false)
 
   return (
     <div
@@ -51,12 +54,13 @@ export function MigrationCompleteStep({
       <div className="space-y-2 text-center">
         <h2 className="text-xl font-semibold">
           {success
-            ? t('complete.success.title', { defaultValue: '迁移成功' })
+            ? t('welcome_title')
             : t('complete.error.title', { defaultValue: '迁移失败' })}
         </h2>
 
         {success ? (
           <>
+            <p className="text-sm text-muted-foreground">{t('welcome_subtitle')}</p>
             <p className="text-muted-foreground">
               {t('complete.success.description', {
                 defaultValue: '已成功导入 {{count}} 个钱包',
@@ -91,6 +95,16 @@ export function MigrationCompleteStep({
             ? t('complete.goHome', { defaultValue: '进入钱包' })
             : t('complete.skip', { defaultValue: '跳过，创建新钱包' })}
         </Button>
+        {success && (
+          <Button
+            variant="outline"
+            onClick={() => setWhatsNewOpen(true)}
+            size="lg"
+            data-testid="migration-whats-new-btn"
+          >
+            {t('whats_new')}
+          </Button>
+        )}
         {!success && onRetry && (
           <Button
             variant="outline"
@@ -102,6 +116,8 @@ export function MigrationCompleteStep({
           </Button>
         )}
       </div>
+
+      <WhatsNewSheet open={whatsNewOpen} onOpenChange={setWhatsNewOpen} />
     </div>
   )
 }

src/components/migration/WhatsNewSheet.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import { WhatsNewSheet } from './WhatsNewSheet'
+
+const meta: Meta<typeof WhatsNewSheet> = {
+  title: 'Migration/WhatsNewSheet',
+  component: WhatsNewSheet,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="p-4">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WhatsNewSheet>
+
+export const Default: Story = {
+  render: function Render() {
+    const [open, setOpen] = useState(true)
+    const { t } = useTranslation('migration')
+
+    return (
+      <div className="space-y-4">
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          {t('whats_new')}
+        </Button>
+        <WhatsNewSheet open={open} onOpenChange={setOpen} />
+      </div>
+    )
+  },
+}

src/components/migration/WhatsNewSheet.tsx

@@ -0,0 +1,47 @@
+import { Sparkles, ShieldCheck, Layers3 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+
+export interface WhatsNewSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function WhatsNewSheet({ open, onOpenChange }: WhatsNewSheetProps) {
+  const { t } = useTranslation('migration')
+
+  const features = [
+    { key: 'feature_modern_ui', Icon: Sparkles },
+    { key: 'feature_security', Icon: ShieldCheck },
+    { key: 'feature_multichain', Icon: Layers3 },
+  ] as const
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="bottom" className="gap-0 p-0">
+        <SheetHeader className="pb-2">
+          <SheetTitle className="text-base">{t('whats_new_title')}</SheetTitle>
+        </SheetHeader>
+
+        <div className="px-4 pb-6">
+          <ul className="space-y-3">
+            {features.map(({ key, Icon }) => (
+              <li key={key} className="flex items-start gap-3">
+                <div className="mt-0.5 flex size-8 items-center justify-center rounded-md bg-muted">
+                  <Icon className="size-4" />
+                </div>
+                <p className="text-sm leading-6">{t(key)}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+

src/i18n/locales/ar/migration.json

@@ -1,5 +1,12 @@
 {
   "title": "نقل المحفظة",
+  "welcome_title": "مرحبًا بك في BFM Pay!",
+  "welcome_subtitle": "迁移完成",
+  "whats_new": "ما الجديد",
+  "whats_new_title": "ما الجديد في BFM Pay",
+  "feature_modern_ui": "واجهة محسّنة وتجربة أكثر سلاسة",
+  "feature_security": "أمان أقوى لأصولك",
+  "feature_multichain": "دعم أفضل لعدة سلاسل",
   "noDataFound": "لم يتم اكتشاف بيانات محفظة mpay",
   "goBack": "رجوع",
   "startMigration": "بدء النقل",

src/i18n/locales/en/migration.json

@@ -1,5 +1,12 @@
 {
   "title": "Wallet Migration",
+  "welcome_title": "Welcome to BFM Pay!",
+  "welcome_subtitle": "迁移完成",
+  "whats_new": "What's New",
+  "whats_new_title": "What's New in BFM Pay",
+  "feature_modern_ui": "Improved UI and smoother experience",
+  "feature_security": "Enhanced security for your assets",
+  "feature_multichain": "Better multi-chain support",
   "noDataFound": "No mpay wallet data detected",
   "goBack": "Go Back",
   "startMigration": "Start Migration",

src/i18n/locales/zh-CN/migration.json

@@ -1,5 +1,12 @@
 {
   "title": "钱包迁移",
+  "welcome_title": "欢迎使用 BFM Pay！",
+  "welcome_subtitle": "迁移完成",
+  "whats_new": "看看有哪些新变化",
+  "whats_new_title": "BFM Pay 的新变化",
+  "feature_modern_ui": "更现代的界面与更流畅的体验",
+  "feature_security": "更强的安全防护，守护资产",
+  "feature_multichain": "更完善的多链支持",
   "noDataFound": "未检测到 mpay 钱包数据",
   "goBack": "返回",
   "startMigration": "开始迁移",

src/i18n/locales/zh-TW/migration.json

@@ -1,5 +1,12 @@
 {
   "title": "錢包遷移",
+  "welcome_title": "歡迎使用 BFM Pay！",
+  "welcome_subtitle": "遷移完成",
+  "whats_new": "看看有哪些新變化",
+  "whats_new_title": "BFM Pay 的新變化",
+  "feature_modern_ui": "更現代的介面與更流暢的體驗",
+  "feature_security": "更強的安全防護，守護資產",
+  "feature_multichain": "更完善的多鏈支援",
   "noDataFound": "未檢測到 mpay 錢包數據",
   "goBack": "返回",
   "startMigration": "開始遷移",