Changing from react-blockies to the identicon used by status (#130)

app/css/bootstrap-overrides.scss

@@ -74,6 +74,10 @@ $input-icon-height: 20px;
   bottom: ($input-height / 2) - ($input-icon-height / 2);
 }
 
+.border {
+  border-width: 2px !important;
+}
+
 .rounded {
   border-radius: 8px !important;
 }

app/js/components/Offer/index.jsx

@@ -2,15 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Row, Col} from 'reactstrap';
 import {Link} from "react-router-dom";
-import Blockies from "react-blockies";
-
 import Reputation from '../Reputation';
+import Identicon from "../UserInformation/Identicon";
 
 const Offer = ({offer, withDetail}) => (
   <Row className="border bg-white rounded p-2 mr-0 ml-0 mb-2" tag={Link} to={`/profile/${offer.owner}`}>
     <Col className="p-0">
       <Row className="mb-2">
-        <Col xs={2}><Blockies seed={offer.owner} className="rounded-circle" scale={5}/></Col>
+        <Col xs={2}><Identicon seed={offer.owner} className="rounded-circle border" scale={5}/></Col>
         <Col xs={5}>
           <p className="seller-name m-0 font-weight-bold">{offer.user.username}</p>
           <p className="text-dark m-0">{offer.user.location}</p>

app/js/components/UserInformation/Identicon.jsx

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import IdenticonJS from 'identicon.js';
+
+class Identicon extends Component {
+  render() {
+    const {className, seed, scale} = this.props;
+    const size = 8 * (scale || 4);
+    const options = {
+        background: [255, 255, 255, 255],
+        margin: 0.24,
+        size: size,
+        format: 'svg'
+      };
+
+    const data = new IdenticonJS(seed, options).toString();
+    return <img width={size} height={size} className={className} src={'data:image/svg+xml;base64,' + data} />;
+  }
+}
+
+Identicon.propTypes = {
+  className: PropTypes.string,
+  seed: PropTypes.string,
+  scale: PropTypes.number
+};
+
+export default Identicon;

app/js/components/UserInformation/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Row, Col} from 'reactstrap';
-import Blockies from 'react-blockies';
 import Reputation from "../Reputation";
 import Address from './Address';
