Merge pull request #459 from Lezek123/reintroduce-tabs-continuation

Reintorduce explorer and bring back to "light"/"full" mode

packages/app-staking/src/Overview/CurrentList.tsx

@@ -85,11 +85,7 @@ function CurrentList(props: Props): React.ReactElement<Props> {
 
   return (
     <div>
-      <FilterOverlay
-        style={{
-          top: myAccounts.length ? '5.5rem' : '5px'
-        }}
-      >
+      <FilterOverlay>
         <Dropdown
           onChange={setFilter}
           options={[

packages/apps-routing/src/index.ts

@@ -4,7 +4,7 @@
 
 import { Routing, Routes } from './types';
 
-// import appSettings from '@polkadot/joy-settings/';
+import appSettings from '@polkadot/joy-settings/';
 
 import election from './joy-election';
 import forum from './joy-forum';
@@ -14,7 +14,7 @@ import members from './joy-members';
 import proposals from './joy-proposals';
 import roles from './joy-roles';
 import storageRoles from './joy-storage';
-import pages from './joy-pages';
+// import pages from './joy-pages';
 
 // import template from './123code';
 import accounts from './accounts';
@@ -24,20 +24,27 @@ import addressbook from './addressbook';
 // import council from './council';
 // import dashboard from './dashboard';
 // import democracy from './democracy';
-// import explorer from './explorer';
+import explorer from './explorer';
 import extrinsics from './extrinsics';
 // import genericAsset from './generic-asset';
-// import js from './js';
+import js from './js';
 // import parachains from './parachains';
 import settings from './settings';
 import staking from './staking';
 import storage from './storage';
 import sudo from './sudo';
-// import toolbox from './toolbox';
+import toolbox from './toolbox';
 import transfer from './transfer';
 // import treasury from './treasury';
 
-const routes: Routes = ([] as Routes).concat(
+let routes: Routes = ([] as Routes);
+
+if (appSettings.isFullMode) {
+  routes = routes.concat(explorer);
+}
+
+// Basic routes
+routes = routes.concat(
   staking,
   roles,
   storageRoles,
@@ -51,14 +58,24 @@ const routes: Routes = ([] as Routes).concat(
   null,
   election,
   proposals,
-  null,
-  storage,
-  extrinsics,
-  sudo,
-  settings,
-  null,
-  pages
+  null
 );
+
+if (appSettings.isFullMode) {
+  routes = routes.concat(
+    storage,
+    extrinsics,
+    sudo,
+    js,
+    toolbox,
+    null
+  )
+}
+
+routes = routes.concat(
+  settings
+);
+
 const setup: Routing = {
   default: 'staking',
   routes

packages/apps/src/SideBar/index.tsx

@@ -33,7 +33,7 @@ type OuterLinkProps = {
   icon?: SemanticICONS;
 };
 
-function OuterLink({ url, title, icon = 'external alternate' }: OuterLinkProps) {
+export function OuterLink({ url, title, icon = 'external alternate' }: OuterLinkProps) {
   return (
     <Menu.Item className="apps--SideBar-Item">
       <a className="apps--SideBar-Item-NavLink" href={url} target="_blank">
@@ -44,68 +44,6 @@ function OuterLink({ url, title, icon = 'external alternate' }: OuterLinkProps)
   );
 }
 
-/*
-interface State {
-  modals: Record<string, boolean>;
-}
-
-class SideBar extends React.PureComponent<Props, State> {
-  public state: State;
-
-  public constructor (props: Props) {
-    super(props);
-
-    // setup modals for each of the actual modal routes
-    this.state = {
-      modals: routing.routes.reduce((result, route): Record<string, boolean> => {
-        if (route && route.Modal) {
-          result[route.name] = false;
-        }
-
-        return result;
-      }, { network: false } as unknown as Record<string, boolean>)
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { className, handleResize, isCollapsed, toggleMenu, menuOpen } = this.props;
-
-    return (
-      <Responsive
-        onUpdate={handleResize}
-        className={classes(className, 'apps-SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
-      >
-        <ChainImg
-          className={`toggleImg ${menuOpen ? 'closed' : 'open delayed'}`}
-          onClick={toggleMenu}
-        />
-        {this.renderModals()}
-        {this.state.modals.network && (
-          <NetworkModal onClose={this.toggleNetworkModal}/>
-        )}
-        <div className='apps--SideBar'>
-          <Menu
-            secondary
-            vertical
-          >
-            <div className='apps-SideBar-Scroll'>
-              {this.renderJoystreamLogo()}
-              {this.renderRoutes()}
-              <Menu.Divider hidden />
-
-              <OuterLink url='https://testnet.joystream.org/faucet' title='Free Tokens' />
-              <OuterLink url='https://blog.joystream.org/acropolis-incentives/' title='Earn Monero' />
-              <Menu.Divider hidden />
-              {
-                isCollapsed
-                  ? undefined
-                  : <NodeInfo />
-              }
-            </div>
-            {this.renderCollapse()}
-          </Menu>
-          <Responsive minWidth={SIDEBAR_MENU_THRESHOLD}>
-*/
 function SideBar({
   className,
   collapse,
@@ -163,10 +101,10 @@ function SideBar({
                   <Menu.Divider hidden key={index} />
                 )
             )}
-            <Menu.Divider hidden />
+            {/* <Menu.Divider hidden />
             <OuterLink url='https://joystream.org/testnet' title='Tokenomics' />
             <OuterLink url='https://blog.joystream.org/constantinople-incentives/' title='Earn Monero' />
-            <Menu.Divider hidden />
+            <Menu.Divider hidden /> */}
           </div>
           <Responsive
             minWidth={SIDEBAR_MENU_THRESHOLD}

packages/apps/src/index.tsx

@@ -33,6 +33,13 @@ const rootElement = document.getElementById(rootId);
       apiUrl
     });
 
+    window.location.reload();
+  },
+  setAdvancedUI: (flag: boolean) => {
+    settings.set({
+      uiMode: flag ? 'full' : 'light'
+    });
+
     window.location.reload();
   }
 };

packages/joy-settings/src/defaults/ui.ts

@@ -8,9 +8,7 @@ import { isPolkadot } from './type';
 
 const LANGUAGE_DEFAULT = 'default';
 
-const UIMODE_DEFAULT = !isPolkadot && typeof window !== 'undefined' && window.location.host.includes('ui-light')
-  ? 'light'
-  : 'full';
+const UIMODE_DEFAULT = 'light';
 
 const UIMODES: Option[] = [
   {

packages/react-components/src/FilterOverlay.tsx

@@ -6,6 +6,7 @@ import { BareProps } from './types';
 
 import React from 'react';
 import styled from 'styled-components';
+import { useMyMembership } from '@polkadot/joy-utils/MyMembershipContext';
 
 import media from './media';
 
@@ -13,7 +14,10 @@ interface Props extends BareProps {
   children: React.ReactNode;
 }
 
-function FilterOverlay({ children, className, style }: Props): React.ReactElement<Props> {
+function FilterOverlay({ children, className }: Props): React.ReactElement<Props> {
+  const { allAccounts } = useMyMembership();
+  const hasAccount = allAccounts && Object.keys(allAccounts).length;
+  const style = { top: hasAccount ? '5.5rem' : '5px' };
   return (
     <div className={className} style={style}>
       {children}