diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 0d6b45a7a..524083c76 100644 --- a/packages/widget/src/App.tsx +++ b/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={} /> } /> + } /> diff --git a/packages/widget/src/components/NotFound.tsx b/packages/widget/src/components/NotFound.tsx new file mode 100644 index 000000000..016bdcb6c --- /dev/null +++ b/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 ( + + {t('tooltip.notFound.title')} + {t('tooltip.notFound.text')} + + ); +}; diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json index 3724f837a..e5dcce9ac 100644 --- a/packages/widget/src/i18n/en/translation.json +++ b/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." } }