From 96f718cd75d45fb97c00eab076a465c681d0727f Mon Sep 17 00:00:00 2001
From: Eswara Sai <eswarasai.v@gmail.com>
Date: Mon, 23 Sep 2019 15:55:13 +0530
Subject: [PATCH] Added network modal to select chain (#1642)

* Added network modal to change selection

* Added toggleNetworkModal function
---
 packages/app-settings/src/General.tsx | 115 +++++++++++++++-----------
 packages/apps/src/SideBar/SideBar.css |   1 +
 packages/apps/src/SideBar/index.tsx   |  32 +++++--
 packages/apps/src/modals/Network.tsx  |  35 ++++++++
 4 files changed, 127 insertions(+), 56 deletions(-)
 create mode 100644 packages/apps/src/modals/Network.tsx

diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index 449600286f..8b7987040e 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -2,22 +2,22 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { I18nProps } from '@polkadot/react-components/types';
 import { Option } from './types';
 
 import queryString from 'query-string';
 import React, { useEffect, useState } from 'react';
 import { isLedgerCapable } from '@polkadot/react-api';
 import { Button, Dropdown } from '@polkadot/react-components';
-import { ActionStatus } from '@polkadot/react-components/Status/types';
 import uiSettings from '@polkadot/ui-settings';
 
 import translate from './translate';
 import { createIdenticon, createOption, save, saveAndReload } from './util';
 import SelectUrl from './SelectUrl';
 
-interface Props extends AppProps, I18nProps {
-  onStatusChange: (status: ActionStatus) => void;
+interface Props extends I18nProps{
+  isModalContent?: boolean;
+  onClose?: () => void;
 }
 
 // check for a ledger=... string, acivate
@@ -28,7 +28,7 @@ const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOpti
 const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
 const ledgerConnOptions = uiSettings.availableLedgerConn;
 
-function General ({ className, t }: Props): React.ReactElement<Props> {
+function General ({ className, isModalContent, onClose, t }: Props): React.ReactElement<Props> {
   // tri-state: null = nothing  changed, false = no reload, true = reload required
   const [changed, setChanged] = useState<boolean | null>(null);
   const [settings, setSettings] = useState(uiSettings.get());
@@ -61,53 +61,68 @@ function General ({ className, t }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <SelectUrl onChange={_onChangeApiUrl} />
-      <div className='ui--row'>
-        <Dropdown
-          defaultValue={prefix}
-          help={t('Override the default ss58 prefix for address generation')}
-          label={t('address prefix')}
-          onChange={_onChangePrefix}
-          options={prefixOptions}
-        />
-      </div>
-      <div className='ui--row'>
-        <Dropdown
-          defaultValue={icon}
-          help={t('Override the default identity icon display with a specific theme')}
-          label={t('default icon theme')}
-          onChange={_onChangeIcon}
-          options={iconOptions}
-        />
-      </div>
-      <div className='ui--row'>
-        <Dropdown
-          defaultValue={uiMode}
-          help={t('Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)')}
-          label={t('interface operation mode')}
-          onChange={_onChangeUiMode}
-          options={uiSettings.availableUIModes}
-        />
-      </div>
-      {WITH_LEDGER && isLedgerCapable() && (
-        <div className='ui--row'>
-          <Dropdown
-            defaultValue={ledgerConn}
-            help={t('Manage your connection to Ledger S')}
-            label={t('manage hardware connections')}
-            onChange={_onChangeLedgerConn}
-            options={ledgerConnOptions}
-          />
-        </div>
+      {!isModalContent && (
+        <>
+          <div className='ui--row'>
+            <Dropdown
+              defaultValue={prefix}
+              help={t('Override the default ss58 prefix for address generation')}
+              label={t('address prefix')}
+              onChange={_onChangePrefix}
+              options={prefixOptions}
+            />
+          </div>
+          <div className='ui--row'>
+            <Dropdown
+              defaultValue={icon}
+              help={t('Override the default identity icon display with a specific theme')}
+              label={t('default icon theme')}
+              onChange={_onChangeIcon}
+              options={iconOptions}
+            />
+          </div>
+          <div className='ui--row'>
+            <Dropdown
+              defaultValue={uiMode}
+              help={t('Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)')}
+              label={t('interface operation mode')}
+              onChange={_onChangeUiMode}
+              options={uiSettings.availableUIModes}
+            />
+          </div>
+          {WITH_LEDGER && isLedgerCapable() && (
+            <div className='ui--row'>
+              <Dropdown
+                defaultValue={ledgerConn}
+                help={t('Manage your connection to Ledger S')}
+                label={t('manage hardware connections')}
+                onChange={_onChangeLedgerConn}
+                options={ledgerConnOptions}
+              />
+            </div>
+          )}
+          <div className='ui--row'>
+            <Dropdown
+              defaultValue={i18nLang}
+              isDisabled
+              label={t('default interface language')}
+              options={uiSettings.availableLanguages}
+            />
+          </div>
+        </>
       )}
-      <div className='ui--row'>
-        <Dropdown
-          defaultValue={i18nLang}
-          isDisabled
-          label={t('default interface language')}
-          options={uiSettings.availableLanguages}
-        />
-      </div>
       <Button.Group>
+        {isModalContent && (
+          <>
+            <Button
+              isNegative
+              label={t('Cancel')}
+              labelIcon='cancel'
+              onClick={onClose}
+            />
+            <Button.Or />
+          </>
+        )}
         <Button
           isDisabled={changed === null}
           isPrimary
diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css
index fb584e6b1c..b797e5b5f9 100644
--- a/packages/apps/src/SideBar/SideBar.css
+++ b/packages/apps/src/SideBar/SideBar.css
@@ -88,6 +88,7 @@
     }
 
     .apps--SideBar-logo {
+      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx
index d24aba6168..574e3cf74f 100644
--- a/packages/apps/src/SideBar/index.tsx
+++ b/packages/apps/src/SideBar/index.tsx
@@ -22,6 +22,7 @@ import { BestNumber, Chain } from '@polkadot/react-query';
 import translate from '../translate';
 import Item from './Item';
 import NodeInfo from './NodeInfo';
+import NetworkModal from '../modals/Network';
 
 interface Props extends ApiProps, I18nProps {
   className?: string;
@@ -50,7 +51,7 @@ class SideBar extends React.PureComponent<Props, State> {
         }
 
         return result;
-      }, {} as unknown as Record<string, boolean>)
+      }, { network: false } as unknown as Record<string, boolean>)
     };
   }
 
@@ -67,6 +68,9 @@ class SideBar extends React.PureComponent<Props, State> {
           onClick={toggleMenu}
         />
         {this.renderModals()}
+        {this.state.modals.network && (
+          <NetworkModal onClose={this.toggleNetworkModal}/>
+        )}
         <div className='apps--SideBar'>
           <Menu
             secondary
@@ -120,7 +124,10 @@ class SideBar extends React.PureComponent<Props, State> {
     const { api, isApiReady } = this.props;
 
     return (
-      <div className='apps--SideBar-logo'>
+      <div
+        className='apps--SideBar-logo'
+        onClick={this.toggleNetworkModal}
+      >
         <ChainImg />
         <div className='info'>
           <Chain className='chain' />
@@ -218,13 +225,26 @@ class SideBar extends React.PureComponent<Props, State> {
 
   private openModal = (name: string): () => void => {
     return (): void => {
-      this.setState(({ modals }): State => ({
+      this.setState(({ modals }): State => {
+        return {
+          modals: {
+            ...modals,
+            [name]: true
+          }
+        };
+      });
+    };
+  }
+
+  private toggleNetworkModal = (): void => {
+    this.setState(({ modals }): State => {
+      return {
         modals: {
           ...modals,
-          [name]: true
+          network: !modals.network
         }
-      }));
-    };
+      };
+    });
   }
 }
 
diff --git a/packages/apps/src/modals/Network.tsx b/packages/apps/src/modals/Network.tsx
new file mode 100644
index 0000000000..7f697a8ab7
--- /dev/null
+++ b/packages/apps/src/modals/Network.tsx
@@ -0,0 +1,35 @@
+// Copyright 2017-2019 @polkadot/app-accounts 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/react-components/types';
+
+import React from 'react';
+import { Modal } from '@polkadot/react-components';
+import General from '@polkadot/app-settings/General';
+
+import translate from '../translate';
+
+interface Props extends I18nProps {
+  onClose: () => void;
+}
+
+function NetworkModal ({ className, onClose, t }: Props): React.ReactElement<Props> {
+  return (
+    <Modal
+      className={className}
+      dimmer='inverted'
+      open
+    >
+      <Modal.Header>{t('Select Network')}</Modal.Header>
+      <Modal.Content>
+        <General
+          isModalContent
+          onClose={onClose}
+        />
+      </Modal.Content>
+    </Modal>
+  );
+}
+
+export default translate(NetworkModal);