How to use jdenticon - 10 common examples

render() {
    const { intl } = this.context;

    const { hash, poolName } = this.props;

    const avatarSource = jdenticon.toSvg(hash, 36, { padding: 0 });

    // Taken from Seiza (dangerouslyEmbedIntoDataURI())
    const avatar = `data:image/svg+xml;utf8,${encodeURIComponent(avatarSource)}`;

    // const tableData = [
    //   {
    //     label: intl.formatMessage(messages.performance),
    //     value: data.percentage + ' %',
    //   },
    //   {
    //     label: intl.formatMessage(messages.fullness),
    //     value: data.fullness + ' %',
    //   },
    //   {
    //     label: intl.formatMessage(globalMessages.marginsLabel),
    //     value: data.margins + ' %',

repaint() {
    if (this.props.account) {
      jdenticon.updateById(this.canvas_id); // UPDATE JDENTICOM
    } else {
      let ctx = ReactDOM.findDOMNode(this.refs.canvas).getContext('2d');
      ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
      let size = ctx.canvas.width;
      ctx.clearRect(0, 0, size, size);
      ctx.fillRect(0, 0, size, size);
      ctx.clearRect(0 + 1, 0 + 1, size - 2, size - 2);
      ctx.font = `${size}px sans-serif`;
      ctx.fillText('?', size / 4, size - size / 6);
    }
  }

} catch (e) {
                    // NOOP
                }
                image.blob = null;
                this._generatedImages.delete(cachedKey);
                j++;
            }
        }

        const ctx = this._jdenticonCtx;
        ctx.clearRect(0, 0, size, size);
        ctx.save();
        ctx.fillStyle = `rgba(255, 255, 255, 255)`;
        ctx.fillRect(0, 0, size, size);
        ctx.restore();
        jdenticon.drawIcon(ctx, hexString(uid), size);
        const image = await canvasToImage(this._jdenticonCanvas, this._page);
        this._generatedImages.set(key, image);
        return image;
    }

import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/autocomplete';
import jdenticon from 'jdenticon'
import md5 from 'md5'
import * as tw from '../twoWayBinding.js';

import '../style/style.css';
import '../style/ui.css';
import '../style/projectSettings-style.css';
import '../style/access-style.css';
import '../style/dropdown-style.css';

// Add avatar based on project's name
jdenticon.update($("svg")[0],md5(projectShortname));

// WS Autocompletion
var cb, label;
let ws;
var host = "ws://" + window.location.hostname + ":8080/";
if (window.WebSocket) {
    ws = new WebSocket(host);
} else if (window.MozWebSocket) {
    ws = new MozWebSocket(host);
}
ws.onopen = function(msg) {
    ws.send(JSON.stringify({"type":"autocompleteClient"}));
}
ws.onmessage = function(message) {
    message = JSON.parse(message.data);
    if (message.type === "userNameQuery") {

export function fallbackAvatar(username) {
  // Custom identicon style
  // https://jdenticon.com/icon-designer.html?config=ffffffff01416400154b194b
  jdenticon.config = {
    lightness: {
      color: [0.21, 0.75],
      grayscale: [0.26, 0.75],
    },
    saturation: {
      color: 1.00,
      grayscale: 0.00,
    },
    backColor: "#ffffffff",
  }

  const identicon = window.encodeURIComponent(jdenticon.toSvg(md5(username), 100))
  return `data:image/svg+xml;utf8,${identicon}`
}

app.get('/png/:identifier/:size', (req, res) => {
    res.setHeader('Content-Type', 'image/png');
    res.send(jdenticon.toPng(req.params.identifier, Number.parseInt(req.params.size, 10)));
});

function testJdenticon() {
  if (typeof jdenticon.version !== 'string') {
    throw '.version should be of string type.';
  }

  jdenticon.update('#jdenticon', 'd6d7705392bc7af633328bea8c4c6904', 8);
}

function testJdenticon() {
  if (typeof jdenticon.version !== 'string') {
    throw '.version should be of string type.';
  }

  jdenticon.update('#jdenticon', 'd6d7705392bc7af633328bea8c4c6904', 8);
}

function addConnection(state, connection) {
  const newConnection = Object.assign({}, connection, {
    identicon: jdenticon.toSvg(md5(connection.name), 40),
    index: state.length || 0
  });

  return state.concat(newConnection);
}