diff --git a/package.json b/package.json index 0ba5892d1f0..e319219cbd9 100644 --- a/package.json +++ b/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.2", "@sentry/browser": "^10.0.0", "@types/png-chunks-extract": "^1.0.2", "@vector-im/compound-design-tokens": "6.4.3", diff --git a/res/css/views/verification/_VerificationShowSas.pcss b/res/css/views/verification/_VerificationShowSas.pcss index 9e4d1f138b3..9934a44ee06 100644 --- a/res/css/views/verification/_VerificationShowSas.pcss +++ b/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: 48px; } .mx_VerificationShowSas_emojiSas_label { diff --git a/src/components/views/verification/VerificationShowSas.tsx b/src/components/views/verification/VerificationShowSas.tsx index 0f6272a8850..d364d3ff8cd 100644 --- a/src/components/views/verification/VerificationShowSas.tsx +++ b/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 = { + "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 let sasDisplay; let sasCaption; if (this.props.sas.emoji) { - const emojiBlocks = this.props.sas.emoji.map((emoji, i) => ( -
-
- {emoji[0]} + const emojiBlocks = this.props.sas.emoji.map((emoji, i) => { + const EmojiImage = emojiImages[emoji[1]]; + return ( +
+
+ +
+
{tEmoji(emoji, locale)}
-
{tEmoji(emoji, locale)}
-
- )); + ); + }); sasDisplay = (
{emojiBlocks.slice(0, 4)} diff --git a/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx b/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx index cf9e103ee64..a7dde8ebaa3 100644 --- a/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx +++ b/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx @@ -45,7 +45,7 @@ describe("IncomingSasDialog", () => { const emojis = container.getElementsByClassName("mx_VerificationShowSas_emojiSas_block"); expect(emojis.length).toEqual(7); for (const emoji of emojis) { - expect(emoji).toHaveTextContent("🦄Unicorn"); + expect(emoji).toHaveTextContent("Unicorn"); } }); }); @@ -63,7 +63,7 @@ function makeMockVerifier(): Mocked { } function makeMockSasCallbacks(): ShowSasCallbacks { - const unicorn: EmojiMapping = ["🦄", "unicorn"]; + const unicorn: EmojiMapping = ["🦄", "Unicorn"]; return { sas: { emoji: new Array(7).fill(unicorn), diff --git a/yarn.lock b/yarn.lock index 20ad046f5d1..534c7680ec8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2401,11 +2401,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" @@ -4543,6 +4538,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.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/andybalaam-matrix-spec/-/andybalaam-matrix-spec-0.0.2.tgz#7e5cac3226b515ad7d4fbf18f5db925978efc08d" + integrity sha512-f5PwWcy2hUp8RtCpbPo0xAymZsJn1NtXBTTkKvmx8edK3zcCQhOHBdLmd6WxOyUYfQGCI2c0MYWOrFUhagMZHw== + another-json@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/another-json/-/another-json-0.2.0.tgz#b5f4019c973b6dd5c6506a2d93469cb6d32aeedc"