Update jazzicon component (MetaMask#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

@@ -106,7 +106,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",
@@ -138,7 +137,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",
     "js-conflux-sdk": "^0.6.0-alpha",
     "json-rpc-engine": "^5.1.6",
     "json-rpc-middleware-stream": "^2.1.1",

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,43 +21,45 @@ 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 () {
     const { className, style } = this.props
 
-    return <div className={className} style={style} />
+    return (
+      <div
+        className={className}
+        ref={this.container}
+        style={style}
+      />
+    )
   }
 }

yarn.lock

@@ -7621,7 +7621,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=
@@ -9405,11 +9405,6 @@ detect-newline@2.X, 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"
@@ -11813,11 +11808,6 @@ ethjs@^0.4.0:
     js-sha3 "0.5.5"
     number-to-bn "1.7.0"
 
-eve-raphael@0.5.0:
-  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"
@@ -16959,14 +16949,13 @@ jayson@^3.2.0:
     lodash "^4.17.15"
     uuid "^3.2.1"
 
-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"
 
 jed@1.1.1:
   version "1.1.1"
@@ -20130,7 +20119,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=
@@ -24346,13 +24335,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"
-
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"