fix: add identicon natively (#36633)

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`;
 };

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",

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",

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
+          {avatar}
-            alt={username + "'s avatar"}
-            className='avatar'
-            responsive={true}
-            src={picture}
-          />
         </Col>
       </Row>
       <SocialIcons

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: '',