Moves identicon svg to TS

ts/util/createIdenticon.tsx

@@ -0,0 +1,53 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import loadImage from 'blueimp-load-image';
+import { renderToString } from 'react-dom/server';
+import { AvatarColorMap, AvatarColorType } from '../types/Colors';
+import { IdenticonSVG } from '../components/IdenticonSVG';
+
+export function createIdenticon(
+  color: AvatarColorType,
+  content: string
+): Promise<string> {
+  const [defaultColorValue] = Array.from(AvatarColorMap.values());
+  const avatarColor = AvatarColorMap.get(color);
+  const html = renderToString(
+    <IdenticonSVG
+      backgroundColor={avatarColor?.bg || defaultColorValue.bg}
+      content={content}
+      foregroundColor={avatarColor?.fg || defaultColorValue.fg}
+    />
+  );
+  const svg = new Blob([html], { type: 'image/svg+xml;charset=utf-8' });
+  const svgUrl = URL.createObjectURL(svg);
+
+  return new Promise(resolve => {
+    const img = document.createElement('img');
+    img.onload = () => {
+      const canvas = loadImage.scale(img, {
+        canvas: true,
+        maxWidth: 100,
+        maxHeight: 100,
+      });
+      if (!(canvas instanceof HTMLCanvasElement)) {
+        resolve('');
+        return;
+      }
+
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.drawImage(img, 0, 0);
+      }
+      URL.revokeObjectURL(svgUrl);
+      resolve(canvas.toDataURL('image/png'));
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(svgUrl);
+      resolve('');
+    };
+
+    img.src = svgUrl;
+  });
+}