From cc0fa0f1b35bdfce7dda23ba9a85f9794d7ad9a1 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 9 Dec 2018 12:40:16 +0100
Subject: [PATCH] Cleanup polkadot-identicon rendering duplication (#14)

* Cleanup polkadot-identicon rendering duplication

* Bump API deps
---
 packages/ui-identicon/src/Polkadot.tsx | 67 +++++++++++++++++---------
 packages/ui-keyring/package.json       |  2 +-
 yarn.lock                              |  8 +--
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/packages/ui-identicon/src/Polkadot.tsx b/packages/ui-identicon/src/Polkadot.tsx
index f88a8afa..da6668b5 100644
--- a/packages/ui-identicon/src/Polkadot.tsx
+++ b/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'/>
-          <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} 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++]}/>
+          {this.renderCircle(s / 2, s / 2, s / 2, '#eee', -1)}
+          {
+            xy.map(([x, y], index) =>
+              this.renderCircle(x, y, z, colors[index], index)
+            )
+          }
         </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
diff --git a/packages/ui-keyring/package.json b/packages/ui-keyring/package.json
index dfdced07..a7900c90 100644
--- a/packages/ui-keyring/package.json
+++ b/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"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 07b3cedc..b24c2a67 100644
--- a/yarn.lock
+++ b/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":
-  version "0.33.6"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.33.6.tgz#04b2a9cabf11634adfa6ee7cdd0cd27665c670c5"
-  integrity sha512-MKhWsuPqKL9PMvq2rkwckrFVv6HfeEktKlJgMozphxUTebNq+vcpz4zAMwCdP4yKjzNDm8eajS2FG0ui25v3xA==
+"@polkadot/types@^0.33.7":
+  version "0.33.7"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.33.7.tgz#60363d6272ee5d37eac10998b6930c06fc40d7e8"
+  integrity sha512-kkzIMIk+Ai6Elg/mYA5bDn75X68p2yns+dfA8uouuR20MysbxhCNtLkC/dTW0wHiRaNsCjDN+knbWiliLBygEg==
   dependencies:
     "@babel/runtime" "^7.1.5"
     "@polkadot/keyring" "^0.33.11"