neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added network modal to select chain (#1642)

Browse Source 
* Added network modal to change selection

* Added toggleNetworkModal function
This commit is contained in:
Eswara Sai 2019-09-23 15:55:13 +05:30 committed by Jaco Greeff
parent 29476670be
commit 96f718cd75
4 changed files with 127 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
packages/app-settings/src/General.tsx
View File

@ -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

1
packages/apps/src/SideBar/SideBar.css
View File

@ -88,6 +88,7 @@
}
.apps--SideBar-logo {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;

32
packages/apps/src/SideBar/index.tsx
View File

@ -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
}
}));
};
};
});
}
}

35
packages/apps/src/modals/Network.tsx Normal file
View File

@ -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);