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

* Add example-{react, vue}

* Update CHANGELOG.md

* Update README.md

packages/example-vue/src/index.ts

@@ -0,0 +1,97 @@
+// Copyright 2017-2019 @polkadot/example-vue 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 { Prefix } from '@polkadot/util-crypto/address/types';
+
+import Vue, { VNode } from 'vue';
+import keyring from '@polkadot/ui-keyring';
+import settings from '@polkadot/ui-settings';
+import { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto';
+import Identicon from '@polkadot/vue-identicon';
+
+interface Account {
+  address: string;
+  phrase: string;
+}
+
+interface Data extends Account {
+  ss58Format: Prefix;
+  ss58Options: { text: string; value: string | number }[];
+}
+
+const ss58Options = settings.availablePrefixes.filter((_, index): boolean => index !== 0);
+
+function generateAccount (ss58Format: Prefix = 42): Account {
+  const phrase = mnemonicGenerate(12);
+  const { address } = keyring.createFromUri(phrase);
+
+  return {
+    address: keyring.encodeAddress(address, ss58Format),
+    phrase
+  };
+}
+
+const Example = Vue.extend({
+  template: `
+    <div id="example">
+      <section>
+        <button v-on:click="onClickNew">another random address</button>
+      </section>
+      <section>
+        <label>phrase</label>
+        <textarea :cols="40" :rows="4" readonly v-model="phrase" />
+      </section>
+      <section>
+        <label>icons</label>
+        <Identicon class='icon' :value="address" />
+        <Identicon class='icon' :value="address" :theme="'polkadot'" />
+        <Identicon class='icon' :value="address" :theme="'beachball'" />
+      </section>
+      <section>
+        <label>address</label>
+        {{ address }}
+      </section>
+      <section>
+        <label>ss58 format</label>
+        <select v-model="ss58Format">
+          <option v-for="option in ss58Options" v-bind:value="option.value">
+            {{ option.text }}
+          </option>
+        </select>
+      </section>
+    </div>
+  `,
+  name: 'Example',
+  components: {
+    Identicon
+  },
+  data: function (): Data {
+    return {
+      ...generateAccount(),
+      ss58Format: 42,
+      ss58Options
+    };
+  },
+  methods: {
+    onClickNew: function (): void {
+      const { address, phrase } = generateAccount(this.ss58Format);
+
+      this.address = address;
+      this.phrase = phrase;
+    }
+  },
+  watch: {
+    ss58Format: function (): void {
+      this.address = keyring.encodeAddress(this.address, this.ss58Format);
+    }
+  }
+});
+
+cryptoWaitReady().then((): void => {
+  keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
+
+  new Vue({
+    render: (h): VNode => h(Example)
+  }).$mount('#example');
+});