feat: display notification on new transactions (#323)

* feat: add i8ln to the redux store * feat: display a notification when receiving new transactions * feat: update whats new modal * refactor: only update active account on polling
kibis-is · Sep 19, 2024 · 4f0ecbc · 4f0ecbc
1 parent ddc6c98
commit 4f0ecbc
Show file tree

Hide file tree

Showing 28 changed files with 326 additions and 189 deletions.
diff --git a/src/extension/apps/background/App.tsx b/src/extension/apps/background/App.tsx
@@ -1,5 +1,5 @@
-import { combineReducers, Store } from '@reduxjs/toolkit';
-import React, { FC } from 'react';
+import { combineReducers, type Store } from '@reduxjs/toolkit';
+import React, { type FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 
@@ -27,11 +27,7 @@ import type { IAppProps, IBackgroundRootState } from '@extension/types';
 // utils
 import makeStore from '@extension/utils/makeStore';
 
-const App: FC<IAppProps> = ({
-  i18next,
-  initialColorMode,
-  initialFontFamily,
-}) => {
+const App: FC<IAppProps> = ({ i18n, initialColorMode, initialFontFamily }) => {
   const store: Store<IBackgroundRootState> = makeStore<IBackgroundRootState>(
     combineReducers({
       accounts: accountsReducer,
@@ -51,12 +47,12 @@ const App: FC<IAppProps> = ({
 
   return (
     <Provider store={store}>
-      <I18nextProvider i18n={i18next}>
+      <I18nextProvider i18n={i18n}>
         <ThemeProvider
           initialColorMode={initialColorMode}
           initialFontFamily={initialFontFamily}
         >
-          <Root />
+          <Root i18n={i18n} />
         </ThemeProvider>
       </I18nextProvider>
     </Provider>

diff --git a/src/extension/apps/background/Root.tsx b/src/extension/apps/background/Root.tsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
 // features
 import { handleNewEventByIdThunk } from '@extension/features/events';
 import { closeCurrentWindowThunk } from '@extension/features/layout';
+import { setI18nAction } from '@extension/features/system';
 
 // hooks
 import useOnAppStartup from '@extension/hooks/useOnAppStartup';
@@ -19,12 +20,16 @@ import SignTransactionsModal from '@extension/modals/SignTransactionsModal';
 import SplashPage from '@extension/pages/SplashPage';
 
 // types
-import type { IAppThunkDispatch, IBackgroundRootState } from '@extension/types';
+import type {
+  IAppThunkDispatch,
+  IBackgroundRootState,
+  IRootProps,
+} from '@extension/types';
 
 // utils
 import decodeURLSearchParam from '@extension/utils/decodeURLSearchParam';
 
-const Root: FC = () => {
+const Root: FC<IRootProps> = ({ i18n }) => {
   const dispatch = useDispatch<IAppThunkDispatch<IBackgroundRootState>>();
   // misc
   const url = new URL(window.location.href);
@@ -40,6 +45,8 @@ const Root: FC = () => {
 
       return;
     }
+
+    dispatch(setI18nAction(i18n));
   }, []);
   useEffect(() => {
     if (eventId) {

diff --git a/src/extension/apps/main/App.tsx b/src/extension/apps/main/App.tsx
@@ -1,22 +1,11 @@
-import { combineReducers, Store } from '@reduxjs/toolkit';
-import React, { FC } from 'react';
+import { combineReducers, type Store } from '@reduxjs/toolkit';
+import React, { type FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
-import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom';
+import { RouterProvider } from 'react-router-dom';
 
-// components
+// providers
 import ThemeProvider from '@extension/components/ThemeProvider';
-import Root from './Root';
-
-// constants
-import {
-  ACCOUNTS_ROUTE,
-  ADD_ACCOUNT_ROUTE,
-  ASSETS_ROUTE,
-  NFTS_ROUTE,
-  SETTINGS_ROUTE,
-  TRANSACTIONS_ROUTE,
-} from '@extension/constants';
 
 // features
 import { reducer as accountsReducer } from '@extension/features/accounts';
@@ -25,10 +14,7 @@ import { reducer as arc0072AssetsReducer } from '@extension/features/arc0072-ass
 import { reducer as arc200AssetsReducer } from '@extension/features/arc0200-assets';
 import { reducer as credentialLockReducer } from '@extension/features/credential-lock';
 import { reducer as eventsReducer } from '@extension/features/events';
-import {
-  reducer as layoutReducer,
-  setSideBar,
-} from '@extension/features/layout';
+import { reducer as layoutReducer } from '@extension/features/layout';
 import { reducer as messagesReducer } from '@extension/features/messages';
 import { reducer as networksReducer } from '@extension/features/networks';
 import { reducer as notificationsReducer } from '@extension/features/notifications';
@@ -42,93 +28,17 @@ import { reducer as standardAssetsReducer } from '@extension/features/standard-a
 import { reducer as systemReducer } from '@extension/features/system';
 
 // pages
-import AccountPage from '@extension/pages/AccountPage';
-import AssetPage from '@extension/pages/AssetPage';
-import NFTPage from '@extension/pages/NFTPage';
 import SplashPage from '@extension/pages/SplashPage';
-import TransactionPage from '@extension/pages/TransactionPage';
-
-// routers
-import AddAccountRouter from '@extension/routers/AddAccountMainRouter';
-import SettingsRouter from '@extension/routers/SettingsRouter';
 
 // types
 import type { IAppProps, IMainRootState } from '@extension/types';
 
 // utils
 import makeStore from '@extension/utils/makeStore';
-
-const createRouter = ({ dispatch }: Store<IMainRootState>) => {
-  return createHashRouter([
-    {
-      children: [
-        {
-          element: <Navigate replace={true} to={ACCOUNTS_ROUTE} />,
-          path: '/',
-        },
-        {
-          element: <AccountPage />,
-          loader: () => {
-            dispatch(setSideBar(true));
-
-            return null;
-          },
-          path: `${ACCOUNTS_ROUTE}/*`,
-        },
-        {
-          element: <AddAccountRouter />,
-          loader: () => {
-            dispatch(setSideBar(false));
-
-            return null;
-          },
-          path: `${ADD_ACCOUNT_ROUTE}/*`,
-        },
-        {
-          element: <AssetPage />,
-          loader: () => {
-            dispatch(setSideBar(true));
-
-            return null;
-          },
-          path: `${ASSETS_ROUTE}/:assetId`,
-        },
-        {
-          element: <NFTPage />,
-          loader: () => {
-            dispatch(setSideBar(true));
-
-            return null;
-          },
-          path: `${NFTS_ROUTE}/:appId/:tokenId`,
-        },
-        {
-          element: <SettingsRouter />,
-          loader: () => {
-            dispatch(setSideBar(true));
-
-            return null;
-          },
-          path: `${SETTINGS_ROUTE}/*`,
-        },
-        {
-          element: <TransactionPage />,
-          loader: () => {
-            dispatch(setSideBar(true));
-
-            return null;
-          },
-          path: `${TRANSACTIONS_ROUTE}/:transactionId`,
-        },
-      ],
-      element: <Root />,
-      path: '/',
-    },
-  ]);
-};
+import createRouter from './utils/createRouter';
 
 const App: FC<IAppProps> = ({
-  i18next,
+  i18n,
   initialColorMode,
   initialFontFamily,
 }: IAppProps) => {
@@ -157,14 +67,17 @@ const App: FC<IAppProps> = ({
 
   return (
     <Provider store={store}>
-      <I18nextProvider i18n={i18next}>
+      <I18nextProvider i18n={i18n}>
         <ThemeProvider
           initialColorMode={initialColorMode}
           initialFontFamily={initialFontFamily}
         >
           <RouterProvider
             fallbackElement={<SplashPage />}
-            router={createRouter(store)}
+            router={createRouter({
+              i18n,
+              store,
+            })}
           />
         </ThemeProvider>
       </I18nextProvider>

diff --git a/src/extension/apps/main/Root.tsx b/src/extension/apps/main/Root.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { type FC, useEffect } from 'react';
 import Confetti from 'react-confetti';
 import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
@@ -21,7 +21,10 @@ import { setShowingConfetti } from '@extension/features/notifications';
 import { reset as resetReKeyAccount } from '@extension/features/re-key-account';
 import { reset as resetRemoveAssets } from '@extension/features/remove-assets';
 import { reset as resetSendAsset } from '@extension/features/send-assets';
-import { startPollingForNetworkConnectivityThunk } from '@extension/features/system';
+import {
+  setI18nAction,
+  startPollingForNetworkConnectivityThunk,
+} from '@extension/features/system';
 
 // hooks
 import useOnAppStartup from '@extension/hooks/useOnAppStartup';
@@ -53,9 +56,13 @@ import {
 } from '@extension/selectors';
 
 // types
-import type { IAppThunkDispatch, IMainRootState } from '@extension/types';
+import type {
+  IAppThunkDispatch,
+  IMainRootState,
+  IRootProps,
+} from '@extension/types';
 
-const Root: FC = () => {
+const Root: FC<IRootProps> = ({ i18n }) => {
   const dispatch = useDispatch<IAppThunkDispatch<IMainRootState>>();
   // selectors
   const showingConfetti = useSelectNotificationsShowingConfetti();
@@ -72,6 +79,7 @@ const Root: FC = () => {
 
   useOnAppStartup();
   useEffect(() => {
+    dispatch(setI18nAction(i18n));
     // assets
     dispatch(fetchARC0072AssetsFromStorageThunk());
     dispatch(fetchARC0200AssetsFromStorageThunk());

diff --git a/src/extension/apps/main/utils/createRouter/createRouter.tsx b/src/extension/apps/main/utils/createRouter/createRouter.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { createHashRouter, Navigate } from 'react-router-dom';
+
+// constants
+import {
+  ACCOUNTS_ROUTE,
+  ADD_ACCOUNT_ROUTE,
+  ASSETS_ROUTE,
+  NFTS_ROUTE,
+  SETTINGS_ROUTE,
+  TRANSACTIONS_ROUTE,
+} from '@extension/constants';
+
+// containers
+import Root from '../../Root';
+
+// features
+import { setSideBar } from '@extension/features/layout';
+
+// pages
+import AccountPage from '@extension/pages/AccountPage';
+import AssetPage from '@extension/pages/AssetPage';
+import NFTPage from '@extension/pages/NFTPage';
+import SettingsRouter from '@extension/routers/SettingsRouter';
+import TransactionPage from '@extension/pages/TransactionPage';
+
+// routers
+import AddAccountRouter from '@extension/routers/AddAccountMainRouter';
+
+// types
+import type { IOptions } from './types';
+
+const createRouter = ({ i18n, store }: IOptions) => {
+  const { dispatch } = store;
+
+  return createHashRouter([
+    {
+      children: [
+        {
+          element: <Navigate replace={true} to={ACCOUNTS_ROUTE} />,
+          path: '/',
+        },
+        {
+          element: <AccountPage />,
+          loader: () => {
+            dispatch(setSideBar(true));
+
+            return null;
+          },
+          path: `${ACCOUNTS_ROUTE}/*`,
+        },
+        {
+          element: <AddAccountRouter />,
+          loader: () => {
+            dispatch(setSideBar(false));
+
+            return null;
+          },
+          path: `${ADD_ACCOUNT_ROUTE}/*`,
+        },
+        {
+          element: <AssetPage />,
+          loader: () => {
+            dispatch(setSideBar(true));
+
+            return null;
+          },
+          path: `${ASSETS_ROUTE}/:assetId`,
+        },
+        {
+          element: <NFTPage />,
+          loader: () => {
+            dispatch(setSideBar(true));
+
+            return null;
+          },
+          path: `${NFTS_ROUTE}/:appId/:tokenId`,
+        },
+        {
+          element: <SettingsRouter />,
+          loader: () => {
+            dispatch(setSideBar(true));
+
+            return null;
+          },
+          path: `${SETTINGS_ROUTE}/*`,
+        },
+        {
+          element: <TransactionPage />,
+          loader: () => {
+            dispatch(setSideBar(true));
+
+            return null;
+          },
+          path: `${TRANSACTIONS_ROUTE}/:transactionId`,
+        },
+      ],
+      element: <Root i18n={i18n} />,
+      path: '/',
+    },
+  ]);
+};
+
+export default createRouter;
diff --git a/src/extension/apps/main/utils/createRouter/index.ts b/src/extension/apps/main/utils/createRouter/index.ts
@@ -0,0 +1 @@
+export { default } from './createRouter';
diff --git a/src/extension/apps/main/utils/createRouter/types/IOptions.ts b/src/extension/apps/main/utils/createRouter/types/IOptions.ts
@@ -0,0 +1,12 @@
+import type { Store } from '@reduxjs/toolkit';
+import type { i18n } from 'i18next';
+
+// types
+import type { IMainRootState } from '@extension/types';
+
+interface IOptions {
+  i18n: i18n;
+  store: Store<IMainRootState>;
+}
+
+export default IOptions;
diff --git a/src/extension/apps/main/utils/createRouter/types/index.ts b/src/extension/apps/main/utils/createRouter/types/index.ts
@@ -0,0 +1 @@
+export type { default as IOptions } from './IOptions';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type { default as IOptions } from './IOptions';