Fixed issues based on review

packages/app-staking/src/Actions/Accounts.tsx

@@ -8,7 +8,6 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 import { withCalls, withMulti } from '@polkadot/react-api/with';
-import { MyAddressProps, withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -83,11 +82,11 @@ function Accounts({
 }
 
 export default withMulti(
-  withOnlyMembers(styled(Accounts)`
+  styled(Accounts)`
     .ui--CardGrid-buttons {
       text-align: right;
     }
-  `),
+  `,
   translate,
   withCalls<Props>([
     'query.staking.bonded',

packages/apps/src/SideBar/Item.tsx

@@ -61,9 +61,8 @@ function hasEndpoint(api: ApiPromise, endpoint: string): boolean {
 function checkVisible(
   name: string,
   { api, isApiReady, isApiConnected }: ApiProps,
-  hasAccounts: boolean,
   hasSudo: boolean,
-  { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']
+  { isHidden, needsApi, needsSudo }: Route['display']
 ): boolean {
   if (isHidden) {
     return false;

packages/joy-members/src/EditForm.tsx

@@ -11,7 +11,7 @@ import * as JoyForms from '@polkadot/joy-utils/forms';
 import { SubmittableResult } from '@polkadot/api';
 import { MemberId, UserInfo, Profile, PaidTermId, PaidMembershipTerms } from '@joystream/types/members';
 import { OptionText } from '@joystream/types/';
-import { MyAccountProps, withMyAccount, withOnlyMembers } from '@polkadot/joy-utils/MyAccount';
+import { MyAccountProps, withMyAccount } from '@polkadot/joy-utils/MyAccount';
 import { queryMembershipToProp } from './utils';
 import { withCalls } from '@polkadot/react-api/index';
 import { Button, Message } from 'semantic-ui-react';
@@ -265,6 +265,19 @@ type WithMyMemberIdProps = MyAccountProps & {
 };
 
 function WithMyMemberIdInner(p: WithMyMemberIdProps) {
+  if (p.allAccounts && !Object.keys(p.allAccounts).length) {
+    return (
+      <Message warning className="JoyMainStatus">
+        <Message.Header>Please create a key to get started.</Message.Header>
+        <div style={{ marginTop: '1rem' }}>
+          <Link to={`/accounts`} className="ui button orange">
+            Create key
+          </Link>
+        </div>
+      </Message>
+    );
+  }
+
   if (p.memberIdsByRootAccountId && p.memberIdsByControllerAccountId && p.paidTermsIds) {
     if (p.paidTermsIds.length) {
       // let member_ids = p.memberIdsByRootAccountId.slice(); // u8a.subarray is not a function!!
@@ -276,17 +289,16 @@ function WithMyMemberIdInner(p: WithMyMemberIdProps) {
       console.error('Active paid membership terms is empty');
     }
   }
+
   return <em>Loading...</em>;
 }
 
-const WithMyMemberId = withOnlyMembers(
-  withMyAccount(
-    withCalls<WithMyMemberIdProps>(
-      queryMembershipToProp('memberIdsByRootAccountId', 'myAddress'),
-      queryMembershipToProp('memberIdsByControllerAccountId', 'myAddress'),
-      queryMembershipToProp('activePaidMembershipTerms', { propName: 'paidTermsIds' })
-    )(WithMyMemberIdInner)
-  )
+const WithMyMemberId = withMyAccount(
+  withCalls<WithMyMemberIdProps>(
+    queryMembershipToProp('memberIdsByRootAccountId', 'myAddress'),
+    queryMembershipToProp('memberIdsByControllerAccountId', 'myAddress'),
+    queryMembershipToProp('activePaidMembershipTerms', { propName: 'paidTermsIds' })
+  )(WithMyMemberIdInner)
 );
 
 export default WithMyMemberId;

packages/joy-storage/src/index.tsx

@@ -74,7 +74,6 @@ class App extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { allAccounts } = this.props;
     const { tabs } = this.state;
     const { basePath } = this.props;
 

packages/joy-utils/src/MyAccount.tsx

@@ -273,8 +273,9 @@ export const withMyAccount = <P extends MyAccountProps>(Component: React.Compone
 
 function OnlyMembers<P extends MyAccountProps>(Component: React.ComponentType<P>) {
   return function(props: P) {
-    const { myMemberIdChecked, iAmMember } = props;
-    if (!myMemberIdChecked) {
+    const { myMemberIdChecked, iAmMember, allAccounts } = props;
+
+    if (allAccounts && !Object.keys(allAccounts).length) {
       return (
         <Message warning className="JoyMainStatus">
           <Message.Header>Please create a key to get started.</Message.Header>
@@ -285,6 +286,10 @@ function OnlyMembers<P extends MyAccountProps>(Component: React.ComponentType<P>
           </div>
         </Message>
       );
+    }
+
+    if (!myMemberIdChecked) {
+      return <em>Loading...</em>;
     } else if (iAmMember) {
       return <Component {...props} />;
     } else {