isAlternative (#308)

packages/vue-identicon/package.json

@@ -18,7 +18,7 @@
     "vue": "*"
   },
   "devDependencies": {
-    "@polkadot/util-crypto": "^2.8.0-beta.7",
+    "@polkadot/util-crypto": "^2.8.1",
     "vue": "^2.6.11"
   }
 }

packages/vue-identicon/src/Identicon.ts

@@ -77,7 +77,7 @@ export const Identicon = Vue.extend({
       this.publicKey = publicKey;
     }
   },
-  props: ['prefix', 'size', 'theme', 'value'],
+  props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
   // FIXME These nested divs are not correct, would like a different way
   // here so we don't create a div wrapped for the div wrapper of the icon
   template: `
@@ -88,7 +88,7 @@ export const Identicon = Vue.extend({
       <Beachball :key="address" :address="address" :size="iconSize" />
     </div>
     <div v-else-if="type === 'polkadot'">
-      <Polkadot :key="address"  :address="address" :size="iconSize" />
+      <Polkadot :key="address" :address="address" :isAlternative="isAlternative" :size="iconSize" />
     </div>
     <div v-else>
       <Jdenticon :key="address" :publicKey="publicKey" :size="iconSize" />

packages/vue-identicon/src/icons/Polkadot.ts

@@ -25,14 +25,14 @@ export const Polkadot = Vue.extend({
   },
   methods: {
     createSvgHtml: function (): void {
-      const circles = generateIcon(this.address).map(({ cx, cy, fill, r }): string =>
+      const circles = generateIcon(this.address, { isSixPoint: this.isAlternative || false }).map(({ cx, cy, fill, r }) =>
         `<circle cx=${cx} cy=${cy} fill="${fill}" r=${r} />`
       ).join('');
 
       this.svgHtml = `<svg height=${this.size} viewBox='0 0 64 64' width=${this.size}>${circles}</svg>`;
     }
   },
-  props: ['address', 'size'],
+  props: ['address', 'isAlternative', 'size'],
   // eslint-disable-next-line quotes
   template: `<div v-html="svgHtml" />`
 });