Add example-{react, vue} (#209)

* Add example-{react, vue}

* Update CHANGELOG.md

* Update README.md

packages/ui-keyring/src/Base.ts

@@ -26,12 +26,12 @@ export default class Base {
 
   private _keyring?: KeyringInstance;
 
-  private _prefix?: Prefix;
-
   protected _genesisHash?: string;
 
   protected _store!: KeyringStore;
 
+  private _ss58Format?: Prefix;
+
   public constructor () {
     this._accounts = accounts;
     this._addresses = addresses;
@@ -63,12 +63,16 @@ export default class Base {
     return this._genesisHash;
   }
 
-  public decodeAddress = (key: string | Uint8Array, ignoreChecksum?: boolean): Uint8Array => {
-    return this.keyring.decodeAddress(key, ignoreChecksum);
+  public decodeAddress = (key: string | Uint8Array, ignoreChecksum?: boolean, ss58Format?: Prefix): Uint8Array => {
+    // FIXME Tryings are wrong... :()
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (this.keyring.decodeAddress as any)(key, ignoreChecksum, ss58Format);
   }
 
-  public encodeAddress = (key: string | Uint8Array): string => {
-    return this.keyring.encodeAddress(key);
+  public encodeAddress = (key: string | Uint8Array, ss58Format?: Prefix): string => {
+    // FIXME Tryings are wrong... :()
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (this.keyring.encodeAddress as any)(key, ss58Format);
   }
 
   public getPair (address: string | Uint8Array): KeyringPair {
@@ -96,8 +100,8 @@ export default class Base {
     return password.length > 0 && password.length <= MAX_PASS_LEN;
   }
 
-  public setAddressPrefix (prefix: number): void {
-    this._prefix = prefix as Prefix;
+  public setSS58Format (ss58Format: number): void {
+    this._ss58Format = ss58Format as Prefix;
   }
 
   public setDevMode (isDevelopment: boolean): void {
@@ -105,7 +109,7 @@ export default class Base {
   }
 
   protected initKeyring (options: KeyringOptions): void {
-    const keyring = testKeyring({ addressPrefix: this._prefix, ...options }, true);
+    const keyring = testKeyring({ ss58Format: this._ss58Format, ...options }, true);
 
     if (isBoolean(options.isDevelopment)) {
       this.setDevMode(options.isDevelopment);

packages/ui-keyring/src/observable/genericSubject.ts

@@ -38,7 +38,7 @@ export default function genericSubject (keyCreator: (address: string) => string,
 
       current[address] = {
         json: { ...json, address },
-        option: createOptionItem(address, json.meta.name, !json.meta.isRecent)
+        option: createOptionItem(address, json.meta.name)
       };
 
       if (!json.meta.isInjected && (!json.meta.isTesting || development.isDevelopment())) {

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

@@ -1,77 +0,0 @@
-// Copyright 2017-2019 @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 React from 'react';
-import styled from 'styled-components';
-import IdentityIcon from '@polkadot/react-identicon';
-
-interface Props {
-  address: string;
-  className?: string;
-  isUppercase: boolean;
-  name: string;
-  style?: Record<string, string>;
-}
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  position: relative;
-  white-space: nowrap;
-
-  > .address {
-    display: inline-block;
-    flex: 1;
-    font-family: monospace;
-    margin-left: 1rem;
-    opacity: 0.5;
-    overflow: hidden;
-    text-align: right;
-    text-overflow: ellipsis;
-  }
-
-  > .icon {
-    position: absolute;
-    top: -9px;
-    left: 0;
-  }
-
-  > .name {
-    display: inline-block;
-    flex: 1 0;
-    margin-left: 3rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &.uppercase {
-      text-transform: uppercase;
-    }
-  }
-`;
-
-export default class KeyPair extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { address, className, isUppercase, name, style } = this.props;
-
-    return (
-      <Wrapper
-        className={['ui--KeyPair', className].join(' ')}
-        style={style}
-      >
-        <IdentityIcon
-          className='icon'
-          size={32}
-          value={address}
-        />
-        <div className={`name ${isUppercase ? 'uppercase' : 'normalcase'}`}>
-          {name}
-        </div>
-        <div className='address'>
-          {address}
-        </div>
-      </Wrapper>
-    );
-  }
-}

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

@@ -40,10 +40,8 @@ class KeyringOption implements KeyringOptionInstance {
 
   public createOptionHeader (name: string): KeyringSectionOption {
     return {
-      className: 'header disabled',
       name,
       key: `header-${name.toLowerCase()}`,
-      text: name,
       value: null
     };
   }

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

@@ -4,12 +4,9 @@
 
 import { KeyringSectionOption } from './types';
 
-import React from 'react';
 import { isUndefined } from '@polkadot/util';
 
-import KeyPair from './KeyPair';
-
-export default function createItem (address: string, _name?: string, isUppercase = true): KeyringSectionOption {
+export default function createItem (address: string, _name?: string): KeyringSectionOption {
   const name = isUndefined(_name)
     ? (
       (address.length > 15)
@@ -21,13 +18,6 @@ export default function createItem (address: string, _name?: string, isUppercase
   return {
     key: address,
     name,
-    text: (
-      <KeyPair
-        address={address}
-        isUppercase={isUppercase}
-        name={name}
-      />
-    ),
     value: address
   };
 }

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

@@ -4,15 +4,11 @@
 
 import { KeyringItemType, KeyringStruct } from '../types';
 
-import React from 'react';
-
 export interface KeyringSectionOption {
   className?: string;
   disabled?: boolean;
-  content?: React.ReactNode;
   key: string | null;
   name: string;
-  text: React.ReactNode;
   value: string | null;
 }