+import Identicon from "./Identicon";
 
 const UserInformation = ({address, username, reputation, isArbitrator}) => (
   <Row className="border rounded py-4 m-0 text-center shadow-sm">
     <Col xs="12">
-      <Blockies seed={address} className="rounded-circle border" scale={8}/>
+      <Identicon seed={address} className="rounded-circle border" scale={8} />
       {isArbitrator && <span className="arbiterLabel">Arbiter</span>}
     </Col>
     { !isArbitrator && <Col xs="12">

app/js/pages/MyProfile/components/Disputes.jsx

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Card} from 'reactstrap';
 import {withNamespaces} from 'react-i18next';
-import Blockies from 'react-blockies';
+import Identicon from "../../../components/UserInformation/Identicon";
 
 class Disputes extends Component {
   renderTrades() {
@@ -10,8 +10,8 @@ class Disputes extends Component {
         this.props.disputes.map((dispute, index) => <Card key={index} body className="py-2 px-3 mb-3 shadow-sm">
           <div className="d-flex my-1">
             <span className="flex-fill align-self-center">
-              <Blockies seed={dispute.buyer} className="align-middle rounded-circle topCircle"/>
-              <Blockies seed={dispute.seller} className="align-middle rounded-circle bottomCircle"/>
+              <Identicon seed={dispute.buyer} scale={5} className="align-middle rounded-circle topCircle border"/>
+              <Identicon seed={dispute.seller} scale={5} className="align-middle rounded-circle bottomCircle border"/>
               <span className="ml-2">{dispute.buyerInfo.username} & {dispute.sellerInfo.username}</span>
             </span>
             <span className="flex-fill align-self-center text-right">

app/js/pages/MyProfile/components/Trades.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import {Card} from 'reactstrap';
 import {Link} from "react-router-dom";
 import {withNamespaces} from 'react-i18next';
-import Blockies from 'react-blockies';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faCircle, faArrowRight} from "@fortawesome/free-solid-svg-icons";
+import Identicon from "../../../components/UserInformation/Identicon";
 
 class Trades extends Component {
   renderTrades() {
@@ -14,7 +14,7 @@ class Trades extends Component {
         {this.props.trades.map((trade, index) => (
           <div key={index} className="d-flex my-1">
             <span className="flex-fill align-self-center">
-              <Blockies seed={trade.offer.owner} className="align-middle rounded-circle"/>
+              <Identicon seed={trade.offer.owner} className="align-middle rounded-circle border"/>
               <span className="ml-2">{trade.offer.user.username}</span>
             </span>
             <span className="flex-fill align-self-center">{trade.amount} {trade.offer.token.symbol}</span>

app/js/wizards/Buy/1_Trade/components/OfferTrade.jsx

@@ -4,8 +4,8 @@ import {withNamespaces} from "react-i18next";
 import {Row, Col, FormGroup, Button} from 'reactstrap';
 import Form from 'react-validation/build/form';
 import Input from 'react-validation/build/input';
-import Blockies from 'react-blockies';
 import {isNumber, lowerEqThan, higherEqThan} from "../../../../validators";
+import Identicon from "../../../../components/UserInformation/Identicon";
 
 const OfferTrade = ({
   address, name, min, max, currency, asset, onClick,
@@ -13,7 +13,7 @@ const OfferTrade = ({
 }) => (
   <Row>
     <Col xs="12" className="mt-5 text-center">
-      <h2>Trade amount with <br/><span><Blockies seed={address} className="rounded-circle"/> {name}</span></h2>
+      <h2>Trade amount with <br/><span><Identicon seed={address} className="rounded-circle border"/> {name}</span></h2>
       <p className="mt-3">Min: {min}{currency.symbol} - Max: {max}{currency.symbol}</p>
     </Col>
     <Col xs="12" className="mt-4">

package.json

@@ -55,12 +55,12 @@
     "google-geocoder": "^0.2.1",
     "i18next": "^13.1.2",
     "i18next-browser-languagedetector": "^2.2.4",
+    "identicon.js": "^2.3.3",
     "lodash": "^4.17.11",
     "moment": "^2.23.0",
     "number-to-bn": "^1.7.0",
     "qrcode.react": "^0.9.3",
     "react": "^16.6.3",
-    "react-blockies": "^1.4.0",
     "react-bootstrap-typeahead": "^3.3.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datetime": "^2.16.3",

yarn.lock

@@ -8377,6 +8377,11 @@ icss-utils@^4.0.0:
   dependencies:
     postcss "^7.0.5"
 
+identicon.js@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/identicon.js/-/identicon.js-2.3.3.tgz#c505b8d60ecc6ea13bbd991a33964c44c1ad60a1"
+  integrity sha512-/qgOkXKZ7YbeCYbawJ9uQQ3XJ3uBg9VDpvHjabCAPp6aRMhjLaFAxG90+1TxzrhKaj6AYpVGrx6UXQfQA41UEA==
+
 idna-uts46-hx@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/idna-uts46-hx/-/idna-uts46-hx-2.3.1.tgz#a1dc5c4df37eee522bf66d969cc980e00e8711f9"
@@ -12747,13 +12752,6 @@ react-addons-create-fragment@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
-react-blockies@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-blockies/-/react-blockies-1.4.0.tgz#4a23927c8c2368df569054778e732dc9d32342ab"
-  integrity sha512-AQe8oLnb5TabDrIJJ4XzoH2djapuLtEockB+Fcx/5hLAFzFmbsRsv8tJL3p+LOb3gK0hLJlJfd1JMtjSAJpcNA==
-  dependencies:
-    prop-types "^15.5.10"
-
 react-bootstrap-typeahead@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.3.0.tgz#a7f9bcf8c5e4399160a9db0add5b54a2304ebcbd"