DRAFT use images from spec package for SAS verification

package.json

@@ -89,7 +89,7 @@
         "@matrix-org/analytics-events": "^0.30.0",
         "@matrix-org/emojibase-bindings": "^1.5.0",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
-        "@matrix-org/spec": "^1.7.0",
+        "andybalaam-matrix-spec": "^0.0.1",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@vector-im/compound-design-tokens": "6.4.2",

res/css/views/verification/_VerificationShowSas.pcss

@@ -39,10 +39,8 @@ Please see LICENSE files in the repository root for full details.
     width: 60px;
 }
 
-.mx_VerificationShowSas_emojiSas_emoji {
-    font-size: $font-32px;
-    /* Use the Twemoji font for consistency with other clients */
-    font-family: Twemoji, var(--cpd-font-family-sans);
+.mx_VerificationShowSas_emojiSas_emoji > svg {
+    height: 32px;
 }
 
 .mx_VerificationShowSas_emojiSas_label {

src/components/views/verification/VerificationShowSas.tsx

@@ -6,15 +6,146 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type FC } from "react";
 import { type Device } from "matrix-js-sdk/src/matrix";
 import { type GeneratedSas, type EmojiMapping } from "matrix-js-sdk/src/crypto-api";
-import SasEmoji from "@matrix-org/spec/sas-emoji.json";
+import SasEmoji from "andybalaam-matrix-spec/sas-emoji.json";
+import { Icon as Emoji00 } from "andybalaam-matrix-spec/sas-emoji/00.svg";
+import { Icon as Emoji01 } from "andybalaam-matrix-spec/sas-emoji/01.svg";
+import { Icon as Emoji02 } from "andybalaam-matrix-spec/sas-emoji/02.svg";
+import { Icon as Emoji03 } from "andybalaam-matrix-spec/sas-emoji/03.svg";
+import { Icon as Emoji04 } from "andybalaam-matrix-spec/sas-emoji/04.svg";
+import { Icon as Emoji05 } from "andybalaam-matrix-spec/sas-emoji/05.svg";
+import { Icon as Emoji06 } from "andybalaam-matrix-spec/sas-emoji/06.svg";
+import { Icon as Emoji07 } from "andybalaam-matrix-spec/sas-emoji/07.svg";
+import { Icon as Emoji08 } from "andybalaam-matrix-spec/sas-emoji/08.svg";
+import { Icon as Emoji09 } from "andybalaam-matrix-spec/sas-emoji/09.svg";
+import { Icon as Emoji10 } from "andybalaam-matrix-spec/sas-emoji/10.svg";
+import { Icon as Emoji11 } from "andybalaam-matrix-spec/sas-emoji/11.svg";
+import { Icon as Emoji12 } from "andybalaam-matrix-spec/sas-emoji/12.svg";
+import { Icon as Emoji13 } from "andybalaam-matrix-spec/sas-emoji/13.svg";
+import { Icon as Emoji14 } from "andybalaam-matrix-spec/sas-emoji/14.svg";
+import { Icon as Emoji15 } from "andybalaam-matrix-spec/sas-emoji/15.svg";
+import { Icon as Emoji16 } from "andybalaam-matrix-spec/sas-emoji/16.svg";
+import { Icon as Emoji17 } from "andybalaam-matrix-spec/sas-emoji/17.svg";
+import { Icon as Emoji18 } from "andybalaam-matrix-spec/sas-emoji/18.svg";
+import { Icon as Emoji19 } from "andybalaam-matrix-spec/sas-emoji/19.svg";
+import { Icon as Emoji20 } from "andybalaam-matrix-spec/sas-emoji/20.svg";
+import { Icon as Emoji21 } from "andybalaam-matrix-spec/sas-emoji/21.svg";
+import { Icon as Emoji22 } from "andybalaam-matrix-spec/sas-emoji/22.svg";
+import { Icon as Emoji23 } from "andybalaam-matrix-spec/sas-emoji/23.svg";
+import { Icon as Emoji24 } from "andybalaam-matrix-spec/sas-emoji/24.svg";
+import { Icon as Emoji25 } from "andybalaam-matrix-spec/sas-emoji/25.svg";
+import { Icon as Emoji26 } from "andybalaam-matrix-spec/sas-emoji/26.svg";
+import { Icon as Emoji27 } from "andybalaam-matrix-spec/sas-emoji/27.svg";
+import { Icon as Emoji28 } from "andybalaam-matrix-spec/sas-emoji/28.svg";
+import { Icon as Emoji29 } from "andybalaam-matrix-spec/sas-emoji/29.svg";
+import { Icon as Emoji30 } from "andybalaam-matrix-spec/sas-emoji/30.svg";
+import { Icon as Emoji31 } from "andybalaam-matrix-spec/sas-emoji/31.svg";
+import { Icon as Emoji32 } from "andybalaam-matrix-spec/sas-emoji/32.svg";
+import { Icon as Emoji33 } from "andybalaam-matrix-spec/sas-emoji/33.svg";
+import { Icon as Emoji34 } from "andybalaam-matrix-spec/sas-emoji/34.svg";
+import { Icon as Emoji35 } from "andybalaam-matrix-spec/sas-emoji/35.svg";
+import { Icon as Emoji36 } from "andybalaam-matrix-spec/sas-emoji/36.svg";
+import { Icon as Emoji37 } from "andybalaam-matrix-spec/sas-emoji/37.svg";
+import { Icon as Emoji38 } from "andybalaam-matrix-spec/sas-emoji/38.svg";
+import { Icon as Emoji39 } from "andybalaam-matrix-spec/sas-emoji/39.svg";
+import { Icon as Emoji40 } from "andybalaam-matrix-spec/sas-emoji/40.svg";
+import { Icon as Emoji41 } from "andybalaam-matrix-spec/sas-emoji/41.svg";
+import { Icon as Emoji42 } from "andybalaam-matrix-spec/sas-emoji/42.svg";
+import { Icon as Emoji43 } from "andybalaam-matrix-spec/sas-emoji/43.svg";
+import { Icon as Emoji44 } from "andybalaam-matrix-spec/sas-emoji/44.svg";
+import { Icon as Emoji45 } from "andybalaam-matrix-spec/sas-emoji/45.svg";
+import { Icon as Emoji46 } from "andybalaam-matrix-spec/sas-emoji/46.svg";
+import { Icon as Emoji47 } from "andybalaam-matrix-spec/sas-emoji/47.svg";
+import { Icon as Emoji48 } from "andybalaam-matrix-spec/sas-emoji/48.svg";
+import { Icon as Emoji49 } from "andybalaam-matrix-spec/sas-emoji/49.svg";
+import { Icon as Emoji50 } from "andybalaam-matrix-spec/sas-emoji/50.svg";
+import { Icon as Emoji51 } from "andybalaam-matrix-spec/sas-emoji/51.svg";
+import { Icon as Emoji52 } from "andybalaam-matrix-spec/sas-emoji/52.svg";
+import { Icon as Emoji53 } from "andybalaam-matrix-spec/sas-emoji/53.svg";
+import { Icon as Emoji54 } from "andybalaam-matrix-spec/sas-emoji/54.svg";
+import { Icon as Emoji55 } from "andybalaam-matrix-spec/sas-emoji/55.svg";
+import { Icon as Emoji56 } from "andybalaam-matrix-spec/sas-emoji/56.svg";
+import { Icon as Emoji57 } from "andybalaam-matrix-spec/sas-emoji/57.svg";
+import { Icon as Emoji58 } from "andybalaam-matrix-spec/sas-emoji/58.svg";
+import { Icon as Emoji59 } from "andybalaam-matrix-spec/sas-emoji/59.svg";
+import { Icon as Emoji60 } from "andybalaam-matrix-spec/sas-emoji/60.svg";
+import { Icon as Emoji61 } from "andybalaam-matrix-spec/sas-emoji/61.svg";
+import { Icon as Emoji62 } from "andybalaam-matrix-spec/sas-emoji/62.svg";
+import { Icon as Emoji63 } from "andybalaam-matrix-spec/sas-emoji/63.svg";
 
 import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler";
 import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 
+const emojiImages: Record<string, FC> = {
+    "Dog": Emoji00,
+    "Cat": Emoji01,
+    "Lion": Emoji02,
+    "Horse": Emoji03,
+    "Unicorn": Emoji04,
+    "Pig": Emoji05,
+    "Elephant": Emoji06,
+    "Rabbit": Emoji07,
+    "Panda": Emoji08,
+    "Rooster": Emoji09,
+    "Penguin": Emoji10,
+    "Turtle": Emoji11,
+    "Fish": Emoji12,
+    "Octopus": Emoji13,
+    "Butterfly": Emoji14,
+    "Flower": Emoji15,
+    "Tree": Emoji16,
+    "Cactus": Emoji17,
+    "Mushroom": Emoji18,
+    "Globe": Emoji19,
+    "Moon": Emoji20,
+    "Cloud": Emoji21,
+    "Fire": Emoji22,
+    "Banana": Emoji23,
+    "Apple": Emoji24,
+    "Strawberry": Emoji25,
+    "Corn": Emoji26,
+    "Pizza": Emoji27,
+    "Cake": Emoji28,
+    "Heart": Emoji29,
+    "Smiley": Emoji30,
+    "Robot": Emoji31,
+    "Hat": Emoji32,
+    "Glasses": Emoji33,
+    "Spanner": Emoji34,
+    "Santa": Emoji35,
+    "Thumbs Up": Emoji36,
+    "Umbrella": Emoji37,
+    "Hourglass": Emoji38,
+    "Clock": Emoji39,
+    "Gift": Emoji40,
+    "Light Bulb": Emoji41,
+    "Book": Emoji42,
+    "Pencil": Emoji43,
+    "Paperclip": Emoji44,
+    "Scissors": Emoji45,
+    "Lock": Emoji46,
+    "Key": Emoji47,
+    "Hammer": Emoji48,
+    "Telephone": Emoji49,
+    "Flag": Emoji50,
+    "Train": Emoji51,
+    "Bicycle": Emoji52,
+    "Aeroplane": Emoji53,
+    "Rocket": Emoji54,
+    "Trophy": Emoji55,
+    "Ball": Emoji56,
+    "Guitar": Emoji57,
+    "Trumpet": Emoji58,
+    "Bell": Emoji59,
+    "Anchor": Emoji60,
+    "Headphones": Emoji61,
+    "Folder": Emoji62,
+    "Pin": Emoji63,
+};
+
 interface IProps {
     pending?: boolean;
     displayName?: string; // required if pending is true
@@ -105,14 +236,17 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
         let sasDisplay;
         let sasCaption;
         if (this.props.sas.emoji) {
-            const emojiBlocks = this.props.sas.emoji.map((emoji, i) => (
-                <div className="mx_VerificationShowSas_emojiSas_block" key={i}>
-                    <div className="mx_VerificationShowSas_emojiSas_emoji" aria-hidden={true}>
-                        {emoji[0]}
+            const emojiBlocks = this.props.sas.emoji.map((emoji, i) => {
+                const EmojiImage = emojiImages[emoji[1]];
+                return (
+                    <div className="mx_VerificationShowSas_emojiSas_block" key={i}>
+                        <div className="mx_VerificationShowSas_emojiSas_emoji" aria-hidden={true}>
+                            <EmojiImage />
+                        </div>
+                        <div className="mx_VerificationShowSas_emojiSas_label">{tEmoji(emoji, locale)}</div>
                     </div>
-                    <div className="mx_VerificationShowSas_emojiSas_label">{tEmoji(emoji, locale)}</div>
-                </div>
-            ));
+                );
+            });
             sasDisplay = (
                 <div className="mx_VerificationShowSas_emojiSas">
                     {emojiBlocks.slice(0, 4)}

yarn.lock

@@ -2392,11 +2392,6 @@
   dependencies:
     "@babel/runtime" "^7.17.9"
 
-"@matrix-org/spec@^1.7.0":
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/spec/-/spec-1.16.0.tgz#c88f4ed521e4c0bd3a4c108bcaf13f25173a0fdc"
-  integrity sha512-xUKHkwGXXISMCfTrx6JW6uGEK5O8IeZVOjBm7FX1h/ihpK6l50nlSIMRYdtz4V6q3pvOVBOCft4hPYTJVeTZDA==
-
 "@napi-rs/wasm-runtime@^0.2.11":
   version "0.2.12"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz#3e78a8b96e6c33a6c517e1894efbd5385a7cb6f2"
@@ -4535,6 +4530,11 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0:
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
 
+andybalaam-matrix-spec@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/andybalaam-matrix-spec/-/andybalaam-matrix-spec-0.0.1.tgz#e770977ee574f968731af945d6147fb10a30b3b9"
+  integrity sha512-w5XkYTAkUCOzppgFuhwZPgEU2fBaR7Tajqn+XJeSLmt6of2dpYZeGVNwXB8xgQxz2xlnIIH5aNUTrLao3RiKQA==
+
 another-json@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/another-json/-/another-json-0.2.0.tgz#b5f4019c973b6dd5c6506a2d93469cb6d32aeedc"