diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index f6f1cc1f93..309b47aa57 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -8,7 +8,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 // we also need to export the default as hot(Apps) (last line)
 // import { hot } from 'react-hot-loader/root';
 
-import React from 'react';
+import React, { useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
 import GlobalStyle from '@polkadot/react-components/styles';
@@ -16,165 +16,69 @@ import Signer from '@polkadot/react-signer';
 
 import ConnectingOverlay from './overlays/Connecting';
 import AccountsOverlay from './overlays/Accounts';
-import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD } from './constants';
+import { SideBarTransition, SIDEBAR_MENU_THRESHOLD } from './constants';
 import Content from './Content';
 import SideBar from './SideBar';
 
-interface State {
+interface SidebarState {
   isCollapsed: boolean;
   isMenu: boolean;
   menuOpen: boolean;
   transition: SideBarTransition;
 }
 
-class Apps extends React.Component<Props, State> {
-  public state: State;
+function Apps ({ className }: Props): React.ReactElement<Props> {
+  const [sidebar, setSidebar] = useState<SidebarState>({
+    isCollapsed: false,
+    transition: SideBarTransition.COLLAPSED,
+    ...store.get('sidebar', {}),
+    menuOpen: false,
+    isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
+  });
 
-  public constructor (props: Props) {
-    super(props);
+  const { isCollapsed, isMenu, menuOpen } = sidebar;
 
-    const state = store.get('sidebar') || {};
-
-    this.state = {
-      isCollapsed: false,
-      menuOpen: false,
-      transition: SideBarTransition.COLLAPSED,
-      ...state
-    };
-  }
-
-  public componentDidMount (): void {
-    this.setState({
-      menuOpen: false,
-      isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
-    });
-  }
-
-  public componentDidUpdate (): void {
-    this.handleMenuTransition();
-  }
-
-  public render (): React.ReactNode {
-    const { className } = this.props;
-    const { isCollapsed, isMenu, menuOpen } = this.state;
-
-    return (
-      <>
-        <GlobalStyle />
-        <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
-          {this.renderMenuBg()}
-          <SideBar
-            collapse={this.collapse}
-            handleResize={this.handleResize}
-            menuOpen={menuOpen}
-            isCollapsed={isCollapsed}
-            toggleMenu={this.toggleMenu}
-          />
-          <Signer>
-            <Content />
-          </Signer>
-          <ConnectingOverlay />
-          <AccountsOverlay />
-        </div>
-      </>
-    );
-  }
-
-  private collapse = (): void => {
-    this.setState(({ isCollapsed }: State): Pick<State, never> => ({
-      isCollapsed: !isCollapsed
-    }), (): void => {
-      store.set('sidebar', this.state);
-    });
-  }
-
-  private handleResize = (): void => {
-    const { isMenu, menuOpen } = this.state;
-    const dir = window.innerWidth < SIDEBAR_MENU_THRESHOLD ? 'hide' : 'show';
-
-    if (!menuOpen) {
-      if ((isMenu && dir === 'hide') || (!isMenu && dir === 'show')) {
-        return;
-      }
-    }
-
-    const transition = (dir === 'hide')
+  const _setSidebar = (update: Partial<SidebarState>): void =>
+    setSidebar(store.set('sidebar', { ...sidebar, ...update }));
+  const _collapse = (): void =>
+    _setSidebar({ isCollapsed: !isCollapsed });
+  const _toggleMenu = (): void =>
+    _setSidebar({ isCollapsed: false, menuOpen: true });
+  const _handleResize = (): void => {
+    const transition = window.innerWidth < SIDEBAR_MENU_THRESHOLD
       ? SideBarTransition.MINIMISED_AND_EXPANDED
       : SideBarTransition.EXPANDED_AND_MAXIMISED;
 
-    this.toggleMenuResize(transition);
-  }
-
-  private handleMenuTransition = (): void => {
-    const { transition } = this.state;
-
-    switch (transition) {
-      case SideBarTransition.MINIMISED_AND_EXPANDED:
-        setTimeout((): void => {
-          this.setState({
-            isMenu: true,
-            isCollapsed: false,
-            transition: SideBarTransition.COLLAPSED
-          });
-        }, SIDEBAR_TRANSITION_DURATION);
-        break;
-
-      case SideBarTransition.EXPANDED_AND_MAXIMISED:
-        setTimeout((): void => {
-          this.setState({
-            isMenu: false,
-            isCollapsed: store.get('sidebar').isCollapsed,
-            transition: SideBarTransition.EXPANDED
-          });
-        }, SIDEBAR_TRANSITION_DURATION);
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  private renderMenuBg = (): React.ReactNode => {
-    return (
-      <div
-        className={`apps-Menu-bg ${this.state.menuOpen ? 'open' : 'closed'}`}
-        onClick={this.handleResize}
-      >
-      </div>
-    );
-  }
-
-  private toggleMenu = (): void => {
-    this.setState({
-      isCollapsed: false,
-      menuOpen: true
+    _setSidebar({
+      isMenu: transition === SideBarTransition.MINIMISED_AND_EXPANDED,
+      menuOpen: false,
+      transition
     });
-  }
+  };
 
-  private toggleMenuResize = (transition: SideBarTransition): void => {
-    switch (transition) {
-      case SideBarTransition.MINIMISED_AND_EXPANDED:
-        this.setState({
-          isMenu: true,
-          menuOpen: false,
-          transition: transition
-        });
-        break;
-
-      case SideBarTransition.EXPANDED_AND_MAXIMISED:
-        this.setState({
-          menuOpen: false,
-          transition: transition
-        });
-        break;
-
-      default:
-        this.setState(({ isCollapsed }: State): Pick<State, never> => ({
-          isCollapsed: !isCollapsed
-        }));
-        break;
-    }
-  }
+  return (
+    <>
+      <GlobalStyle />
+      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
+        <div
+          className={`apps-Menu-bg ${menuOpen ? 'open' : 'closed'}`}
+          onClick={_handleResize}
+        />
+        <SideBar
+          collapse={_collapse}
+          handleResize={_handleResize}
+          menuOpen={menuOpen}
+          isCollapsed={isCollapsed}
+          toggleMenu={_toggleMenu}
+        />
+        <Signer>
+          <Content />
+        </Signer>
+        <ConnectingOverlay />
+        <AccountsOverlay />
+      </div>
+    </>
+  );
 }
 
 export default styled(Apps)`
diff --git a/packages/react-api/src/util/intervalObservable.ts b/packages/react-api/src/util/intervalObservable.ts
index 5b9b8cdfc5..ec974809e6 100644
--- a/packages/react-api/src/util/intervalObservable.ts
+++ b/packages/react-api/src/util/intervalObservable.ts
@@ -9,7 +9,7 @@ import { interval } from 'rxjs/observable/interval';
 
 const interval$ = interval(500);
 
-export default function intervalSubscribe<T, Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
+export default function intervalObservable<T, Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
   return interval$.subscribe((): void => {
     const elapsed = Date.now() - ((that.state.callUpdatedAt as number) || 0);
     const callUpdated = elapsed <= 1500;