Merge branch 'frontend-type-newtxs'

Author: thisconnect

frontends/web/src/api/transactions.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2023 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { subscribe as subscribeLegacy } from '../utils/event-legacy';
+
+export const syncNewTxs = (
+  cb: (
+    meta: {
+      count: number,
+      accountName: string,
+    }
+  ) => void,
+) => {
+  return subscribeLegacy('newTxs', event => {
+    if (event.type === 'backend') {
+      cb(event.meta);
+    }
+  });
+};

frontends/web/src/app.tsx

@@ -21,6 +21,7 @@ import { getAccounts, IAccount } from './api/account';
 import { syncAccountsList } from './api/accountsync';
 import { getDeviceList, TDevices } from './api/devices';
 import { syncDeviceList } from './api/devicessync';
+import { syncNewTxs } from './api/transactions';
 import { notifyUser } from './api/system';
 import { unsubscribe, UnsubscribeList } from './utils/subscriptions';
 import { ConnectedApp } from './connected';
@@ -33,70 +34,55 @@ import { MobileDataWarning } from './components/mobiledatawarning';
 import { Sidebar, toggleSidebar } from './components/sidebar/sidebar';
 import { Update } from './components/update/update';
 import { translate, TranslateProps } from './decorators/translate';
-import { apiWebsocket } from './utils/websocket';
 import { route, RouterWatcher } from './utils/route';
 import { Darkmode } from './components/darkmode/darkmode';
 import { DarkModeProvider } from './contexts/DarkmodeProvider';
 import { AppProvider } from './contexts/AppProvider';
 
- interface State {
-     accounts: IAccount[];
-     devices: TDevices;
- }
+type State = {
+  accounts: IAccount[];
+  devices: TDevices;
+}
 
- type Props = TranslateProps;
+type Props = TranslateProps;
 
 class App extends Component<Props, State> {
   public readonly state: State = {
     accounts: [],
     devices: {},
   };
 
-  private unsubscribe!: () => void;
   private unsubscribeList: UnsubscribeList = [];
 
   /**
-      * Gets fired when the route changes.
-      */
+   * Gets fired when the route changes.
+   */
   private handleRoute = () => {
     if (panelStore.state.activeSidebar) {
       toggleSidebar();
     }
   };
 
   public componentDidMount() {
-    this.unsubscribe = apiWebsocket((payload) => {
-      if ('type' in payload) {
-        const { data, meta, type } = payload;
-        switch (type) {
-        case 'backend':
-          switch (data) {
-          case 'newTxs':
-            notifyUser(this.props.t('notification.newTxs', {
-              count: meta.count,
-              accountName: meta.accountName,
-            }));
-            break;
-          }
-          break;
-        }
-      }
-    });
-
     Promise.all([getDeviceList(), getAccounts()])
       .then(([devices, accounts]) => {
         this.setStateWithDeviceList({ accounts, devices });
       })
       .catch(console.error);
 
     this.unsubscribeList.push(
+      syncNewTxs((meta) => {
+        notifyUser(this.props.t('notification.newTxs', {
+          count: meta.count,
+          accountName: meta.accountName,
+        }));
+      }),
       syncAccountsList(accounts => {
         this.setState({ accounts }, this.maybeRoute);
       }),
       syncDeviceList((devices) => {
         this.setStateWithDeviceList({ devices });
       }),
-      // TODO: add syncBackendNewTX
     );
   }
 
@@ -107,7 +93,7 @@ class App extends Component<Props, State> {
       // if the first device is new
       if (
         newDeviceIDList.length > 0
-                && newDeviceIDList[0] !== oldDeviceIDList[0]
+        && newDeviceIDList[0] !== oldDeviceIDList[0]
       ) {
         // route new unlocked device with accounts
         if (this.state.accounts.length) {
@@ -124,7 +110,6 @@ class App extends Component<Props, State> {
   }
 
   public componentWillUnmount() {
-    this.unsubscribe();
     unsubscribe(this.unsubscribeList);
   }
 
@@ -143,9 +128,9 @@ class App extends Component<Props, State> {
     // if no accounts are registered on specified views route to /
     if (accounts.length === 0 && (
       currentURL.startsWith('/account-summary')
-             || currentURL.startsWith('/add-account')
-             || currentURL.startsWith('/settings/manage-accounts')
-             || currentURL.startsWith('/passphrase')
+      || currentURL.startsWith('/add-account')
+      || currentURL.startsWith('/settings/manage-accounts')
+      || currentURL.startsWith('/passphrase')
     )) {
       route('/', true);
       return;