Merge pull request #2307 from Emurgo/add-layout-layer-for-revamp

Add layout layer for revamp

packages/yoroi-extension/app/App.js

@@ -33,6 +33,7 @@ import CrashPage from './containers/CrashPage';
 import { Logger, } from './utils/logging';
 import { SimpleSkins } from 'react-polymorph/lib/skins/simple';
 import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
+import { LayoutProvider } from './themes/context/layout';
 
 // https://github.com/yahoo/react-intl/wiki#loading-locale-data
 addLocaleData([
@@ -105,20 +106,21 @@ class App extends Component<Props, State> {
 
     return (
       <div style={{ height: '100%' }}>
-        <ThemeManager variables={themeVars} />
-
-        {/* Automatically pass a theme prop to all components in this subtree. */}
-        <ThemeProvider
-          key={currentTheme}
-          theme={yoroiPolymorphTheme}
-          skins={SimpleSkins}
-          variables={SimpleDefaults}
-          themeOverrides={themeOverrides(currentTheme)}
-        >
-          <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
-            {this.getContent()}
-          </IntlProvider>
-        </ThemeProvider>
+        <LayoutProvider>
+          <ThemeManager variables={themeVars} />
+          {/* Automatically pass a theme prop to all components in this subtree. */}
+          <ThemeProvider
+            key={currentTheme}
+            theme={yoroiPolymorphTheme}
+            skins={SimpleSkins}
+            variables={SimpleDefaults}
+            themeOverrides={themeOverrides(currentTheme)}
+          >
+            <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
+              {this.getContent()}
+            </IntlProvider>
+          </ThemeProvider>
+        </LayoutProvider>
       </div>
     );
   }

packages/yoroi-extension/app/containers/SidebarContainer.js

@@ -1,5 +1,5 @@
 // @flow
-import type { Node } from 'react';
+import type { ComponentType, Node } from 'react';
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { computed } from 'mobx';
@@ -8,23 +8,32 @@ import type { InjectedOrGenerated } from '../types/injectedPropsType';
 import { allCategories, allCategoriesRevamp } from '../stores/stateless/sidebarCategories';
 import { PublicDeriver } from '../api/ada/lib/storage/models/PublicDeriver';
 import SidebarRevamp from '../components/topbar/SidebarRevamp';
+import { withLayout } from '../themes/context/layout';
+import type { LayoutComponentMap } from '../themes/context/layout';
 
 export type GeneratedData = typeof SidebarContainer.prototype.generated;
 
-@observer
-export default class SidebarContainer extends Component<InjectedOrGenerated<GeneratedData>> {
+type Props = {|
+  ...InjectedOrGenerated<GeneratedData>,
+|};
+type InjectedProps = {|
+  +selectedLayout: string,
+  +renderLayoutComponent: LayoutComponentMap => Node,
+|};
+type AllProps = {| ...Props, ...InjectedProps |};
 
+@observer
+class SidebarContainer extends Component<AllProps> {
   toggleSidebar: void => Promise<void> = async () => {
     await this.generated.actions.profile.toggleSidebar.trigger();
-  }
+  };
 
   render(): Node {
     const { stores } = this.generated;
     const { profile } = stores;
-    // TODO: Remove hardcoded variable
-    const isRevampTheme = false;
-    return isRevampTheme ? (
-      <SidebarRevamp
+
+    const SidebarComponent = (
+      <Sidebar
         onCategoryClicked={category => {
           this.generated.actions.router.goToRoute.trigger({
             route: category.route,
@@ -33,16 +42,20 @@ export default class SidebarContainer extends Component<InjectedOrGenerated<Gene
         isActiveCategory={category =>
           this.generated.stores.app.currentRoute.startsWith(category.route)
         }
-        categories={allCategoriesRevamp.filter(category =>
+        categories={allCategories.filter(category =>
           category.isVisible({
             hasAnyWallets: this.generated.stores.wallets.hasAnyWallets,
             selected: this.generated.stores.wallets.selected,
             currentRoute: this.generated.stores.app.currentRoute,
           })
         )}
+        onToggleSidebar={this.toggleSidebar}
+        isSidebarExpanded={profile.isSidebarExpanded}
       />
-    ) : (
-      <Sidebar
+    );
+
+    const SidebarRevampComponent = (
+      <SidebarRevamp
         onCategoryClicked={category => {
           this.generated.actions.router.goToRoute.trigger({
             route: category.route,
@@ -51,45 +64,48 @@ export default class SidebarContainer extends Component<InjectedOrGenerated<Gene
         isActiveCategory={category =>
           this.generated.stores.app.currentRoute.startsWith(category.route)
         }
-        categories={allCategories.filter(category =>
+        categories={allCategoriesRevamp.filter(category =>
           category.isVisible({
             hasAnyWallets: this.generated.stores.wallets.hasAnyWallets,
             selected: this.generated.stores.wallets.selected,
             currentRoute: this.generated.stores.app.currentRoute,
           })
         )}
-        onToggleSidebar={this.toggleSidebar}
-        isSidebarExpanded={profile.isSidebarExpanded}
       />
     );
+
+    return this.props.renderLayoutComponent({
+      CLASSIC: SidebarComponent,
+      REVAMP: SidebarRevampComponent,
+    });
   }
 
   @computed get generated(): {|
     actions: {|
       profile: {|
         toggleSidebar: {|
-          trigger: (params: void) => Promise<void>
-        |}
+          trigger: (params: void) => Promise<void>,
+        |},
       |},
       router: {|
         goToRoute: {|
           trigger: (params: {|
             publicDeriver?: null | PublicDeriver<>,
             params?: ?any,
-            route: string
-          |}) => void
-        |}
+            route: string,
+          |}) => void,
+        |},
       |},
     |},
     stores: {|
       app: {| currentRoute: string |},
       profile: {| isSidebarExpanded: boolean |},
       wallets: {|
         hasAnyWallets: boolean,
-        selected: null | PublicDeriver<>
-      |}
-    |}
-    |} {
+        selected: null | PublicDeriver<>,
+      |},
+    |},
+  |} {
     if (this.props.generated !== undefined) {
       return this.props.generated;
     }
@@ -121,3 +137,4 @@ export default class SidebarContainer extends Component<InjectedOrGenerated<Gene
     });
   }
 }
+export default (withLayout(SidebarContainer): ComponentType<Props>);

packages/yoroi-extension/app/stores/stateless/sidebarCategories.js

@@ -116,65 +116,62 @@ export const allCategoriesRevamp: Array<SidebarCategoryRevamp> = [
     route: ROUTES.MY_WALLETS,
     icon: walletIcon,
     label: globalMessages.walletLabel,
-    isVisible: request =>
-      request.hasAnyWallets &&
-      request.selected == null &&
-      matchRoute(ROUTES.WALLETS.ADD, request.currentRoute) === false,
+    isVisible: _request => true,
   },
   {
     className: 'staking',
     route: '/staking',
     icon: stakingIcon,
     label: globalMessages.sidebarStaking,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'assets',
     route: '/assets',
     icon: assetsIcon,
     label: globalMessages.sidebarAssets,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'voting',
     route: '/voting',
     icon: votingIcon,
     label: globalMessages.sidebarVoting,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'swap',
     route: '/swap',
     icon: swapIcon,
     label: globalMessages.sidebarSwap,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'settings',
     route: '/settings',
     icon: settingIcon,
     label: globalMessages.sidebarSettings,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'faq',
     route: 'https://yoroi-wallet.com/faq',
     icon: faqIcon,
     label: globalMessages.sidebarFaq,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'new-updates',
     route: '/new-updates',
     icon: newUpdatesIcon,
     label: globalMessages.sidebarNewUpdates,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
   {
     className: 'feedback',
     route: '/feedback',
     icon: feedbackIcon,
     label: globalMessages.sidebarFeedback,
-    isVisible: request => request.hasAnyWallets,
+    isVisible: _request => true,
   },
 ];