fix: migrate screen top panel

Author: Argeare5

src/locales/en/messages.js

@@ -1095,6 +1095,10 @@ msgstr "Menu"
 msgid "Migrate"
 msgstr "Migrate"
 
+#: src/modules/migration/MigrationTopPanel.tsx
+msgid "Migrate from {0} V2 to {1} V3"
+msgstr "Migrate from {0} V2 to {1} V3"
+
 #: src/ui-config/menu-items/index.tsx
 msgid "Migrate to V3"
 msgstr "Migrate to V3"
@@ -1111,10 +1115,6 @@ msgstr "Migrating"
 msgid "Migrating multiple collaterals and borrowed assets at the same time can be an expensive operation and might fail in certain situations.<0>Therefore it’s not recommended to migrate positions with more than 5 assets (deposited + borrowed) at the same time.</0>"
 msgstr "Migrating multiple collaterals and borrowed assets at the same time can be an expensive operation and might fail in certain situations.<0>Therefore it’s not recommended to migrate positions with more than 5 assets (deposited + borrowed) at the same time.</0>"
 
-#: src/modules/migration/MigrationTopPanel.tsx
-msgid "Migration"
-msgstr "Migration"
-
 #: src/modules/migration/MigrationBottomPanel.tsx
 msgid "Migration & Health factor change"
 msgstr "Migration & Health factor change"
@@ -1721,10 +1721,6 @@ msgstr "Switching E-Mode"
 msgid "Switching rate"
 msgstr "Switching rate"
 
-#: src/modules/migration/MigrationTopPanel.tsx
-msgid "TODO: text about migration"
-msgstr "TODO: text about migration"
-
 #: src/modules/faucet/FaucetAssetsList.tsx
 msgid "Test Assets"
 msgstr "Test Assets"

src/locales/en/messages.po

@@ -1,25 +1,25 @@
 import { Trans } from '@lingui/macro';
-import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { PageTitle } from 'src/components/TopInfoPanel/PageTitle';
 import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel';
 
+import { getMarketInfoById } from '../../components/MarketSwitcher';
+import { useProtocolDataContext } from '../../hooks/useProtocolDataContext';
+
 export const MigrationTopPanel = () => {
-  const { breakpoints } = useTheme();
-  const md = useMediaQuery(breakpoints.down('md'));
-  const xsm = useMediaQuery(breakpoints.down('xsm'));
+  const { currentMarket } = useProtocolDataContext();
+  const { market } = getMarketInfoById(currentMarket);
 
   return (
     <TopInfoPanel
       pageTitle={<></>}
       titleComponent={
-        <Box>
-          <PageTitle pageTitle={<Trans>Migration</Trans>} withMarketSwitcher={true} />
-          <Box sx={{ width: md ? (xsm ? '320px' : '540px') : '860px' }}>
-            <Typography variant="description" color="#A5A8B6">
-              <Trans>TODO: text about migration</Trans>
-            </Typography>
-          </Box>
-        </Box>
+        <PageTitle
+          pageTitle={
+            <Trans>
+              Migrate from {market.marketTitle} V2 to {market.marketTitle} V3
+            </Trans>
+          }
+        />
       }
     />
   );