Add Save/Save & Reload combo for settings (#1619)
* Add Save/Save & Reload combo for settings * Disable ledger with flag (WIP, UI components added) * Small lint fixes
This commit is contained in:
Jaco Greeff
GitHub
parent
528b791e44
commit
16d7cec58a
@ -12,7 +12,7 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.6.0",
|
||||
"@polkadot/react-components": "^0.36.0-beta.11",
|
||||
"@polkadot/react-qr": "^0.45.0-beta.7",
|
||||
"@polkadot/react-qr": "^0.45.0-beta.8",
|
||||
"@types/file-saver": "^2.0.0",
|
||||
"@types/yargs": "^13.0.2",
|
||||
"babel-plugin-module-resolver": "^3.1.1",
|
||||
|
||||
@ -5,81 +5,117 @@
|
||||
import { AppProps, I18nProps } from '@polkadot/react-components/types';
|
||||
import { Option } from './types';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
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, saveAndReload } from './util';
|
||||
import { createIdenticon, createOption, save, saveAndReload } from './util';
|
||||
import SelectUrl from './SelectUrl';
|
||||
|
||||
interface Props extends AppProps, I18nProps {
|
||||
onStatusChange: (status: ActionStatus) => void;
|
||||
}
|
||||
|
||||
const WITH_LEDGER = false;
|
||||
|
||||
const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
|
||||
const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
|
||||
const ledgerConnOptions = uiSettings.availableLedgerConn;
|
||||
|
||||
function General ({ className, 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());
|
||||
const { icon, i18nLang, prefix, uiMode } = settings;
|
||||
|
||||
useEffect((): void => {
|
||||
const prev = uiSettings.get();
|
||||
const hasChanges = Object.entries(settings).some(([key, value]): boolean => (prev as any)[key] !== value);
|
||||
|
||||
if (hasChanges) {
|
||||
setChanged(prev.apiUrl !== settings.apiUrl);
|
||||
} else {
|
||||
setChanged(null);
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
const _onChangeApiUrl = (apiUrl: string): void => setSettings({ ...settings, apiUrl });
|
||||
const _onChangeIcon = (icon: string): void => setSettings({ ...settings, icon });
|
||||
const _onChangeLedgerConn = (ledgerConn: string): void => setSettings({ ...settings, ledgerConn });
|
||||
const _onChangePrefix = (prefix: number): void => setSettings({ ...settings, prefix });
|
||||
const _onChangeUiMode = (uiMode: string): void => setSettings({ ...settings, uiMode });
|
||||
const _saveAndReload = (): void => saveAndReload(settings);
|
||||
const _save = (): void => {
|
||||
save(settings);
|
||||
setChanged(null);
|
||||
};
|
||||
|
||||
const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<SelectUrl onChange={_onChangeApiUrl} />
|
||||
<div className='ui--row'>
|
||||
<div className='ui--medium'>
|
||||
<Dropdown
|
||||
defaultValue={prefix}
|
||||
help={t('Override the default ss58 prefix for address generation')}
|
||||
label={t('address prefix')}
|
||||
onChange={_onChangePrefix}
|
||||
options={prefixOptions}
|
||||
/>
|
||||
</div>
|
||||
<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'>
|
||||
<div className='medium'>
|
||||
<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='medium'>
|
||||
<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>
|
||||
<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'>
|
||||
<div className='full'>
|
||||
<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 && (
|
||||
<div className='ui--row'>
|
||||
<Dropdown
|
||||
defaultValue={i18nLang}
|
||||
isDisabled
|
||||
label={t('default interface language')}
|
||||
options={uiSettings.availableLanguages}
|
||||
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>
|
||||
<Button.Group>
|
||||
<Button
|
||||
isDisabled={changed === null}
|
||||
isPrimary
|
||||
onClick={_saveAndReload}
|
||||
label={t('Save & Reload')}
|
||||
onClick={
|
||||
changed
|
||||
? _saveAndReload
|
||||
: _save
|
||||
}
|
||||
label={
|
||||
changed
|
||||
? t('Save & Reload')
|
||||
: t('Save')
|
||||
}
|
||||
/>
|
||||
</Button.Group>
|
||||
</div>
|
||||
|
||||
@ -55,12 +55,12 @@ export function createIdenticon ({ info, text, value }: SetOption, overrides: st
|
||||
};
|
||||
}
|
||||
|
||||
export function saveAndReload (settings: SettingsStruct | null): void {
|
||||
if (!settings) {
|
||||
return;
|
||||
}
|
||||
|
||||
export function save (settings: SettingsStruct): void {
|
||||
uiSettings.set(settings);
|
||||
}
|
||||
|
||||
export function saveAndReload (settings: SettingsStruct): void {
|
||||
save(settings);
|
||||
|
||||
// HACK This is terribe, but since the API needs to re-connect, but since
|
||||
// the API does not yet handle re-connections properly, it is what it is
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
"@babel/runtime": "^7.6.0",
|
||||
"@polkadot/react-components": "^0.36.0-beta.11",
|
||||
"@polkadot/react-signer": "^0.36.0-beta.11",
|
||||
"@polkadot/ui-assets": "^0.45.0-beta.7",
|
||||
"@polkadot/ui-assets": "^0.45.0-beta.8",
|
||||
"query-string": "^6.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.6.0",
|
||||
"@polkadot/api": "^0.93.0-beta.3",
|
||||
"@polkadot/extension-dapp": "^0.11.0-beta.4",
|
||||
"@polkadot/extension-dapp": "^0.11.0-beta.5",
|
||||
"edgeware-node-types": "^1.0.10",
|
||||
"rxjs-compat": "^6.5.3"
|
||||
}
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
"@babel/runtime": "^7.6.0",
|
||||
"@polkadot/keyring": "^1.4.1",
|
||||
"@polkadot/react-api": "^0.36.0-beta.11",
|
||||
"@polkadot/react-identicon": "^0.45.0-beta.7",
|
||||
"@polkadot/react-identicon": "^0.45.0-beta.8",
|
||||
"@polkadot/react-query": "^0.36.0-beta.11",
|
||||
"@polkadot/ui-keyring": "^0.45.0-beta.7",
|
||||
"@polkadot/ui-settings": "^0.45.0-beta.7",
|
||||
"@polkadot/ui-keyring": "^0.45.0-beta.8",
|
||||
"@polkadot/ui-settings": "^0.45.0-beta.8",
|
||||
"@types/chart.js": "^2.8.5",
|
||||
"@types/i18next": "^13.0.0",
|
||||
"@types/react-copy-to-clipboard": "^4.2.6",
|
||||
|
||||
@ -12,6 +12,6 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.6.0",
|
||||
"@polkadot/react-components": "^0.36.0-beta.11",
|
||||
"@polkadot/react-qr": "^0.45.0-beta.7"
|
||||
"@polkadot/react-qr": "^0.45.0-beta.8"
|
||||
}
|
||||
}
|
||||
|
||||
70
yarn.lock
70
yarn.lock
@ -2053,18 +2053,18 @@
|
||||
typescript "^3.6.3"
|
||||
vuepress "^1.0.4"
|
||||
|
||||
"@polkadot/extension-dapp@^0.11.0-beta.4":
|
||||
version "0.11.0-beta.4"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.11.0-beta.4.tgz#80fc30194c6ad150a991842c1fa8723ef9453563"
|
||||
integrity sha512-9zJiFmuW9APO+jee9tTBBzIzTzsCiCS6CuZ+FxwDqnkZtMIqG857Wp+BkCj6qSxPGyXKbsC46nT0KhUdxXUxXA==
|
||||
"@polkadot/extension-dapp@^0.11.0-beta.5":
|
||||
version "0.11.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.11.0-beta.5.tgz#8b27cff2872d1bd28f98a8ebe1b3375a8e958536"
|
||||
integrity sha512-TBC+nAEtRuDCtdOdTVxmjXqqhTpWVn1uaJ7Kwkl5iUYUF7oJfNfj/QRdj841weJo4/pvSLgbr5/q0xSwoVlbMQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@polkadot/extension-inject" "^0.11.0-beta.4"
|
||||
"@polkadot/extension-inject" "^0.11.0-beta.5"
|
||||
|
||||
"@polkadot/extension-inject@^0.11.0-beta.4":
|
||||
version "0.11.0-beta.4"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.11.0-beta.4.tgz#3e4d95270c04b34b92536a2f68609a054076e31c"
|
||||
integrity sha512-r1KfWmxzPEW+37sfQOdeXPVn0tO4mpDNc3YRKfO+LKgMYW/y5f2QkrSRWvA97mXwcOjPnodxBN/LVRp1K5fP/Q==
|
||||
"@polkadot/extension-inject@^0.11.0-beta.5":
|
||||
version "0.11.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.11.0-beta.5.tgz#43e15a10c97d491eea28d6169209a37079dfe14a"
|
||||
integrity sha512-SvLIY/hnJ7lZ2qb1dvspL23/L/CdoY+BRaCl3md21h6NTPTk3GQI4sGYZFGnbJNG5lu3Gvxcz8lCGorrFI/NBg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
|
||||
@ -2084,14 +2084,14 @@
|
||||
"@polkadot/util" "^1.4.1"
|
||||
"@polkadot/util-crypto" "^1.4.1"
|
||||
|
||||
"@polkadot/react-identicon@^0.45.0-beta.7":
|
||||
version "0.45.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.45.0-beta.7.tgz#80e33791168c749310f2e43124f5fcad7291a2bf"
|
||||
integrity sha512-A/Np0aeQklVLmFPRm7Yq6HS5IkcFJY58gt5beRhTMCeyFUVDYcJoS1rGZ9JRto3/tXWBwwFjKx6h2O20Zq1AcA==
|
||||
"@polkadot/react-identicon@^0.45.0-beta.8":
|
||||
version "0.45.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.45.0-beta.8.tgz#03e362b5864b0ee41670e77da7c86aae7d9cc5b5"
|
||||
integrity sha512-Nc0yPU4CV5prtob0AQ0J+PTA+O/OjFnXkyHuKlRqGFoTvlKc8s63ysCbcAVTHaUwQSbe7RndXVNwnQsNEhCbmQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@polkadot/ui-settings" "^0.45.0-beta.7"
|
||||
"@polkadot/ui-shared" "^0.45.0-beta.7"
|
||||
"@polkadot/ui-settings" "^0.45.0-beta.8"
|
||||
"@polkadot/ui-shared" "^0.45.0-beta.8"
|
||||
"@types/color" "^3.0.0"
|
||||
"@types/react-copy-to-clipboard" "^4.2.6"
|
||||
color "^3.1.2"
|
||||
@ -2099,10 +2099,10 @@
|
||||
react-copy-to-clipboard "^5.0.1"
|
||||
styled-components "^4.3.1"
|
||||
|
||||
"@polkadot/react-qr@^0.45.0-beta.7":
|
||||
version "0.45.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/react-qr/-/react-qr-0.45.0-beta.7.tgz#d64bf9a1b2a6b27f757ced37fddaf8d813262faf"
|
||||
integrity sha512-zy3xYv9EqtNyWFqQApNvHfTpxCC1mhsf+kRBLIjSnRrNWseDFA0xoc6W4aTaMyEuWueqLlQJrtpCemSvBfF97A==
|
||||
"@polkadot/react-qr@^0.45.0-beta.8":
|
||||
version "0.45.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/react-qr/-/react-qr-0.45.0-beta.8.tgz#94dadab87d0e865ce03c7c5fcdbfc89cc74b6dd4"
|
||||
integrity sha512-6OrJNuN2kEC5Lyv7IN8Ra4Z+Nu0/yzh9G6I1owdY46ZDX9ds2toCIV4GzztbK5Bhsnx76HKGVdkPaazRXzlrPA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@types/react-qr-reader" "^2.1.1"
|
||||
@ -2153,17 +2153,17 @@
|
||||
"@types/memoizee" "^0.4.3"
|
||||
memoizee "^0.4.14"
|
||||
|
||||
"@polkadot/ui-assets@^0.45.0-beta.7":
|
||||
version "0.45.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.45.0-beta.7.tgz#e94be996c876b80226ef6de77c12af16810ebf55"
|
||||
integrity sha512-wy67cKAhXmUwSP3Lb8fzLFXF7YDU0blLI8IJyL1N8TuiVZZibpeAbmFFuFLYkW0zudw+4vJZNd7w863AbQ2mHw==
|
||||
"@polkadot/ui-assets@^0.45.0-beta.8":
|
||||
version "0.45.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.45.0-beta.8.tgz#9a7b93147435a81be35e9c9ea079cbfac44510c9"
|
||||
integrity sha512-kZciq3a6p69+SCxV/Gf7U6VHEslV8jhxVKMSZMLJV9YSCfEeI97/SB9V3OPRrTtBTF1f2YVUJwGq7gXkOvJ8BA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
|
||||
"@polkadot/ui-keyring@^0.45.0-beta.7":
|
||||
version "0.45.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.45.0-beta.7.tgz#88e645fb526d8c8ae719f5df3585d845bb531748"
|
||||
integrity sha512-inPorLx6ftTWaQfuYHhw5iu+E/lFCGuTP5SsaqZcxnFM2BGwhuGoT4NwFbGFIIIWT42vNxbMS5MHp+bPU7XZEw==
|
||||
"@polkadot/ui-keyring@^0.45.0-beta.8":
|
||||
version "0.45.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.45.0-beta.8.tgz#29c1e7491a910408b9684e81e83dc797dc71a992"
|
||||
integrity sha512-Y/EezRsu1j2uwPwYsoCJA0LlSwuSIrBA5u/VsaCwx520OWH5sV0Wm5UvzvM7hS7l3Z/FlKDH7WtPSS6V1jhOTQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@types/mkdirp" "^0.5.2"
|
||||
@ -2173,19 +2173,19 @@
|
||||
store "^2.0.12"
|
||||
styled-components "^4.3.1"
|
||||
|
||||
"@polkadot/ui-settings@^0.45.0-beta.7":
|
||||
version "0.45.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.45.0-beta.7.tgz#e8716197376ad2de078a8c5ab061b48619c60a04"
|
||||
integrity sha512-FJmp2u99+m/V2lsxgad9MOtvFCbhv8bHIkcFgDT24z53T0Lhi/EsktIKD6sQ/fGyZX9tjns3vTSE1mjL7dzXvw==
|
||||
"@polkadot/ui-settings@^0.45.0-beta.8":
|
||||
version "0.45.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.45.0-beta.8.tgz#2323e417e8b2fcf0579a223f77ff31fded412551"
|
||||
integrity sha512-QTlWJCzDo1sLi7QMmH/bBn3UDEhLSo5vJsF0Vi3dmiQyZLscHpzANRmtgW5oqIsO0FoEh3QvwHlhN6UjlmfNPg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@types/store" "^2.0.2"
|
||||
store "^2.0.12"
|
||||
|
||||
"@polkadot/ui-shared@^0.45.0-beta.7":
|
||||
version "0.45.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.45.0-beta.7.tgz#10d5abf554adc373971437667714439f7f492dbe"
|
||||
integrity sha512-gM6Zj5zWiyiSE3ZDSfHO4Rr3lLJ29HJyssxw07T1ke8vXVKj5zrl9INZ30mI5tce1HNWu1gpYP3GmK5efAPmsg==
|
||||
"@polkadot/ui-shared@^0.45.0-beta.8":
|
||||
version "0.45.0-beta.8"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.45.0-beta.8.tgz#9ee93536d3f455f2a40d385d234e4f6e82222029"
|
||||
integrity sha512-6sPYuMV6pGG8aEE7pWf2M/HpcUzrN2QJ9AQlEirQvWdsY1hiutlEe9uq+Cq4lcFmKy0/nabhBdimxpv5yntmKQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.6.0"
|
||||
"@types/color" "^3.0.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user