Update jazzicon component (#7898)

* Use ref instead of findDOMNode in jazzicon component

The jazzicon component was using `findDOMNode` to get the DOM node for
the main div returned by the component, which is generally not
recommended. Instead a ref is now used.

* Update Jazzicon to v2

This version drops the dependency upon `raphael`, and no longer uses
the function `createSVGMatrix` which was causing unit tests to fail
(because it's not supported by jsdom).

package.json

@@ -86,7 +86,6 @@
     "debounce": "1.1.0",
     "debounce-stream": "^2.0.0",
     "deep-freeze-strict": "1.1.1",
-    "detect-node": "^2.0.3",
     "dnode": "^1.2.2",
     "end-of-stream": "^1.1.0",
     "eth-block-tracker": "^4.4.2",
@@ -120,7 +119,7 @@
     "fuse.js": "^3.2.0",
     "gaba": "^1.9.3",
     "human-standard-token-abi": "^2.0.0",
-    "jazzicon": "^1.2.0",
+    "jazzicon": "^2.0.0",
     "json-rpc-engine": "^5.1.6",
     "json-rpc-middleware-stream": "^2.1.1",
     "jsonschema": "^1.2.4",

ui/app/components/ui/jazzicon/jazzicon.component.js

@@ -1,7 +1,5 @@
-import React, { PureComponent } from 'react'
+import React, { createRef, PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import isNode from 'detect-node'
-import { findDOMNode } from 'react-dom'
 import jazzicon from 'jazzicon'
 import iconFactoryGenerator from '../../../../lib/icon-factory'
 
@@ -23,38 +21,34 @@ export default class Jazzicon extends PureComponent {
     diameter: 46,
   }
 
+  container = createRef()
+
   componentDidMount () {
-    if (!isNode) {
-      this.appendJazzicon()
-    }
+    this.appendJazzicon()
   }
 
   componentDidUpdate (prevProps) {
     const { address: prevAddress } = prevProps
     const { address } = this.props
 
-    if (!isNode && address !== prevAddress) {
+    if (address !== prevAddress) {
       this.removeExistingChildren()
       this.appendJazzicon()
     }
   }
 
   removeExistingChildren () {
-    // eslint-disable-next-line react/no-find-dom-node
-    const container = findDOMNode(this)
-    const { children } = container
+    const { children } = this.container.current
 
     for (let i = 0; i < children.length; i++) {
-      container.removeChild(children[i])
+      this.container.current.removeChild(children[i])
     }
   }
 
   appendJazzicon () {
-    // eslint-disable-next-line react/no-find-dom-node
-    const container = findDOMNode(this)
     const { address, diameter } = this.props
     const image = iconFactory.iconForAddress(address, diameter)
-    container.appendChild(image)
+    this.container.current.appendChild(image)
   }
 
   render () {
@@ -63,6 +57,7 @@ export default class Jazzicon extends PureComponent {
     return (
       <div
         className={className}
+        ref={this.container}
         style={style}
       />
     )

yarn.lock

@@ -7303,7 +7303,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^0.11.1:
+color@^0.11.3:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
   integrity sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=
@@ -9019,11 +9019,6 @@ [email protected], detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-detect-node@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
-  integrity sha1-ogM8CcyOFY03dI+951B4Mr1s4Sc=
-
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
@@ -11429,11 +11424,6 @@ ethjs@^0.4.0:
     js-sha3 "0.5.5"
     number-to-bn "1.7.0"
 
-[email protected]:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/eve-raphael/-/eve-raphael-0.5.0.tgz#17c754b792beef3fa6684d79cf5a47c63c4cda30"
-  integrity sha1-F8dUt5K+7z+maE15z1pHxjxM2jA=
-
 event-emitter@^0.3.5, event-emitter@~0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -16426,14 +16416,13 @@ java-properties@^0.2.9:
   resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
   integrity sha512-CpKJh9VRNhS+XqZtg1UMejETGEiqwCGDC/uwPEEQwc2nfdbSm73SIE29TplG2gLYuBOOTNDqxzG6A9NtEPLt0w==
 
-jazzicon@^1.2.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/jazzicon/-/jazzicon-1.5.0.tgz#d7f36b516023db39ee6eac117f4054e937b65e99"
-  integrity sha1-1/NrUWAj2znubqwRf0BU6Te2Xpk=
+jazzicon@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jazzicon/-/jazzicon-2.0.0.tgz#a45f10f330ad529d054264759a9e4817292bb440"
+  integrity sha1-pF8Q8zCtUp0FQmR1mp5IFykrtEA=
   dependencies:
-    color "^0.11.1"
-    mersenne-twister "^1.0.1"
-    raphael "^2.2.0"
+    color "^0.11.3"
+    mersenne-twister "^1.1.0"
 
 [email protected]:
   version "1.1.1"
@@ -19438,7 +19427,7 @@ merkle-patricia-tree@^3.0.0:
     rlp "^2.0.0"
     semaphore ">=1.0.1"
 
-mersenne-twister@^1.0.1:
+mersenne-twister@^1.0.1, mersenne-twister@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a"
   integrity sha1-+RZhjuQ9cXnvz2Qb7EUx65Zwl4o=
@@ -23493,13 +23482,6 @@ range-parser@^1.2.0, range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raphael@^2.2.0:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/raphael/-/raphael-2.2.7.tgz#231b19141f8d086986d8faceb66f8b562ee2c810"
-  integrity sha1-IxsZFB+NCGmG2PrOtm+LVi7iyBA=
-  dependencies:
-    eve-raphael "0.5.0"
-
 [email protected]:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"