feat: add page not found message

packages/widget/src/App.tsx

@@ -4,6 +4,7 @@ import { AppProps, AppProvider } from './AppProvider';
 import { AppContainer } from './components/AppContainer';
 import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
+import { NotFound } from './components/NotFound';
 import { MainPage } from './pages/MainPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
@@ -48,6 +49,7 @@ export const AppDefault = () => {
           element={<SwapPage />}
         />
         <Route path={routes.swap} element={<SwapPage />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
       <Initializer />
     </AppContainer>

packages/widget/src/components/NotFound.tsx

@@ -0,0 +1,21 @@
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export const NotFound: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        flex: 1,
+        padding: 3,
+      }}
+    >
+      <Typography variant="h6">{t('tooltip.notFound.title')}</Typography>
+      <Typography>{t('tooltip.notFound.text')}</Typography>
+    </Box>
+  );
+};

packages/widget/src/i18n/en/translation.json

@@ -145,6 +145,10 @@
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
   },
   "tooltip": {
+    "notFound": {
+      "title": "Sorry 🥲",
+      "text": "We couldn't find this page."
+    },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
   }
 }