Sort endpoints by type (#2344)

packages/apps-config/src/settings/endpoints.ts

@@ -4,12 +4,15 @@
 
 import { Option } from './types';
 
-// The available endpoints that will show in the dropdown. For the most part (with the exception of
-// Polkadot) we try to keep this to live chains only, with RPCs hosted by the community/chain vendor
-//   info: The chain logo name as defined in ../logos, specifically in namedLogos
-//   text: The text to display on teh dropdown
-//   value: The actual hosted secure websocket endpoint
-export default [
+const DEV: Option[] = [
+  {
+    info: 'local',
+    text: 'Local Node (Own, 127.0.0.1:9944)',
+    value: 'ws://127.0.0.1:9944/'
+  }
+];
+
+const LIVE: Option[] = [
   {
     info: 'kusama',
     text: 'Kusama (Polkadot Canary, hosted by Parity)',
@@ -20,16 +23,24 @@ export default [
     text: 'Kusama (Polkadot Canary, hosted by Web3 Foundation)',
     value: 'wss://cc3-5.kusama.network/'
   },
-  {
-    info: 'westend',
-    text: 'Westend (Polkadot Testnet, hosted by Parity)',
-    value: 'wss://westend-rpc.polkadot.io'
-  },
   {
     info: 'edgeware',
     text: 'Edgeware (Edgeware Mainnet, hosted by Commonwealth Labs)',
     value: 'wss://mainnet1.edgewa.re'
   },
+  {
+    info: 'substrate',
+    text: 'Kulupu (Kulupu Mainnet, hosted by Kulupu)',
+    value: 'wss://rpc.kulupu.network/ws'
+  }
+];
+
+const TEST: Option[] = [
+  {
+    info: 'westend',
+    text: 'Westend (Polkadot Testnet, hosted by Parity)',
+    value: 'wss://westend-rpc.polkadot.io'
+  },
   {
     info: 'edgeware',
     text: 'Berlin (Edgeware Testnet, hosted by Commonwealth Labs)',
@@ -39,15 +50,31 @@ export default [
     info: 'substrate',
     text: 'Flaming Fir (Substrate Testnet, hosted by Parity)',
     value: 'wss://substrate-rpc.parity.io/'
-  },
-  {
-    info: 'substrate',
-    text: 'Kulupu (Kulupu Mainnet, hosted by Kulupu)',
-    value: 'wss://rpc.kulupu.network/ws'
-  },
-  {
-    info: 'local',
-    text: 'Local Node (Own, 127.0.0.1:9944)',
-    value: 'ws://127.0.0.1:9944/'
   }
+];
+
+// The available endpoints that will show in the dropdown. For the most part (with the exception of
+// Polkadot) we try to keep this to live chains only, with RPCs hosted by the community/chain vendor
+//   info: The chain logo name as defined in ../logos, specifically in namedLogos
+//   text: The text to display on teh dropdown
+//   value: The actual hosted secure websocket endpoint
+export default [
+  {
+    isHeader: true,
+    text: 'Live networks',
+    value: -1
+  },
+  ...LIVE,
+  {
+    isHeader: true,
+    text: 'Test networks',
+    value: -1
+  },
+  ...TEST,
+  {
+    isHeader: true,
+    text: 'Development',
+    value: -1
+  },
+  ...DEV
 ].map((option): Option => ({ ...option, withI18n: true }));

packages/apps-config/src/settings/types.ts

@@ -4,6 +4,7 @@
 
 export interface Option {
   info?: string;
+  isHeader?: boolean;
   text: React.ReactNode;
   value: string | number;
   withI18n?: boolean;

packages/page-settings/src/General.tsx

@@ -30,8 +30,8 @@ export default function General ({ className, isModalContent, onClose }: Props):
   const iconOptions = useMemo((): Option[] => {
     return uiSettings.availableIcons.map((o): Option => createIdenticon(t, o, ['default']));
   }, [t]);
-  const prefixOptions = useMemo((): Option[] => {
-    return availableSs58.map((o): Option => createOption(t, o, ['default']));
+  const prefixOptions = useMemo((): (Option | React.ReactNode)[] => {
+    return availableSs58.map((o): Option | React.ReactNode => createOption(t, o, ['default']));
   }, [t]);
   const translateLanguages = useMemo((): Option[] => {
     return availableLanguages.map(({ text, value, withI18n }) => ({

packages/page-settings/src/SelectUrl.tsx

@@ -64,7 +64,7 @@ function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
   const help = t('Select the remote endpoint, either from the dropdown on manual entered via the custom toggle');
   const label = t('remote node/endpoint to connect to');
   const translatedEndpoints = useMemo(() => {
-    return availableEndpoints.map((option): Option => createOption(t, option, ['local']));
+    return availableEndpoints.map((option): Option | React.ReactNode => createOption(t, option, ['local']));
   }, [t]);
 
   useEffect((): void => {

packages/page-settings/src/util.tsx

@@ -6,10 +6,16 @@ import { Option } from '@polkadot/apps-config/settings/types';
 import { SettingsStruct } from '@polkadot/ui-settings/types';
 
 import React from 'react';
-import { ChainImg, IdentityIcon } from '@polkadot/react-components';
+import { ChainImg, Dropdown, IdentityIcon } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
 
-export function createOption (t: (input: any) => string, { info, text, value, withI18n }: Option, overrides: string[] = [], override = 'empty'): Option {
+export function createOption (t: (input: any) => string, { info, isHeader, text, value, withI18n }: Option, overrides: string[] = [], override = 'empty'): Option | React.ReactNode {
+  if (isHeader) {
+    return (
+      <Dropdown.Header content={withI18n ? t(text) : text} />
+    );
+  }
+
   return {
     text: (
       <div

packages/react-components/src/Dropdown.tsx

@@ -40,6 +40,10 @@ interface Props<Option> extends BareProps {
   withLabel?: boolean;
 }
 
+export type IDropdown<Option> = React.ComponentType<Props<Option>> & {
+  Header: React.ComponentType<{ content: React.ReactNode }>;
+}
+
 function Dropdown<Option> ({ allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isFull, isMultiple, label, labelExtra, onAdd, onBlur, onChange, onClose, onSearch, options, placeholder, renderLabel, searchInput, style, transform, withEllipsis, withLabel, value }: Props<Option>): React.ReactElement<Props<Option>> {
   const lastUpdate = useRef<string>('');
   const [stored, setStored] = useState<any>();
@@ -115,6 +119,8 @@ function Dropdown<Option> ({ allowAdd = false, className, defaultValue, dropdown
     );
 }
 
+Dropdown.Header = SUIDropdown.Header;
+
 export default styled(Dropdown)`
   .ui--Dropdown-item {
     position: relative;

packages/react-components/src/InputAddress/createHeader.tsx

@@ -3,12 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
-import { Option } from './types';
 
-export default function createHeader (option: KeyringSectionOption): Option {
-  return {
-    ...option,
-    className: 'header disabled',
-    text: option.name
-  };
+import React from 'react';
+
+import Dropdown from '../Dropdown';
+
+export default function createHeader (option: KeyringSectionOption): React.ReactNode {
+  return (
+    <Dropdown.Header content={option.name} />
+  );
 }

packages/react-components/src/InputAddress/index.tsx

@@ -13,7 +13,7 @@ import { withMulti, withObservable } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
 import keyringOption from '@polkadot/ui-keyring/options';
 import createKeyringItem from '@polkadot/ui-keyring/options/item';
-import { isUndefined } from '@polkadot/util';
+import { isNull, isUndefined } from '@polkadot/util';
 
 import { classes, getAddressName } from '../util';
 import addressToAddress from '../util/toAddress';
@@ -277,7 +277,7 @@ class InputAddress extends React.PureComponent<Props, State> {
       const nextItem = matches[index + 1];
       const hasNext = nextItem && nextItem.value;
 
-      return item.value !== null || (!isLast && !!hasNext);
+      return !(isNull(item.value) || isUndefined(item.value)) || (!isLast && !!hasNext);
     });
   }
 }
@@ -314,9 +314,9 @@ const ExportedComponent = withMulti(
   `,
   withObservable(keyringOption.optionsSubject, {
     propName: 'optionsAll',
-    transform: (optionsAll: KeyringOptions): Record<string, Option[]> =>
-      Object.entries(optionsAll).reduce((result: Record<string, Option[]>, [type, options]): Record<string, Option[]> => {
-        result[type] = options.map((option): Option =>
+    transform: (optionsAll: KeyringOptions): Record<string, (Option | React.ReactNode)[]> =>
+      Object.entries(optionsAll).reduce((result: Record<string, (Option | React.ReactNode)[]>, [type, options]): Record<string, (Option | React.ReactNode)[]> => {
+        result[type] = options.map((option): Option | React.ReactNode =>
           option.value === null
             ? createHeader(option)
             : createItem(option)