Initial add from apps

packages/ui-keyring/src/options/KeyPair.css

@@ -0,0 +1,47 @@
+/* Copyright 2017-2018 @polkadot/ui-keyring authors & contributors
+/* This software may be modified and distributed under the terms
+/* of the Apache-2.0 license. See the LICENSE file for details. */
+
+.ui--KeyPair {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  position: relative;
+  white-space: nowrap;
+}
+
+.ui--KeyPair-icon {
+  position: absolute;
+  top: -9px;
+  left: 0;
+}
+
+.ui--KeyPair-address,
+.ui--KeyPair-name {
+  display: inline-block;
+}
+
+.ui--KeyPair-address {
+  flex: 1;
+  font-family: monospace;
+  margin-left: 1rem;
+  opacity: 0.5;
+  overflow: hidden;
+  text-align: right;
+  text-overflow: ellipsis;
+}
+
+.ui--KeyPair-name {
+  flex: 1 0;
+  margin-left: 3rem;
+  overflow: hidden;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+}
+
+.ui.dropdown .menu > .disabled.item.ui--KeyPair-header {
+  font-size: .75em;
+  font-weight: 700;
+  opacity: 1;
+  text-transform: uppercase;
+}

packages/ui-keyring/src/options/KeyPair.tsx

@@ -0,0 +1,54 @@
+// Copyright 2017-2018 @polkadot/ui-keyring 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 './KeyPair.css';
+
+import React from 'react';
+import { AccountId } from '@polkadot/types';
+import IdentityIcon from '@polkadot/ui-app/IdentityIcon';
+import { withMulti, withObservable } from '@polkadot/ui-react-rx/with/index';
+
+type Props = {
+  address: string,
+  className?: string,
+  name: string,
+  sessionValidators?: Array<AccountId>,
+  style?: {
+    [index: string]: string
+  }
+};
+
+class KeyPair extends React.PureComponent<Props> {
+  render () {
+    const { address, className, name, sessionValidators = [], style } = this.props;
+    const isValidator = sessionValidators.find((validator) =>
+      validator.toString() === address
+    );
+
+    return (
+      <div
+        className={['ui--KeyPair', className].join(' ')}
+        style={style}
+      >
+        <IdentityIcon
+          className='ui--KeyPair-icon'
+          isHighlight={!!isValidator}
+          size={32}
+          value={address}
+        />
+        <div className='ui--KeyPair-name'>
+          {name}
+        </div>
+        <div className='ui--KeyPair-address'>
+          {address}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withMulti(
+  KeyPair,
+  withObservable('sessionValidators')
+);

packages/ui-keyring/src/options/index.spec.js

@@ -0,0 +1,18 @@
+// Copyright 2017-2018 @polkadot/ui-keyring 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 keyringOptionInstance from './index';
+
+describe('KeyringOption', () => {
+  it('should not allow initOptions to be called more than once', () => {
+    const state = {};
+    // first call
+    keyringOptionInstance.init(state);
+
+    // second call
+    expect(() => {
+      keyringOptionInstance.init(state);
+    }).toThrowError('Unable to initialise options more than once');
+  });
+});

packages/ui-keyring/src/options/index.ts

@@ -0,0 +1,110 @@
+// Copyright 2017-2018 @polkadot/ui-keyring 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 { KeyringStruct } from '../types';
+import { SingleAddress } from '../observable/types';
+import { KeyringOptions, KeyringOptionInstance, KeyringSectionOption, KeyringSectionOptions } from './types';
+
+import { BehaviorSubject } from 'rxjs';
+
+import observableAll from '../observable';
+
+let hasCalledInitOptions = false;
+
+class KeyringOption implements KeyringOptionInstance {
+  optionsSubject: BehaviorSubject<KeyringOptions> = new BehaviorSubject(this.emptyOptions());
+
+  createOptionHeader (name: string): KeyringSectionOption {
+    return {
+      className: 'header disabled',
+      name,
+      key: `header-${name.toLowerCase()}`,
+      text: name,
+      value: null
+    };
+  }
+
+  init (keyring: KeyringStruct): void {
+    if (hasCalledInitOptions) {
+      throw new Error('Unable to initialise options more than once');
+    }
+
+    observableAll.subscribe((value) => {
+      const options = this.emptyOptions();
+
+      this.addAccounts(keyring, options);
+      this.addAddresses(keyring, options);
+
+      options.address = ([] as KeyringSectionOptions).concat(
+        options.address.length ? [ this.createOptionHeader('Addresses') ] : [],
+        options.address,
+        options.recent.length ? [ this.createOptionHeader('Recent') ] : [],
+        options.recent
+      );
+      options.account = ([] as KeyringSectionOptions).concat(
+        options.account.length ? [ this.createOptionHeader('Accounts') ] : [],
+        options.account,
+        options.testing.length ? [ this.createOptionHeader('Development') ] : [],
+        options.testing
+      );
+
+      options.all = ([] as KeyringSectionOptions).concat(
+        options.account,
+        options.address
+      );
+
+      this.optionsSubject.next(options);
+    });
+
+    hasCalledInitOptions = true;
+  }
+
+  private addAccounts (keyring: KeyringStruct, options: KeyringOptions): void {
+    const available = keyring.accounts.subject.getValue();
+
+    Object
+      .keys(available)
+      .map((address) =>
+        available[address]
+      )
+      .forEach(({ json: { meta: { isTesting = false } }, option }: SingleAddress) => {
+        if (!isTesting) {
+          options.account.push(option);
+        } else {
+          options.testing.push(option);
+        }
+      });
+  }
+
+  private addAddresses (keyring: KeyringStruct, options: KeyringOptions): void {
+    const available = keyring.addresses.subject.getValue();
+
+    Object
+      .keys(available)
+      .map((address) =>
+        available[address]
+      )
+      .forEach(({ json: { meta: { isRecent = false } }, option }: SingleAddress) => {
+        if (isRecent) {
+          options.recent.push(option);
+        } else {
+          options.address.push(option);
+        }
+      });
+  }
+
+  private emptyOptions (): KeyringOptions {
+    return {
+      account: [],
+      address: [],
+      all: [],
+      recent: [],
+      testing: []
+    };
+  }
+}
+
+const keyringOptionInstance = new KeyringOption();
+
+export default keyringOptionInstance;

packages/ui-keyring/src/options/item.tsx

@@ -0,0 +1,28 @@
+// Copyright 2017-2018 @polkadot/ui-keyring 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 { KeyringSectionOption } from './types';
+
+import React from 'react';
+import toShortAddress from '@polkadot/ui-app/util/toShortAddress';
+
+import KeyPair from './KeyPair';
+
+export default function createItem (address: string, _name?: string): KeyringSectionOption {
+  const name = _name === undefined
+    ? toShortAddress(address)
+    : _name;
+
+  return {
+    key: address,
+    name,
+    text: (
+      <KeyPair
+        address={address}
+        name={name}
+      />
+    ),
+    value: address
+  };
+}

packages/ui-keyring/src/options/types.ts

@@ -0,0 +1,32 @@
+// Copyright 2017-2018 @polkadot/ui-keyring 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 { KeyringStruct } from '../types';
+
+export type KeyringSectionOption = {
+  className?: string,
+  disabled?: boolean,
+  content?: any | string, // node?
+  key: string | null,
+  name: string,
+  text: any | string, // node?
+  value: string | null
+};
+
+export type KeyringSectionOptions = Array<KeyringSectionOption>;
+
+export type KeyringOptions = {
+  account: KeyringSectionOptions,
+  address: KeyringSectionOptions,
+  all: KeyringSectionOptions,
+  recent: KeyringSectionOptions,
+  testing: KeyringSectionOptions
+};
+
+export type KeyringOption$Type = keyof KeyringOptions;
+
+export interface KeyringOptionInstance {
+  createOptionHeader: (name: string) => KeyringSectionOption;
+  init: (keyring: KeyringStruct) => void;
+}