Cleanup polkadot-identicon rendering duplication (#14)

* Cleanup polkadot-identicon rendering duplication

* Bump API deps

packages/ui-identicon/src/Polkadot.tsx

@@ -49,9 +49,8 @@ const schema: { [index: string]: Scheme } = {
 export default class Identicon extends React.PureComponent<Props> {
   render () {
     const { className, size, style, value } = this.props;
-    const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation();
+    const xy = this.getCircleXY();
     const colors = this.getColors();
-    let i = 0;
 
     return (
       <div
@@ -65,31 +64,55 @@ export default class Identicon extends React.PureComponent<Props> {
           height={size}
           viewBox='0 0 64 64'
         >
-          <circle cx={s / 2} cy={s / 2} r={s / 2} fill='#eee'/>
+          {this.renderCircle(s / 2, s / 2, s / 2, '#eee', -1)}
-          <circle cx={c} cy={c - r} r={z} fill={colors[i++]}/>
+          {
-          <circle cx={c} cy={c - ro2} r={z} fill={colors[i++]}/>
+            xy.map(([x, y], index) =>
-          <circle cx={c - rroot3o4} cy={c - r3o4} r={z} fill={colors[i++]}/>
+              this.renderCircle(x, y, z, colors[index], index)
-          <circle cx={c - rroot3o2} cy={c - ro2} r={z} fill={colors[i++]}/>
+            )
-          <circle cx={c - rroot3o4} cy={c - ro4} r={z} fill={colors[i++]}/>
+          }
-          <circle cx={c - rroot3o2} cy={c} r={z} fill={colors[i++]}/>
-          <circle cx={c - rroot3o2} cy={c + ro2} r={z} fill={colors[i++]}/>
-          <circle cx={c - rroot3o4} cy={c + ro4} r={z} fill={colors[i++]}/>
-          <circle cx={c - rroot3o4} cy={c + r3o4} r={z} fill={colors[i++]}/>
-          <circle cx={c} cy={c + r} r={z} fill={colors[i++]}/>
-          <circle cx={c} cy={c + ro2} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o4} cy={c + r3o4} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o2} cy={c + ro2} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o4} cy={c + ro4} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o2} cy={c} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o2} cy={c - ro2} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o4} cy={c - ro4} r={z} fill={colors[i++]}/>
-          <circle cx={c + rroot3o4} cy={c - r3o4} r={z} fill={colors[i++]}/>
-          <circle cx={c} cy={c} r={z} fill={colors[i++]}/>
         </svg>
       </div>
     );
   }
 
+  private renderCircle (cx: number, cy: number, r: number, fill: string, key: number) {
+    return (
+      <circle
+        key={key}
+        cx={cx}
+        cy={cy}
+        r={r}
+        fill={fill}
+      />
+    );
+  }
+
+  private getCircleXY () {
+    const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation();
+
+    return [
+      [c, c - r],
+      [c, c - ro2],
+      [c - rroot3o4, c - r3o4],
+      [c - rroot3o2, c - ro2],
+      [c - rroot3o4, c - ro4],
+      [c - rroot3o2, c],
+      [c - rroot3o2, c + ro2],
+      [c - rroot3o4, c + ro4],
+      [c - rroot3o4, c + r3o4],
+      [c, c + r],
+      [c, c + ro2],
+      [c + rroot3o4, c + r3o4],
+      [c + rroot3o2, c + ro2],
+      [c + rroot3o4, c + ro4],
+      [c + rroot3o2, c],
+      [c + rroot3o2, c - ro2],
+      [c + rroot3o4, c - ro4],
+      [c + rroot3o4, c - r3o4],
+      [c, c]
+    ];
+  }
+
   private getRotation () {
     const { sixPoint = false } = this.props;
     const r = sixPoint

packages/ui-keyring/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.5",
     "@polkadot/keyring": "^0.33.11",
-    "@polkadot/types": "^0.33.6",
+    "@polkadot/types": "^0.33.7",
     "store": "^2.0.12"
   }
 }

yarn.lock

@@ -1446,10 +1446,10 @@
   resolved "https://registry.yarnpkg.com/@polkadot/ts/-/ts-0.1.41.tgz#647b44b038f94a7acf76633b25cb72df897872fc"
   integrity sha512-/vYpjqKU+QKHNAlFdLgFZAAr54wxQMgIuszZ5BxaayUoq7ukDlvCPhUGQ3fNoyBSEaL7uTCZ/5SVRc363IehoA==
 
-"@polkadot/types@^0.33.6":
+"@polkadot/types@^0.33.7":
-  version "0.33.6"
+  version "0.33.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.33.6.tgz#04b2a9cabf11634adfa6ee7cdd0cd27665c670c5"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.33.7.tgz#60363d6272ee5d37eac10998b6930c06fc40d7e8"
-  integrity sha512-MKhWsuPqKL9PMvq2rkwckrFVv6HfeEktKlJgMozphxUTebNq+vcpz4zAMwCdP4yKjzNDm8eajS2FG0ui25v3xA==
+  integrity sha512-kkzIMIk+Ai6Elg/mYA5bDn75X68p2yns+dfA8uouuR20MysbxhCNtLkC/dTW0wHiRaNsCjDN+knbWiliLBygEg==
   dependencies:
     "@babel/runtime" "^7.1.5"
     "@polkadot/keyring" "^0.33.11"