Expand ui-settings with additional info on options (#190)

packages/ui-settings/src/defaults.ts

@@ -5,7 +5,6 @@
 import { Options } from './types';
 
 // matches https://polkadot.js.org & https://*.polkadot.io
-// tslint:disable-next-line
 const isPolkadot = typeof window !== 'undefined' && window.location.host.indexOf('polkadot') !== -1;
 
 const WSS_NODES = {
@@ -34,61 +33,119 @@ const LANGUAGE_DEFAULT = 'default';
 const LOCKING_DEFAULT = 'session';
 
 const CRYPTOS: Options = [
-  { text: 'Edwards (ed25519)', value: 'ed25519' },
-  { text: 'Schnorrkel (sr25519)', value: 'sr25519' }
+  {
+    info: 'ed25519',
+    text: 'Edwards (ed25519)',
+    value: 'ed25519'
+  },
+  {
+    info: 'sr25519',
+    text: 'Schnorrkel (sr25519)',
+    value: 'sr25519'
+  }
 ];
 
 const ENDPOINTS: Options = [
   {
+    info: 'kusama',
     text: `Kusama (Polkadot Canary, ${WSS_NODES.parity.hosted})`,
     value: WSS_NODES.parity.nodes.kusama
   },
   {
+    info: 'kusama',
     text: `Kusama (Polkadot Canary, ${WSS_NODES.w3f.hosted})`,
     value: WSS_NODES.w3f.nodes.kusama
   },
   {
+    info: 'alexander',
     text: `Alexander (Polkadot Test, ${WSS_NODES.parity.hosted})`,
     value: WSS_NODES.parity.nodes.alex
   },
   {
+    info: 'alexander',
     text: `Alexander (Polkadot Test, ${WSS_NODES.unfra.hosted})`,
     value: WSS_NODES.unfra.nodes.alex
   },
   {
+    info: 'substrate',
     text: `Flaming Fir (Substrate Test, ${WSS_NODES.parity.hosted})`,
     value: WSS_NODES.parity.nodes.fir
   },
   {
+    info: 'local',
     text: 'Local Node (127.0.0.1:9944)',
     value: 'ws://127.0.0.1:9944/'
   }
 ];
 
 const LANGUAGES: Options = [
-  { text: 'Default browser language (auto-detect)', value: LANGUAGE_DEFAULT }
+  {
+    info: 'detect',
+    text: 'Default browser language (auto-detect)',
+    value: LANGUAGE_DEFAULT
+  }
 ];
 
 const LOCKING: Options = [
-  { text: 'Once per session', value: 'session' },
-  { text: 'On each transaction', value: 'tx' }
+  {
+    info: 'session',
+    text: 'Once per session',
+    value: 'session'
+  },
+  {
+    info: 'tx',
+    text: 'On each transaction',
+    value: 'tx'
+  }
 ];
 
 const PREFIXES: Options = [
-  { text: 'Default for the connected node', value: -1 },
-  { text: 'Substrate (development)', value: 42 },
-  { text: 'Kusama (canary)', value: 2 },
-  { text: 'Polkadot (live)', value: 0 }
+  {
+    info: 'default',
+    text: 'Default for the connected node',
+    value: -1
+  },
+  {
+    info: 'substrate',
+    text: 'Substrate (development)',
+    value: 42
+  },
+  {
+    info: 'kusama',
+    text: 'Kusama (canary)',
+    value: 2
+  },
+  {
+    info: 'polkadot',
+    text: 'Polkadot (live)',
+    value: 0
+  }
 ];
 
 const UIMODES: Options = [
-  { value: 'full', text: 'Fully featured' },
-  { value: 'light', text: 'Basic features only' }
+  {
+    info: 'full',
+    text: 'Fully featured',
+    value: 'full'
+  },
+  {
+    info: 'light',
+    text: 'Basic features only',
+    value: 'light'
+  }
 ];
 
 const UITHEMES: Options = [
-  { value: 'polkadot', text: 'Polkadot' },
-  { value: 'substrate', text: 'Substrate' }
+  {
+    info: 'polkadot',
+    text: 'Polkadot',
+    value: 'polkadot'
+  },
+  {
+    info: 'substrate',
+    text: 'Substrate',
+    value: 'substrate'
+  }
 ];
 
 const ENDPOINT_DEFAULT = isPolkadot
@@ -101,7 +158,6 @@ const UITHEME_DEFAULT = isPolkadot
   ? 'polkadot'
   : 'substrate';
 
-// tslint:disable-next-line
 const UIMODE_DEFAULT = !isPolkadot && typeof window !== 'undefined' && window.location.host.indexOf('ui-light') !== -1
   ? 'light'
   : 'full';

packages/ui-settings/src/types.ts

@@ -4,6 +4,7 @@
 
 export type Options = {
   disabled?: boolean;
+  info: string;
   text: string;
   value: string | number;
 }[]