frontend: type keystores

Author: thisconnect

frontends/web/src/api/keystores.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { subscribeEndpoint, TUnsubscribe } from './subscribe';
+import { apiGet } from '../utils/request';
+
+export type { TUnsubscribe };
+
+type TKeystore = { type: 'hardware' | 'software' };
+export type TKeystores = TKeystore[];
+
+export const subscribeKeystores = (
+  cb: (keystores: TKeystores) => void
+) => {
+  return subscribeEndpoint('keystores', cb);
+};
+
+export const getKeystores = (): Promise<TKeystores> => {
+  return apiGet('keystores');
+};

frontends/web/src/components/sidebar/sidebar.tsx

@@ -17,14 +17,14 @@
 
 import React, { Component } from 'react';
 import { Link, NavLink } from 'react-router-dom';
+import { TKeystores, subscribeKeystores, TUnsubscribe, getKeystores } from '../../api/keystores';
 import { IAccount } from '../../api/account';
 import coins from '../../assets/icons/coins.svg';
 import ejectIcon from '../../assets/icons/eject.svg';
 import info from '../../assets/icons/info.svg';
 import settings from '../../assets/icons/settings-alt.svg';
 import settingsGrey from '../../assets/icons/settings-alt_disabled.svg';
 import { share } from '../../decorators/share';
-import { subscribe } from '../../decorators/subscribe';
 import { translate, TranslateProps } from '../../decorators/translate';
 import { debug } from '../../utils/env';
 import { apiPost } from '../../utils/request';
@@ -40,18 +40,14 @@ interface SidebarProps {
     accounts: IAccount[];
 }
 
-interface SubscribedProps {
-    keystores?: Array<{ type: 'hardware' | 'software' }>;
-}
-
 export type SharedPanelProps = {
   // eslint-disable-next-line react/no-unused-prop-types
   activeSidebar: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   sidebarStatus: string;
 }
 
-type Props = SubscribedProps & SharedPanelProps & SidebarProps & TranslateProps;
+type Props = SharedPanelProps & SidebarProps & TranslateProps;
 
 type TGetAccountLinkProps = IAccount & { handleSidebarItemClick: ((e: React.SyntheticEvent) => void) };
 
@@ -92,16 +88,30 @@ const GetAccountLink = ({ coinCode, code, name, handleSidebarItemClick }: TGetAc
   );
 };
 
+type State = {
+  keystores: TKeystores;
+}
 
 class Sidebar extends Component<Props> {
   private swipe!: SwipeAttributes;
+  private unsubscribeFn?: TUnsubscribe;
+
+  public readonly state: State = {
+    keystores: [],
+  };
 
   public componentDidMount() {
     this.registerTouchEvents();
+    getKeystores().then(keystores => this.setState({ keystores }, () => {
+      this.unsubscribeFn = subscribeKeystores(keystores => this.setState({ keystores }));
+    }));
   }
 
   public componentWillUnmount() {
     this.removeTouchEvents();
+    if (this.unsubscribeFn) {
+      this.unsubscribeFn();
+    }
   }
 
   private registerTouchEvents = () => {
@@ -158,11 +168,11 @@ class Sidebar extends Component<Props> {
   };
 
   public render() {
+    const { keystores } = this.state;
     const {
       t,
       deviceIDs,
       accounts,
-      keystores,
       activeSidebar,
       sidebarStatus,
     } = this.props;
@@ -255,12 +265,6 @@ function eject(e: React.SyntheticEvent): void {
   e.preventDefault();
 }
 
-const subscribeHOC = subscribe<SubscribedProps, SharedPanelProps & SidebarProps & TranslateProps>(
-  { keystores: 'keystores' },
-  false,
-  false,
-)(Sidebar);
-
-const guideShareHOC = share<SharedPanelProps, SidebarProps & TranslateProps>(panelStore)(subscribeHOC);
+const guideShareHOC = share<SharedPanelProps, SidebarProps & TranslateProps>(panelStore)(Sidebar);
 const translateHOC = translate()(guideShareHOC);
 export { translateHOC as Sidebar };