diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index 4d0024a518..a90a8053ee 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -7,12 +7,23 @@ import { SettingsStruct } from '@polkadot/ui-settings/types';
import React from 'react';
import styled from 'styled-components';
-import { Button, Dropdown, Input, Toggle } from '@polkadot/react-components';
+import { Button, ChainImg, Dropdown, Input, Toggle } from '@polkadot/react-components';
import { ActionStatus } from '@polkadot/react-components/Status/types';
import uiSettings from '@polkadot/ui-settings';
import translate from './translate';
+interface Option {
+ text: React.ReactNode;
+ value: string | number;
+}
+
+interface SetOption {
+ info: string;
+ text: string;
+ value: string | number;
+}
+
interface Props extends AppProps, I18nProps {
onStatusChange: (status: ActionStatus) => void;
}
@@ -23,6 +34,27 @@ interface State {
settings: SettingsStruct;
}
+const createOption = ({ info, text, value }: SetOption, overrides: string[] = [], override: string = 'empty'): Option => ({
+ text: (
+
+ ),
+ value
+});
+
+const endpointOptions: Option[] = uiSettings.availableNodes.map((o): Option => createOption(o, ['local']));
+const prefixOptions: Option[] = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
+const themeOptions: Option[] = uiSettings.availableUIThemes.map((o): Option => createOption(o));
+
class General extends React.PureComponent {
public constructor (props: Props) {
super(props);
@@ -50,10 +82,10 @@ class General extends React.PureComponent {
@@ -64,7 +96,7 @@ class General extends React.PureComponent {
help={t('The logo and colors for the app along with the identity icon theme.')}
label={t('default interface theme')}
onChange={this.onChangeUiTheme}
- options={uiSettings.availableUIThemes}
+ options={themeOptions}
/>
@@ -128,7 +160,7 @@ class General extends React.PureComponent
{
defaultValue={apiUrl}
label={t('remote node/endpoint to connect to')}
onChange={this.onChangeApiUrl}
- options={uiSettings.availableNodes}
+ options={endpointOptions}
/>
)
}
diff --git a/packages/apps/package.json b/packages/apps/package.json
index f4a9616698..67a1ff507c 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -15,7 +15,7 @@
"@babel/runtime": "^7.5.5",
"@polkadot/react-components": "^0.35.0-beta.14",
"@polkadot/react-signer": "^0.35.0-beta.14",
- "@polkadot/ui-assets": "^0.43.0-beta.1",
+ "@polkadot/ui-assets": "^0.43.0-beta.2",
"query-string": "^6.8.2"
}
}
diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css
index 7c18374c5b..30c8658648 100644
--- a/packages/apps/src/SideBar/SideBar.css
+++ b/packages/apps/src/SideBar/SideBar.css
@@ -184,7 +184,7 @@
width: 3rem;
img {
- margin: 0 0.3rem 0 0.2rem;
+ margin: 0 0.25rem 0 0;
}
> div.info {
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 1d9c5d061c..73af5051ed 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -32,7 +32,7 @@
"dependencies": {
"@babel/runtime": "^7.5.5",
"@polkadot/api": "^0.91.0-beta.2",
- "@polkadot/extension-dapp": "^0.9.0-beta.0",
+ "@polkadot/extension-dapp": "^0.9.0-beta.1",
"rxjs-compat": "^6.4.0"
}
}
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index f90cae0eed..d43c349528 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -13,10 +13,10 @@
"@babel/runtime": "^7.5.5",
"@polkadot/keyring": "^1.1.1",
"@polkadot/react-api": "^0.35.0-beta.14",
- "@polkadot/react-identicon": "^0.43.0-beta.1",
+ "@polkadot/react-identicon": "^0.43.0-beta.2",
"@polkadot/react-query": "^0.35.0-beta.14",
- "@polkadot/ui-keyring": "^0.43.0-beta.1",
- "@polkadot/ui-settings": "^0.43.0-beta.1",
+ "@polkadot/ui-keyring": "^0.43.0-beta.2",
+ "@polkadot/ui-settings": "^0.43.0-beta.2",
"@types/chart.js": "^2.8.4",
"@types/i18next": "^12.1.0",
"@types/react-copy-to-clipboard": "^4.2.6",
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx
index 8750ec578e..28b76d8c39 100644
--- a/packages/react-components/src/Dropdown.tsx
+++ b/packages/react-components/src/Dropdown.tsx
@@ -5,6 +5,7 @@
import { BareProps } from './types';
import React from 'react';
+import styled from 'styled-components';
import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
import SUIDropdown, { DropdownProps } from 'semantic-ui-react/dist/commonjs/modules/Dropdown/Dropdown';
import { isUndefined } from '@polkadot/util';
@@ -38,7 +39,7 @@ interface Props extends BareProps {
withLabel?: boolean;
}
-export default class Dropdown extends React.PureComponent> {
+class Dropdown extends React.PureComponent> {
// Trigger the update on mount - ensuring that the onChange (as described below)
// is trigerred.
public componentDidMount (): void {
@@ -143,3 +144,42 @@ export default class Dropdown extends React.PureComponent>
onClose && onClose();
}
}
+
+export default styled(Dropdown)`
+ .ui--Dropdown-item {
+ position: relative;
+ white-space: nowrap;
+
+ .ui--Dropdown-icon,
+ .ui--Dropdown-name {
+ display: inline-block;
+ }
+
+ .ui--Dropdown-icon {
+ border-radius: 50%;
+ height: 32px;
+ left: 0;
+ position: absolute;
+ top: -9px;
+ width: 32px;
+ }
+
+ .ui--Dropdown-name {
+ margin-left: 3rem;
+ }
+ }
+
+ .ui.selection.dropdown {
+ > .text > .ui--Dropdown-item {
+ .ui--Dropdown-icon {
+ left: -2.6rem;
+ top: -1rem;
+ opacity: 1;
+ }
+
+ .ui--Dropdown-name {
+ margin-left: 0;
+ }
+ }
+ }
+`;
diff --git a/yarn.lock b/yarn.lock
index 2ccfb64051..1ce7fefaf0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2051,18 +2051,18 @@
typescript "^3.5.3"
vuepress "^1.0.3"
-"@polkadot/extension-dapp@^0.9.0-beta.0":
- version "0.9.0-beta.0"
- resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.9.0-beta.0.tgz#f4897b24a25ae3c68848a98ba54541ead562ce88"
- integrity sha512-d9zRonfDVilMluwl9bONhMNoqnlkPsqAB4Uo7oN/70gszizmqospaOuBSLuioWkRav6sD1gxnMMEvr3GfHaHmQ==
+"@polkadot/extension-dapp@^0.9.0-beta.1":
+ version "0.9.0-beta.1"
+ resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.9.0-beta.1.tgz#7c8410f2bc97a64fc22e1fea1ca4e0262ed03ba8"
+ integrity sha512-WVUKntzv2JH60v++IlU97SXJxzlEAU6VfSFTePn1bfBTfipOk1DlJinSP2qRzVwgdbSLzxlWTV+hC/jRbqne2Q==
dependencies:
"@babel/runtime" "^7.5.5"
- "@polkadot/extension-inject" "^0.9.0-beta.0"
+ "@polkadot/extension-inject" "^0.9.0-beta.1"
-"@polkadot/extension-inject@^0.9.0-beta.0":
- version "0.9.0-beta.0"
- resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.9.0-beta.0.tgz#d62b4922eb2a4b22a088ab02620def6a40c9a28a"
- integrity sha512-mnMVj0z8y3yZPgtnpSpDjZ7LkTbRT17nnnEdztDX1dqA9DosKjArpFI4sYsS5eqFUwRmV//cqp4bFS2fWMlknA==
+"@polkadot/extension-inject@^0.9.0-beta.1":
+ version "0.9.0-beta.1"
+ resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.9.0-beta.1.tgz#7ee884b5b3922cd7538403bd14eb78c2d609e443"
+ integrity sha512-1pfcS+npyQJI5jA1pAlU1SE2h8Rja7LIvONn0Yj/6dNHBS+/aRsb7JJPjVt0fWBIy7xO0IvrYK1RiGY3mjCPeg==
dependencies:
"@babel/runtime" "^7.5.5"
@@ -2082,14 +2082,14 @@
"@polkadot/util" "^1.1.1"
"@polkadot/util-crypto" "^1.1.1"
-"@polkadot/react-identicon@^0.43.0-beta.1":
- version "0.43.0-beta.1"
- resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.43.0-beta.1.tgz#373ec381948c68653d805bc5c8a2ccec79a13432"
- integrity sha512-a4rBbTslHi3dj2SyKOGlNXm59lOJtL6Qj22mVqox/9sAlTv4NsIxs1TiYVvzRYmQDpMs4l7jnREdhwo9M88EAQ==
+"@polkadot/react-identicon@^0.43.0-beta.2":
+ version "0.43.0-beta.2"
+ resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.43.0-beta.2.tgz#be18bbe4fc3da8aaa5a3b32646982cb31d285c68"
+ integrity sha512-okwUGyaDmm/YjGrZ1fAs20ouYf2/9aqdA9FBQL+tK25rGQqhgE9FNQa0H2q0Odqduj0jfyP6NeyXVucnDQDAbw==
dependencies:
"@babel/runtime" "^7.5.5"
- "@polkadot/ui-settings" "^0.43.0-beta.1"
- "@polkadot/ui-shared" "^0.43.0-beta.1"
+ "@polkadot/ui-settings" "^0.43.0-beta.2"
+ "@polkadot/ui-shared" "^0.43.0-beta.2"
"@types/color" "^3.0.0"
"@types/react-copy-to-clipboard" "^4.2.6"
color "^3.1.2"
@@ -2141,17 +2141,17 @@
"@types/memoizee" "^0.4.2"
memoizee "^0.4.14"
-"@polkadot/ui-assets@^0.43.0-beta.1":
- version "0.43.0-beta.1"
- resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.43.0-beta.1.tgz#9236e53ad857da312b27cf13f4a79ca2c8eb9aa7"
- integrity sha512-chd+DoxFB5Ft7cxilAcKLagmW4iVbW2czW/CC8L+wZTMubfKAH9AdhbWhXl6QAA2GLBM8ZrNBsQYXrmUiOT72w==
+"@polkadot/ui-assets@^0.43.0-beta.2":
+ version "0.43.0-beta.2"
+ resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.43.0-beta.2.tgz#e1a38426727da815d983a4be7f3ebfc74291eb3f"
+ integrity sha512-BMRiwDHLIKrDp943rwnjMEJmPZxrgHC6I4K0MyPGADh0DK4YpMAVZfy3xZmIxLf/xFhhz9m+r1FjXg0i1I8AZA==
dependencies:
"@babel/runtime" "^7.5.5"
-"@polkadot/ui-keyring@^0.43.0-beta.1":
- version "0.43.0-beta.1"
- resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.43.0-beta.1.tgz#e7661473cb1e7c8fb0a32d21882e2ea6e9d90059"
- integrity sha512-2Q9vXPjJvwaVOFrZG5mQlW/nR7dAf5JqHTt3rhhsoSomlA/HFFqpu2Dm3T+SDOUK85av9PYLDqg+0K5IPm7xlQ==
+"@polkadot/ui-keyring@^0.43.0-beta.2":
+ version "0.43.0-beta.2"
+ resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.43.0-beta.2.tgz#e63966d4dc0beeac17a065fd31242cbaa3cbc658"
+ integrity sha512-XoENrD3z3mD8cB2Zdvorsmznt1rMTYq81tQDrM/7MAM/DYLn+fFktkSFnmB5022nZTq95SgTEp/+iWlkvtknNQ==
dependencies:
"@babel/runtime" "^7.5.5"
"@types/mkdirp" "^0.5.2"
@@ -2161,19 +2161,19 @@
store "^2.0.12"
styled-components "^4.3.1"
-"@polkadot/ui-settings@^0.43.0-beta.1":
- version "0.43.0-beta.1"
- resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.43.0-beta.1.tgz#2470695a743e75fb840a3fdc1f5ff04447f4a922"
- integrity sha512-02WWrQj1IlcgRWdigKP1FNEA9wgKHFziOIbozR23b7GmBekICukZcJ4ows9MwwTHllmp7zxmkYBRcYr6as+0Vg==
+"@polkadot/ui-settings@^0.43.0-beta.2":
+ version "0.43.0-beta.2"
+ resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.43.0-beta.2.tgz#ce4cc8d2cc0582896446d47a19ad9d807778548a"
+ integrity sha512-2emxpQmOOEGzteBWW/uqFgOzKumVHKGJ/OXhkCPC903s1C6P+c14BUJF6y7r6ldSNEHWWOwPoean88FY8I7Jlg==
dependencies:
"@babel/runtime" "^7.5.5"
"@types/store" "^2.0.2"
store "^2.0.12"
-"@polkadot/ui-shared@^0.43.0-beta.1":
- version "0.43.0-beta.1"
- resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.43.0-beta.1.tgz#fa1f27b95b6065c16cc6de41d7d752bb7a9c0820"
- integrity sha512-rvQRPr1i8B56exANb89mywPdYfw3y26zBXc/u0R+PVAKr+NmAvZCNAsSu4oyVTkP4E/vzTEGb2+R6RqtSJ2fXw==
+"@polkadot/ui-shared@^0.43.0-beta.2":
+ version "0.43.0-beta.2"
+ resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.43.0-beta.2.tgz#75d0cf3c848212b7529d0e13d61e4e4ace3955eb"
+ integrity sha512-wyKumg+QObbgTZn/1ZJyJIFId01IoGOAvJNgZLncnigL9pr8vThMhsomIxIRHeQu1xPLClX6G+fJTZRshsFoGw==
dependencies:
"@babel/runtime" "^7.5.5"
"@types/color" "^3.0.0"