From 5f97782eb0e9cba07eca547c3c84ee457f11c43e Mon Sep 17 00:00:00 2001
From: mrugesh <1884376+raisedadead@users.noreply.github.com>
Date: Mon, 19 Aug 2019 19:17:53 +0530
Subject: [PATCH] fix: add identicon natively (#36633)

---
 api-server/server/utils/index.js              |  2 +-
 client/package-lock.json                      |  5 ++++
 client/package.json                           |  1 +
 .../components/profile/components/Camper.js   | 26 ++++++++++++++-----
 tools/scripts/seed/seedAuthUser.js            |  2 +-
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/api-server/server/utils/index.js b/api-server/server/utils/index.js
index 7647af2477..4959464313 100644
--- a/api-server/server/utils/index.js
+++ b/api-server/server/utils/index.js
@@ -22,5 +22,5 @@ exports.unDasherize = function unDasherize(name) {
 };
 
 exports.addPlaceholderImage = function addPlaceholderImage(name) {
-  return `https://identicon.org?t=${name}&s=256`;
+  return `https://example.com/${name}.png`;
 };
diff --git a/client/package-lock.json b/client/package-lock.json
index 37c8611ab4..937bfe2bc0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16300,6 +16300,11 @@
         }
       }
     },
+    "react-identicons": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/react-identicons/-/react-identicons-1.1.7.tgz",
+      "integrity": "sha512-r+nCigLoQMffpf8gZo6l0we8RaRkgEIeRY6xS1vjp5ANxdTd3QwA2tjBTfmgf+4kFqYnaL2XvJH+iZ4mKqnb8Q=="
+    },
     "react-instantsearch-core": {
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-5.7.0.tgz",
diff --git a/client/package.json b/client/package.json
index 502e1b79e2..2c8d4e557b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -49,6 +49,7 @@
     "react-dom": "^16.9.0",
     "react-ga": "^2.6.0",
     "react-helmet": "^5.2.1",
+    "react-identicons": "^1.1.7",
     "react-instantsearch-dom": "^5.7.0",
     "react-monaco-editor": "^0.25.1",
     "react-redux": "^5.0.7",
diff --git a/client/src/components/profile/components/Camper.js b/client/src/components/profile/components/Camper.js
index 3ba9e8df4e..b67e954669 100644
--- a/client/src/components/profile/components/Camper.js
+++ b/client/src/components/profile/components/Camper.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Col, Row, Image } from '@freecodecamp/react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAward } from '@fortawesome/free-solid-svg-icons';
+import Identicon from 'react-identicons';
 
 import SocialIcons from './SocialIcons';
 
@@ -61,16 +62,29 @@ function Camper({
   twitter,
   website
 }) {
+  // A lot of the user-profiles are still using the defunct service.
+  const avatar = /example.com/.test(picture) ? (
+    <Identicon
+      bg={'#006400'}
+      count={5}
+      fg={'#FCB900'}
+      padding={5}
+      size={256}
+      string={username}
+    />
+  ) : (
+    <Image
+      alt={username + "'s avatar"}
+      className='avatar'
+      responsive={true}
+      src={picture}
+    />
+  );
   return (
     <div>
       <Row>
         <Col className='avatar-container' xs={12}>
-          <Image
-            alt={username + "'s avatar"}
-            className='avatar'
-            responsive={true}
-            src={picture}
-          />
+          {avatar}
         </Col>
       </Row>
       <SocialIcons
diff --git a/tools/scripts/seed/seedAuthUser.js b/tools/scripts/seed/seedAuthUser.js
index c15fbfc079..61e54c43b9 100644
--- a/tools/scripts/seed/seedAuthUser.js
+++ b/tools/scripts/seed/seedAuthUser.js
@@ -48,7 +48,7 @@ MongoClient.connect(MONGOHQ_URL, { useNewUrlParser: true }, function(
         about: '',
         name: 'Development User',
         location: '',
-        picture: 'https://identicon.org/?t=dev&s=256',
+        picture: 'https://github.com/identicons/camperbot.png',
         acceptedPrivacyTerms: true,
         sendQuincyEmail: false,
         currentChallengeId: '',