Create an overlay for no accounts (#1105)

* Create an overlay for no accounts

* Overlays to the top

* Remove extrinsics, talk about hidden features

* Relocated styled-components

* Dismiss button

packages/apps/src/Apps.tsx

@@ -8,16 +8,17 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
 import store from 'store';
-import styled, { ThemeProvider } from 'styled-components';
-import { media } from '@polkadot/ui-app';
-import { classes } from '@polkadot/ui-app/util';
+import { ThemeProvider } from 'styled-components';
 import Signer from '@polkadot/ui-signer';
 import settings from '@polkadot/ui-settings';
 
-import Connecting from './Connecting';
+import ConnectingOverlay from './overlays/Connecting';
+import AccountsOverlay from './overlays/Accounts';
 import Content from './Content';
 import SideBar from './SideBar';
 
+import { Wrapper } from './styles';
+
 type Props = BareProps & {};
 
 type State = {
@@ -27,22 +28,6 @@ type State = {
   transition: SideBarTransition
 };
 
-const Wrapper = styled.div`
-  align-items: stretch;
-  box-sizing: border-box;
-  display: flex;
-  min-height: 100vh;
-
-  header {
-    margin-bottom: 1.4rem;
-    text-align: center;
-
-    ${media.TABLET`
-      margin-bottom: 2rem;
-   `}
-  }
-`;
-
 class Apps extends React.Component<Props, State> {
   state: State;
 
@@ -71,19 +56,11 @@ class Apps extends React.Component<Props, State> {
   }
 
   render () {
-
     const { isCollapsed, isMenu, menuOpen } = this.state;
+
     return (
       <ThemeProvider theme={{ theme: settings.uiTheme }}>
-        <Wrapper
-          className={
-            classes('apps-Wrapper',
-                     !isCollapsed ? 'expanded' : 'collapsed',
-                     isMenu ? 'fixed' : '',
-                     menuOpen ? 'menu-open' : '',
-                     `theme--${settings.uiTheme}`)
-          }
-        >
+        <Wrapper className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu ? 'fixed' : ''} ${menuOpen ? 'menu-open' : ''} theme--${settings.uiTheme}`}>
           {this.renderMenuBg()}
           <SideBar
             collapse={this.collapse}
@@ -95,7 +72,8 @@ class Apps extends React.Component<Props, State> {
           <Signer>
             <Content />
           </Signer>
-          <Connecting />
+          <ConnectingOverlay />
+          <AccountsOverlay />
         </Wrapper>
       </ThemeProvider>
     );
@@ -158,11 +136,7 @@ class Apps extends React.Component<Props, State> {
   private renderMenuBg = () => {
     return (
       <div
-        className={
-          classes(
-            'apps-Menu-bg',
-            this.state.menuOpen ? 'open' : 'closed')
-          }
+        className={`apps-Menu-bg ${this.state.menuOpen ? 'open' : 'closed'}`}
         onClick={this.handleResize}
       >
       </div>

packages/apps/src/SideBar/Item.tsx

@@ -36,7 +36,6 @@ class Item extends React.PureComponent<Props> {
   }
 
   render () {
-
     const { route: { i18n, icon, name }, t, isCollapsed } = this.props;
 
     if (!this.isVisible()) {

packages/apps/src/TopBar.tsx

@@ -5,40 +5,13 @@
 // Unused atm, experiment as a replacement for NodeInfo on the SideBar
 
 import React from 'react';
-import styled from 'styled-components';
 
 import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/ui-reactive';
 
+import { TopBar as Wrapper } from './styles';
+
 type Props = {};
 
-const Wrapper = styled.div`
-  background: #f2f2f2;
-  font-size: 0.85rem;
-  line-height: 1rem;
-  overflow: hidden;
-  padding: 0.5rem 1rem;
-  position: fixed;
-  right: 0;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  top: 0;
-
-  div {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  > div {
-    border-left: 1px solid #ccc;
-    padding: 0 0.5rem;
-
-    &:first-child {
-      border-width: 0;
-    }
-  }
-`;
-
 export default class TopBar extends React.PureComponent<Props> {
   render () {
     return (

packages/apps/src/overlays/Accounts.tsx

@@ -0,0 +1,91 @@
+// Copyright 2017-2019 @polkadot/apps authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+import { ApiProps } from '@polkadot/ui-api/types';
+import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { withApi, withMulti, withObservable } from '@polkadot/ui-api';
+import { Icon } from '@polkadot/ui-app';
+import accountObservable from '@polkadot/ui-keyring/observable/accounts';
+
+import { Accounts as Wrapper, OverlayClose } from '../styles';
+
+import translate from '../translate';
+
+type Props = I18nProps & ApiProps & {
+  allAccounts?: SubjectInfo
+};
+
+type State = {
+  isDismissed: boolean,
+  hasAccounts: boolean
+};
+
+class Accounts extends React.PureComponent<Props, State> {
+  state: State = {
+    isDismissed: false,
+    hasAccounts: false
+  };
+
+  static getDerivedStateFromProps ({ allAccounts }: Props, prevState: State): State | null {
+    if (!allAccounts) {
+      return null;
+    }
+
+    const hasAccounts = Object.keys(allAccounts).length !== 0;
+
+    if (hasAccounts === prevState.hasAccounts) {
+      return null;
+    }
+
+    return {
+      hasAccounts
+    } as State;
+  }
+
+  render () {
+    const { isApiReady } = this.props;
+    const { isDismissed, hasAccounts } = this.state;
+
+    if (!isApiReady || isDismissed || hasAccounts) {
+      return null;
+    }
+
+    return (
+      <Wrapper>
+        <Trans i18nKey='noAccounts'>
+          You have no accounts. Some features are currently hidden and will only become available once you have accounts.
+          {' '}
+          <Link
+            to ='/accounts'
+            onClick={this.dismiss}
+          >
+            Create an account now.
+          </Link>
+        </Trans>
+        <OverlayClose>
+          <Icon
+            name='close'
+            onClick={this.dismiss}
+          />
+        </OverlayClose>
+      </Wrapper>
+    );
+  }
+
+  private dismiss = () => {
+    this.setState({ isDismissed: true });
+  }
+}
+
+export default withMulti(
+  Accounts,
+  translate,
+  withApi,
+  withObservable(accountObservable.subject, { propName: 'allAccounts' })
+);

packages/apps/src/overlays/Connecting.tsx

@@ -6,27 +6,14 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { ApiProps } from '@polkadot/ui-api/types';
 
 import React from 'react';
-import styled from 'styled-components';
 import { withApi, withMulti } from '@polkadot/ui-api';
 import settings from '@polkadot/ui-settings';
 
-import translate from './translate';
+import { Connecting as Wrapper } from '../styles';
+
+import translate from '../translate';
 
 type Props = I18nProps & ApiProps;
-
-const Wrapper = styled.div`
-  background: red;
-  color: white;
-  bottom: 0;
-  left: 0;
-  line-height: 1.5em;
-  opacity: 0.9;
-  padding: 1em 5em;
-  position: fixed;
-  right: 0;
-  text-align: center;
-`;
-
 // @ts-ignore
 const isFirefox = typeof InstallTrigger !== 'undefined';
 

packages/apps/src/styles.ts

@@ -0,0 +1,78 @@
+// Copyright 2017-2019 @polkadot/apps authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import styled from 'styled-components';
+import { media } from '@polkadot/ui-app';
+
+export const Wrapper = styled.div`
+  align-items: stretch;
+  box-sizing: border-box;
+  display: flex;
+  min-height: 100vh;
+
+  header {
+    margin-bottom: 1.4rem;
+    text-align: center;
+
+    ${media.TABLET`
+      margin-bottom: 2rem;
+   `}
+  }
+`;
+
+export const TopBar = styled.div`
+  background: #f2f2f2;
+  font-size: 0.85rem;
+  line-height: 1rem;
+  overflow: hidden;
+  padding: 0.5rem 1rem;
+  position: fixed;
+  right: 0;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: 0;
+
+  div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  > div {
+    border-left: 1px solid #ccc;
+    padding: 0 0.5rem;
+
+    &:first-child {
+      border-width: 0;
+    }
+  }
+`;
+
+export const Overlay = styled.div`
+  bottom: 0;
+  left: 0;
+  line-height: 1.5em;
+  padding: 1em 5em;
+  position: fixed;
+  right: 0;
+  text-align: center;
+  z-index: 500;
+`;
+
+export const OverlayClose = styled.div`
+  cursor: pointer;
+  position: absolute;
+  right: 1em;
+  top: 1em;
+`;
+
+export const Connecting = styled(Overlay)`
+  background: red;
+  color: white;
+  opacity: 0.9;
+`;
+
+export const Accounts = styled(Overlay)`
+  background: #FFFACD;
+`;