feat: superhero dex & mint space panel buttons

res/css/superhero/custom.css

@@ -8,3 +8,12 @@
     height: 16px;
     margin-right: 4px;
 }
+.mx_QuickSettingsButton.sh_SuperheroDexButton::before {
+    -webkit-mask-image: url(../../themes/superhero/img/icons/diamond.svg);
+    mask-image: url(../../themes/superhero/img/icons/diamond.svg);
+}
+
+.mx_QuickSettingsButton.sh_MintTokenButton::before {
+    -webkit-mask-image: url(../../themes/superhero/img/icons/tokens.svg);
+    mask-image: url(../../themes/superhero/img/icons/tokens.svg);
+}

res/themes/superhero/img/icons/diamond.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 9.69255L7.29577 4.91003H16.7042L22 9.69255L12.0282 19.0945L2 9.69255ZM7.88733 6.3774H10.7606L16.9014 12.4371L12 17.0565L4.19718 9.71973L7.88733 6.3774Z" fill="currentColor"/>
+</svg>

res/themes/superhero/img/icons/tokens.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M4.77777 17.4467C5.80561 18.1334 7.01401 18.5 8.25018 18.5C9.61022 18.5 10.9245 18.0567 12 17.2502C12.7164 17.7874 13.5435 18.1671 14.4271 18.3584C15.6806 18.6299 16.9873 18.5091 18.1698 18.0125C19.3524 17.5159 20.3535 16.6676 21.0374 15.5826C21.7212 14.4976 22.0548 13.2284 21.9927 11.9474C21.9306 10.6664 21.4759 9.43549 20.6903 8.42171C19.9047 7.40793 18.8262 6.66038 17.6012 6.28048C16.3762 5.90058 15.0639 5.90674 13.8426 6.29811C13.1758 6.51176 12.5537 6.83456 12 7.24979C11.5837 6.93761 11.1279 6.677 10.642 6.47576C9.49995 6.00271 8.24325 5.87894 7.03083 6.12009C5.81842 6.36125 4.70474 6.95651 3.83064 7.83059C2.95653 8.70466 2.36126 9.81831 2.1201 11.0307C1.87893 12.2431 2.00271 13.4997 2.47577 14.6418C2.94883 15.7838 3.74993 16.7599 4.77777 17.4467ZM13.6667 9.13148C14.2117 10.0779 14.5004 11.153 14.5004 12.25C14.5004 13.354 14.2083 14.4279 13.6669 15.3683C14.0563 15.6284 14.4932 15.8147 14.956 15.9149C15.7082 16.0778 16.4923 16.0053 17.2019 15.7073C17.9114 15.4092 18.5121 14.9001 18.9224 14.249C19.3327 13.5978 19.5327 12.8362 19.4953 12.0675C19.4578 11.2988 19.1848 10.5603 18.7132 9.95207C18.2416 9.34386 17.5943 8.89548 16.8592 8.66777C16.124 8.44007 15.3366 8.44406 14.6037 8.67922C14.27 8.78633 13.9549 8.93902 13.6667 9.13148Z"
+        fill="white" />
+</svg>

src/components/views/spaces/MintTokenButton.tsx

@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import AccessibleTooltipButton from "matrix-react-sdk/src/components/views/elements/AccessibleTooltipButton";
+import { _t } from "matrix-react-sdk/src/languageHandler";
+import React, { useCallback } from "react";
+
+const MintTokenButton: React.FC<{
+    isPanelCollapsed: boolean;
+}> = ({ isPanelCollapsed = false }) => {
+    const MINT_TOKEN_URL = "https://wallet.superhero.com/";
+
+    const onOpenDex = useCallback(async () => {
+        window.open(MINT_TOKEN_URL, "_blank");
+    }, []);
+
+    return (
+        <>
+            <AccessibleTooltipButton
+                className={classNames("mx_QuickSettingsButton", "sh_MintTokenButton", {
+                    expanded: !isPanelCollapsed,
+                })}
+                onClick={onOpenDex}
+                title={_t('mint_a_token')}
+                forceHide={!isPanelCollapsed}
+                aria-expanded={!isPanelCollapsed}
+            >
+                {!isPanelCollapsed ? _t('mint_a_token') : null}
+            </AccessibleTooltipButton>
+        </>
+    );
+};
+
+export default MintTokenButton;

src/components/views/spaces/SuperheroDexButton.tsx

@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import AccessibleTooltipButton from "matrix-react-sdk/src/components/views/elements/AccessibleTooltipButton";
+import { _t } from "matrix-react-sdk/src/languageHandler";
+import React, { useCallback } from "react";
+
+const SuperheroDexButton: React.FC<{
+    isPanelCollapsed: boolean;
+}> = ({ isPanelCollapsed = false }) => {
+    const DEX_URL = "https://aepp.dex.superhero.com/";
+
+    const onOpenDex = useCallback(async () => {
+        window.open(DEX_URL, "_blank");
+    }, []);
+
+    return (
+        <>
+            <AccessibleTooltipButton
+                className={classNames("mx_QuickSettingsButton", "sh_SuperheroDexButton", {
+                    expanded: !isPanelCollapsed,
+                })}
+                onClick={onOpenDex}
+                title={_t("superhero_dex")}
+                forceHide={!isPanelCollapsed}
+                aria-expanded={!isPanelCollapsed}
+            >
+                {!isPanelCollapsed ? _t("superhero_dex") : null}
+            </AccessibleTooltipButton>
+        </>
+    );
+};
+
+export default SuperheroDexButton;

src/i18n/strings/en_EN.json

@@ -36,5 +36,7 @@
     "unknown_device": "Unknown device",
     "use_brand_on_mobile": "Use %(brand)s on mobile",
     "web_default_device_name": "%(appName)s: %(browserName)s on %(osName)s",
-    "welcome_to_superhero": "Welcome to Superhero"
+    "welcome_to_superhero": "Welcome to Superhero",
+    "superhero_dex": "Superhero DEX",
+    "mint_a_token": "Mint a token"
 }