From 2c34d6f87780976d5adeb6a2dd2596fa18e646dc Mon Sep 17 00:00:00 2001 From: Badi Ifaoui Date: Wed, 29 Nov 2023 10:39:29 +0100 Subject: [PATCH] feat: superhero dex & mint space panel buttons --- res/css/superhero/custom.css | 9 ++++++ res/themes/superhero/img/icons/diamond.svg | 3 ++ res/themes/superhero/img/icons/tokens.svg | 5 +++ .../views/spaces/MintTokenButton.tsx | 32 +++++++++++++++++++ .../views/spaces/SuperheroDexButton.tsx | 32 +++++++++++++++++++ src/i18n/strings/en_EN.json | 4 ++- 6 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 res/themes/superhero/img/icons/diamond.svg create mode 100644 res/themes/superhero/img/icons/tokens.svg create mode 100644 src/components/views/spaces/MintTokenButton.tsx create mode 100644 src/components/views/spaces/SuperheroDexButton.tsx diff --git a/res/css/superhero/custom.css b/res/css/superhero/custom.css index 4276a1fb54..4993b23167 100644 --- a/res/css/superhero/custom.css +++ b/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); +} diff --git a/res/themes/superhero/img/icons/diamond.svg b/res/themes/superhero/img/icons/diamond.svg new file mode 100644 index 0000000000..3dde2a30d9 --- /dev/null +++ b/res/themes/superhero/img/icons/diamond.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/superhero/img/icons/tokens.svg b/res/themes/superhero/img/icons/tokens.svg new file mode 100644 index 0000000000..3a9dbdadca --- /dev/null +++ b/res/themes/superhero/img/icons/tokens.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/components/views/spaces/MintTokenButton.tsx b/src/components/views/spaces/MintTokenButton.tsx new file mode 100644 index 0000000000..8d2feae0cb --- /dev/null +++ b/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 ( + <> + + {!isPanelCollapsed ? _t('mint_a_token') : null} + + + ); +}; + +export default MintTokenButton; diff --git a/src/components/views/spaces/SuperheroDexButton.tsx b/src/components/views/spaces/SuperheroDexButton.tsx new file mode 100644 index 0000000000..0824fc1019 --- /dev/null +++ b/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 ( + <> + + {!isPanelCollapsed ? _t("superhero_dex") : null} + + + ); +}; + +export default SuperheroDexButton; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 582f845035..a3888bf012 100644 --- a/src/i18n/strings/en_EN.json +++ b/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" }