From 07005940dc45a1921d530e18c5c49efd0f4c4d61 Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@jkrb.io>
Date: Thu, 14 Nov 2024 19:02:21 +0700
Subject: [PATCH] feat: Support options refresh with Discord and Mail (#2331)

---
 packages/app/src/config/pages.ts              |  2 +-
 packages/app/src/img/book.svg                 |  1 +
 packages/app/src/img/discord.svg              |  6 ++
 packages/app/src/img/discord_outline.svg      |  1 +
 packages/app/src/img/envelope.svg             |  1 +
 packages/app/src/img/mail.svg                 |  1 +
 packages/app/src/library/Modal/Title.tsx      | 16 ++--
 packages/app/src/library/SideMenu/Main.tsx    | 24 ------
 .../src/library/SideMenu/Primary/Wrappers.ts  |  2 +-
 .../library/SideMenu/Secondary/Wrappers.ts    | 14 ++--
 packages/app/src/library/SideMenu/Wrapper.ts  |  2 +-
 packages/app/src/library/SideMenu/index.tsx   | 79 +++++++++++++------
 packages/app/src/locale/cn/base.json          |  1 +
 packages/app/src/locale/cn/modals.json        |  3 +
 packages/app/src/locale/en/base.json          |  1 +
 packages/app/src/locale/en/modals.json        |  3 +
 .../app/src/modals/DiscordSupport/Wrapper.ts  | 30 +++++++
 .../app/src/modals/DiscordSupport/index.tsx   | 32 ++++++++
 .../app/src/modals/GoToFeedback/index.tsx     | 39 ---------
 .../app/src/modals/MailSupport/Wrapper.ts     | 30 +++++++
 packages/app/src/modals/MailSupport/index.tsx | 25 ++++++
 packages/app/src/overlay/index.tsx            |  6 +-
 packages/consts/src/index.ts                  |  2 +
 23 files changed, 216 insertions(+), 105 deletions(-)
 create mode 100644 packages/app/src/img/book.svg
 create mode 100644 packages/app/src/img/discord.svg
 create mode 100644 packages/app/src/img/discord_outline.svg
 create mode 100644 packages/app/src/img/envelope.svg
 create mode 100644 packages/app/src/img/mail.svg
 create mode 100644 packages/app/src/modals/DiscordSupport/Wrapper.ts
 create mode 100644 packages/app/src/modals/DiscordSupport/index.tsx
 delete mode 100644 packages/app/src/modals/GoToFeedback/index.tsx
 create mode 100644 packages/app/src/modals/MailSupport/Wrapper.ts
 create mode 100644 packages/app/src/modals/MailSupport/index.tsx

diff --git a/packages/app/src/config/pages.ts b/packages/app/src/config/pages.ts
index 92b76cd0f5..3107a6954e 100644
--- a/packages/app/src/config/pages.ts
+++ b/packages/app/src/config/pages.ts
@@ -27,7 +27,7 @@ export const PageCategories: PageCategoryItems = [
 
 export const PagesConfig: PagesConfigItems = [
   {
-    category: 1,
+    category: 2,
     key: 'overview',
     uri: `${BASE_URL}`,
     hash: '/overview',
diff --git a/packages/app/src/img/book.svg b/packages/app/src/img/book.svg
new file mode 100644
index 0000000000..3c7fc22791
--- /dev/null
+++ b/packages/app/src/img/book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="primary" d="M0 32C0 14.3 14.3 0 32 0h64c17.7 0 32 14.3 32 32v64H0V32zm0 96h128v256H0V128zm0 288h128v64c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32v-64zM160 32c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64H160V32zm0 96h128v256H160V128zm0 288h128v64c0 17.7-14.3 32-32 32h-64c-17.7 0-32-14.3-32-32v-64zm203.6-19.9L320 232.6v-89.9l100.4-26.9 66 247.4-122.8 32.9zM412.2 85L320 109.6V11l36.9-9.9c16.9-4.6 34.4 5.5 38.9 22.6L412.2 85zm-40.4 342l122.8-32.9 16.3 61.1c4.5 17-5.5 34.5-22.5 39.1L427 510.8c-16.9 4.6-34.4-5.5-38.9-22.6L371.8 427z"/></svg>
\ No newline at end of file
diff --git a/packages/app/src/img/discord.svg b/packages/app/src/img/discord.svg
new file mode 100644
index 0000000000..8bc82e87a5
--- /dev/null
+++ b/packages/app/src/img/discord.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
+  <g>
+    <path class="primary" d="M677.7,140.9c-51.8-24.2-107.2-41.8-165-51.9-7.1,12.9-15.4,30.1-21.1,43.9-61.5-9.3-122.5-9.3-182.9,0-5.7-13.8-14.2-31-21.4-43.9-58,10-113.4,27.7-165.2,52C17.6,298.9-10.8,452.8,3.4,604.5c69.3,51.7,136.4,83.2,202.4,103.7,16.3-22.4,30.8-46.3,43.4-71.4-23.8-9.1-46.7-20.2-68.3-33.2,5.7-4.2,11.3-8.7,16.7-13.2,131.6,61.6,274.7,61.6,404.7,0,5.5,4.6,11.1,9,16.7,13.2-21.6,13-44.5,24.2-68.4,33.3,12.5,25.1,27,49,43.4,71.4,66.1-20.6,133.3-52,202.5-103.8,16.6-175.9-28.4-328.4-118.9-463.6ZM267.1,511.2c-39.5,0-71.9-36.9-71.9-81.8s31.7-81.9,71.9-81.9,72.6,36.9,71.9,81.9c0,44.9-31.7,81.8-71.9,81.8ZM532.9,511.2c-39.5,0-71.9-36.9-71.9-81.8s31.7-81.9,71.9-81.9,72.6,36.9,71.9,81.9c0,44.9-31.7,81.8-71.9,81.8Z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/app/src/img/discord_outline.svg b/packages/app/src/img/discord_outline.svg
new file mode 100644
index 0000000000..0575b060af
--- /dev/null
+++ b/packages/app/src/img/discord_outline.svg
@@ -0,0 +1 @@
+<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.894 4.344A17.409 17.409 0 0014.532 3c-.192.33-.406.779-.555 1.13a16.677 16.677 0 00-4.833 0c-.15-.351-.373-.8-.555-1.13a17.162 17.162 0 00-4.363 1.344C1.463 8.419.716 12.397 1.09 16.323A17.782 17.782 0 006.435 19a13 13 0 001.14-1.845 11.182 11.182 0 01-1.802-.864c.15-.107.299-.224.438-.342 3.477 1.59 7.243 1.59 10.678 0 .15.118.288.235.437.342a11.18 11.18 0 01-1.802.864A13 13 0 0016.665 19a17.684 17.684 0 005.345-2.677c.459-4.544-.726-8.491-3.116-11.979zM8.056 13.901c-1.045 0-1.899-.949-1.899-2.112 0-1.162.832-2.112 1.899-2.112 1.056 0 1.92.95 1.899 2.112 0 1.163-.843 2.112-1.9 2.112zm7.009 0c-1.045 0-1.9-.949-1.9-2.112 0-1.162.833-2.112 1.9-2.112 1.056 0 1.92.95 1.899 2.112 0 1.163-.832 2.112-1.899 2.112z" stroke="var(--text-color-primary)" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/packages/app/src/img/envelope.svg b/packages/app/src/img/envelope.svg
new file mode 100644
index 0000000000..835dc1f7c0
--- /dev/null
+++ b/packages/app/src/img/envelope.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="primary" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4l217.6 163.2c11.4 8.5 27 8.5 38.4 0l217.6-163.2c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48H48zM0 176v208c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V176L294.4 339.2a63.9 63.9 0 01-76.8 0L0 176z"/></svg>
\ No newline at end of file
diff --git a/packages/app/src/img/mail.svg b/packages/app/src/img/mail.svg
new file mode 100644
index 0000000000..7a5336bde6
--- /dev/null
+++ b/packages/app/src/img/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path class="primary" d="M112 32h288c8.8 0 16 7.2 16 16v16h32V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v144h32V48c0-8.8 7.2-16 16-16zm112 112c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v224c0 8.8-7.2 16-16 16H416v32h176c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H240c-26.5 0-48 21.5-48 48v48h32v-48zM48 256h288c8.8 0 16 7.2 16 16v5L196.9 391.9c-1.4 1-3.1 1.6-4.9 1.6s-3.5-.6-4.9-1.6L32 277v-5c0-8.8 7.2-16 16-16zM32 464V316.8l136 100.8c6.9 5.1 15.3 7.9 24 7.9s17-2.8 24-7.9l136-100.8V464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16zm16-240c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48H48zm448-64c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-64zm16 64v-32h32v32h-32z"/></svg>
\ No newline at end of file
diff --git a/packages/app/src/library/Modal/Title.tsx b/packages/app/src/library/Modal/Title.tsx
index 716e8dc627..0357a5ce84 100644
--- a/packages/app/src/library/Modal/Title.tsx
+++ b/packages/app/src/library/Modal/Title.tsx
@@ -13,7 +13,7 @@ import type { CSSProperties } from 'styled-components';
 import { ButtonHelp } from 'ui-buttons';
 
 interface TitleProps {
-  title: string;
+  title?: string;
   icon?: IconProp;
   Svg?: FunctionComponent<SVGProps<AnyJson>>;
   fixed?: boolean;
@@ -42,12 +42,14 @@ export const Title = ({
     <TitleWrapper $fixed={fixed || false} style={{ ...style }}>
       <div>
         {graphic}
-        <h2>
-          {title}
-          {helpKey ? (
-            <ButtonHelp marginLeft onClick={() => openHelp(helpKey)} />
-          ) : null}
-        </h2>
+        {title && (
+          <h2>
+            {title}
+            {helpKey ? (
+              <ButtonHelp marginLeft onClick={() => openHelp(helpKey)} />
+            ) : null}
+          </h2>
+        )}
       </div>
       <div>
         <button type="button" onClick={() => setModalStatus('closing')}>
diff --git a/packages/app/src/library/SideMenu/Main.tsx b/packages/app/src/library/SideMenu/Main.tsx
index c8a96696a0..b5cbe3160d 100644
--- a/packages/app/src/library/SideMenu/Main.tsx
+++ b/packages/app/src/library/SideMenu/Main.tsx
@@ -17,11 +17,9 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { Heading } from './Heading/Heading';
 import { Primary } from './Primary';
-import { LogoWrapper } from './Wrapper';
 import { useBalances } from 'contexts/Balances';
 import { useSyncing } from 'hooks/useSyncing';
 import type { AnyJson } from '@w3ux/types';
-import LogoSVG from 'img/logo.svg?react';
 
 export const Main = () => {
   const { t, i18n } = useTranslation('base');
@@ -127,28 +125,6 @@ export const Main = () => {
 
   return (
     <>
-      <LogoWrapper $minimised={sideMenuMinimised}>
-        {sideMenuMinimised ? (
-          <networkData.brand.icon
-            style={{ maxHeight: '100%', width: '1.8rem' }}
-          />
-        ) : (
-          <>
-            <networkData.brand.icon
-              style={{
-                maxHeight: '100%',
-                height: '100%',
-                width: '1.5rem',
-              }}
-            />
-
-            <span>
-              <LogoSVG className="logo" />
-            </span>
-          </>
-        )}
-      </LogoWrapper>
-
       {pageConfig.categories.map(
         ({ id: categoryId, key: categoryKey }: PageCategory) => (
           <div className="inner" key={`sidemenu_category_${categoryId}`}>
diff --git a/packages/app/src/library/SideMenu/Primary/Wrappers.ts b/packages/app/src/library/SideMenu/Primary/Wrappers.ts
index 660d6d914e..76eec867c4 100644
--- a/packages/app/src/library/SideMenu/Primary/Wrappers.ts
+++ b/packages/app/src/library/SideMenu/Primary/Wrappers.ts
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 export const Wrapper = styled(motion.div)`
   border: none;
-  border-radius: 0.7rem;
+  border-radius: 0.8rem;
   height: 3.2rem;
   display: flex;
   flex-flow: row wrap;
diff --git a/packages/app/src/library/SideMenu/Secondary/Wrappers.ts b/packages/app/src/library/SideMenu/Secondary/Wrappers.ts
index 63a65205d7..9ec6e55605 100644
--- a/packages/app/src/library/SideMenu/Secondary/Wrappers.ts
+++ b/packages/app/src/library/SideMenu/Secondary/Wrappers.ts
@@ -7,14 +7,14 @@ import type { MinimisedProps } from '../types';
 
 export const Wrapper = styled(motion.button)<MinimisedProps>`
   border: 1px solid var(--border-secondary-color);
-  border-radius: 0.7rem;
-  height: 3.2rem;
+  border-radius: 0.8rem;
+  height: 3.3rem;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   position: relative;
   padding: 0.75rem 0rem 0.75rem 0.5rem;
-  margin: 0.8rem 0.2rem 0.8rem 0;
+  margin: 0.8rem 0.2rem 1rem 0;
   width: 100%;
 
   .name {
@@ -52,16 +52,16 @@ export const Wrapper = styled(motion.button)<MinimisedProps>`
 `;
 
 export const MinimisedWrapper = styled(motion.button)`
-  border: 1px solid var(--border-primary-color);
-  border-radius: 0.5rem;
+  border: 1px solid var(--border-secondary-color);
+  border-radius: 0.7rem;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   position: relative;
   padding: 0rem 0rem;
-  margin: 0.6rem 0 0.6rem 0;
-  min-height: 2.8rem;
+  margin: 0.6rem 0 1.15rem 0;
+  min-height: 3.2rem;
   width: 100%;
 
   &.active {
diff --git a/packages/app/src/library/SideMenu/Wrapper.ts b/packages/app/src/library/SideMenu/Wrapper.ts
index eea737cced..9db4e9db6f 100644
--- a/packages/app/src/library/SideMenu/Wrapper.ts
+++ b/packages/app/src/library/SideMenu/Wrapper.ts
@@ -82,7 +82,7 @@ export const LogoWrapper = styled.div<MinimisedProps>`
   width: 100%;
   height: 2.8rem;
   padding: ${(props) => (props.$minimised ? '0' : '0.4rem 0 0.4rem 0.5rem')};
-  margin-bottom: ${(props) => (props.$minimised ? '1.5rem' : '1.25rem')};
+  margin-bottom: ${(props) => (props.$minimised ? '0.75rem' : '0.5rem')};
   position: relative;
   text-transform: uppercase;
 
diff --git a/packages/app/src/library/SideMenu/index.tsx b/packages/app/src/library/SideMenu/index.tsx
index 3c26ced30c..a7686811bf 100644
--- a/packages/app/src/library/SideMenu/index.tsx
+++ b/packages/app/src/library/SideMenu/index.tsx
@@ -13,8 +13,9 @@ import { useTheme } from 'contexts/Themes';
 import { useUi } from 'contexts/UI';
 import type { UIContextInterface } from 'contexts/UI/types';
 import CogOutlineSVG from 'img/cog-outline.svg?react';
-import ForumSVG from 'img/forum.svg?react';
-import InfoSVG from 'img/info.svg?react';
+import EnvelopeSVG from 'img/envelope.svg?react';
+import BookSVG from 'img/book.svg?react';
+import DiscordSVG from 'img/discord.svg?react';
 import LanguageSVG from 'img/language.svg?react';
 import LogoGithubSVG from 'img/logo-github.svg?react';
 import MoonOutlineSVG from 'img/moon-outline.svg?react';
@@ -24,9 +25,10 @@ import { useNetwork } from 'contexts/Network';
 import { Heading } from './Heading/Heading';
 import { Main } from './Main';
 import { Secondary } from './Secondary';
-import { ConnectionSymbol, Separator, Wrapper } from './Wrapper';
+import { ConnectionSymbol, Separator, Wrapper, LogoWrapper } from './Wrapper';
 import { useOutsideAlerter, useOnResize } from '@w3ux/hooks';
 import { Side } from 'ui-structure';
+import LogoSVG from 'img/logo.svg?react';
 
 export const SideMenu = () => {
   const { t } = useTranslation('base');
@@ -71,6 +73,45 @@ export const SideMenu = () => {
     >
       <Wrapper ref={ref} $minimised={sideMenuMinimised}>
         <section>
+          <LogoWrapper $minimised={sideMenuMinimised}>
+            {sideMenuMinimised ? (
+              <networkData.brand.icon
+                style={{ maxHeight: '100%', width: '1.8rem' }}
+              />
+            ) : (
+              <>
+                <networkData.brand.icon
+                  style={{
+                    maxHeight: '100%',
+                    height: '100%',
+                    width: '1.5rem',
+                  }}
+                />
+
+                <span>
+                  <LogoSVG className="logo" />
+                </span>
+              </>
+            )}
+          </LogoWrapper>
+          <Heading title={t('network')} minimised={sideMenuMinimised} />
+          <Secondary
+            classes={[apiStatusClass]}
+            name={capitalizeFirstLetter(network)}
+            onClick={() => openModal({ key: 'Networks' })}
+            icon={{
+              Svg: networkData.brand.inline.svg,
+              size: networkData.brand.inline.size,
+            }}
+            minimised={sideMenuMinimised}
+            action={
+              <ConnectionSymbol
+                className={apiStatusClass}
+                style={{ opacity: 0.7 }}
+              />
+            }
+          />
+          <Separator />
           <Main />
           <div className="inner">
             <Heading title={t('support')} minimised={sideMenuMinimised} />
@@ -81,37 +122,29 @@ export const SideMenu = () => {
               name={t('resources')}
               minimised={sideMenuMinimised}
               icon={{
-                Svg: InfoSVG,
-                size: sideMenuMinimised ? '1.4em' : '1.2em',
+                Svg: BookSVG,
+                size: sideMenuMinimised ? '0.95em' : '0.9em',
               }}
             />
+
             <Secondary
-              onClick={() => openModal({ key: 'GoToFeedback' })}
-              name={t('support')}
+              onClick={() => openModal({ key: 'DiscordSupport', size: 'sm' })}
+              name="Discord"
               minimised={sideMenuMinimised}
               icon={{
-                Svg: ForumSVG,
-                size: sideMenuMinimised ? '1.4em' : '1.2em',
+                Svg: DiscordSVG,
+                size: sideMenuMinimised ? '1.2em' : '1.2em',
               }}
             />
 
-            <Separator />
-            <Heading title={t('network')} minimised={sideMenuMinimised} />
             <Secondary
-              classes={[apiStatusClass]}
-              name={capitalizeFirstLetter(network)}
-              onClick={() => openModal({ key: 'Networks' })}
+              onClick={() => openModal({ key: 'MailSupport', size: 'sm' })}
+              name={t('email', { ns: 'base' })}
+              minimised={sideMenuMinimised}
               icon={{
-                Svg: networkData.brand.inline.svg,
-                size: networkData.brand.inline.size,
+                Svg: EnvelopeSVG,
+                size: sideMenuMinimised ? '1.05em' : '1em',
               }}
-              minimised={sideMenuMinimised}
-              action={
-                <ConnectionSymbol
-                  className={apiStatusClass}
-                  style={{ opacity: 0.7 }}
-                />
-              }
             />
           </div>
         </section>
diff --git a/packages/app/src/locale/cn/base.json b/packages/app/src/locale/cn/base.json
index a170580bf2..b6322ecb06 100644
--- a/packages/app/src/locale/cn/base.json
+++ b/packages/app/src/locale/cn/base.json
@@ -3,6 +3,7 @@
     "active": "激活",
     "community": "社区",
     "decentralization": "去中心化",
+    "email": "电子邮件",
     "goTo": "查看",
     "help": "帮助",
     "inactive": "未激活",
diff --git a/packages/app/src/locale/cn/modals.json b/packages/app/src/locale/cn/modals.json
index fadd7eea15..5b1d018bee 100644
--- a/packages/app/src/locale/cn/modals.json
+++ b/packages/app/src/locale/cn/modals.json
@@ -102,6 +102,7 @@
     "gettingAddress": "正在获取地址...",
     "goToAccounts": "帐户",
     "goToConnect": "连接",
+    "goToDiscord": "前往 Discord",
     "hardware": "硬件",
     "helpAndSupport": "帮助和支持",
     "hide": "隐藏",
@@ -238,6 +239,8 @@
     "submitting": "提交中",
     "subscanDisabled": "Subscan己断开",
     "successfullyFetchedAddress": "成功获取地址",
+    "supportDiscord": "加入 Staking Dashboard Discord 频道，获得我们团队的专门支持并与 Polkadot 社区建立联系.",
+    "supportEmail": "我们为 Staking Dashboard 用户提供专用电子邮件支持。联系我们，我们的团队将尽力及时回复并为您提供帮助.",
     "thisMinimumDelay": "这个最小延迟近似等于{{count}}个块",
     "titleExtensionConnected": "{{title}} 扩展已连接",
     "toggleFeatures": "功能切换",
diff --git a/packages/app/src/locale/en/base.json b/packages/app/src/locale/en/base.json
index 4e3ab1243d..bb0ee06c03 100644
--- a/packages/app/src/locale/en/base.json
+++ b/packages/app/src/locale/en/base.json
@@ -3,6 +3,7 @@
     "active": "Active",
     "community": "Community",
     "decentralization": "Decentralization",
+    "email": "Email",
     "goTo": "Go To",
     "help": "Help",
     "inactive": "Inactive",
diff --git a/packages/app/src/locale/en/modals.json b/packages/app/src/locale/en/modals.json
index ce6cb26e6c..3a7b6b5ef3 100644
--- a/packages/app/src/locale/en/modals.json
+++ b/packages/app/src/locale/en/modals.json
@@ -110,6 +110,7 @@
     "gettingAddress": "Getting Address...",
     "goToAccounts": "Go To Accounts",
     "goToConnect": "Go To Connect",
+    "goToDiscord": "Go to Discord",
     "hardware": "Hardware",
     "helpAndSupport": "Help and Support",
     "hide": "Hide",
@@ -250,6 +251,8 @@
     "submitting": "Submitting",
     "subscanDisabled": "Subscan Disabled",
     "successfullyFetchedAddress": "Successfully Fetched Address",
+    "supportDiscord": "Join the Staking Dashboard Discord channel to receive dedicated support from our team and connect with the Polkadot community.",
+    "supportEmail": "We provide dedicated email support for Staking Dashboard users. Contact us, and our team will strive to respond promptly to assist you.",
     "thisMinimumDelay_one": "This minimum delay is the approximate equivalent of {{count}} block.",
     "thisMinimumDelay_other": "This minimum delay is the approximate equivalent of {{count}} blocks.",
     "titleExtensionConnected": "The {{title}} extension has been connected.",
diff --git a/packages/app/src/modals/DiscordSupport/Wrapper.ts b/packages/app/src/modals/DiscordSupport/Wrapper.ts
new file mode 100644
index 0000000000..1a70264b36
--- /dev/null
+++ b/packages/app/src/modals/DiscordSupport/Wrapper.ts
@@ -0,0 +1,30 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import styled from 'styled-components';
+
+export const SupportWrapper = styled.div`
+  padding: 0 1.75rem 2rem 1.75rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > svg {
+    width: 100%;
+    height: auto;
+    max-width: 7rem;
+  }
+
+  > h1 {
+    margin-top: 0.5rem;
+    a {
+      color: var(--text-color-primary);
+    }
+  }
+
+  > h4 {
+    padding: 2.5rem 1.5rem 0.75rem 1.5rem;
+    text-align: center;
+  }
+`;
diff --git a/packages/app/src/modals/DiscordSupport/index.tsx b/packages/app/src/modals/DiscordSupport/index.tsx
new file mode 100644
index 0000000000..e5f3ff5a5b
--- /dev/null
+++ b/packages/app/src/modals/DiscordSupport/index.tsx
@@ -0,0 +1,32 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import DiscordOutlineSvg from 'img/discord_outline.svg?react';
+import { Title } from 'library/Modal/Title';
+import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
+import { SupportWrapper } from './Wrapper';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DiscordSupportUrl } from 'consts';
+import { useTranslation } from 'react-i18next';
+
+export const DiscordSupport = () => {
+  const { t } = useTranslation('modals');
+  return (
+    <>
+      <Title />
+      <ModalPadding verticalOnly>
+        <SupportWrapper>
+          <DiscordOutlineSvg />
+          <h4>{t('supportDiscord')}</h4>
+          <h1>
+            <a href={DiscordSupportUrl} target="_blank" rel="noreferrer">
+              {t('goToDiscord')} &nbsp;
+              <FontAwesomeIcon icon={faExternalLinkAlt} transform="shrink-4" />
+            </a>
+          </h1>
+        </SupportWrapper>
+      </ModalPadding>
+    </>
+  );
+};
diff --git a/packages/app/src/modals/GoToFeedback/index.tsx b/packages/app/src/modals/GoToFeedback/index.tsx
deleted file mode 100644
index 97e810549e..0000000000
--- a/packages/app/src/modals/GoToFeedback/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useTranslation } from 'react-i18next';
-import ForumSVG from 'img/forum.svg?react';
-import { Title } from 'library/Modal/Title';
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
-
-export const GoToFeedback = () => {
-  const { t } = useTranslation('modals');
-  return (
-    <>
-      <Title title={t('helpAndSupport')} Svg={ForumSVG} />
-      <ModalPadding verticalOnly>
-        <div
-          style={{
-            padding: '0 1.75rem 0.5rem 1.75rem',
-            width: '100%',
-          }}
-        >
-          <h4 style={{ paddingBottom: '0.75rem' }}>{t('feedbackPage')}</h4>
-          <h2 style={{ marginTop: '0.75rem' }}>
-            <a
-              href="https://support.polkadot.network/support/home"
-              target="_blank"
-              rel="noreferrer"
-              style={{ color: 'var(--accent-color-primary' }}
-            >
-              {t('openSupport')} &nbsp;
-              <FontAwesomeIcon icon={faExternalLinkAlt} transform="shrink-3" />
-            </a>
-          </h2>
-        </div>
-      </ModalPadding>
-    </>
-  );
-};
diff --git a/packages/app/src/modals/MailSupport/Wrapper.ts b/packages/app/src/modals/MailSupport/Wrapper.ts
new file mode 100644
index 0000000000..1a70264b36
--- /dev/null
+++ b/packages/app/src/modals/MailSupport/Wrapper.ts
@@ -0,0 +1,30 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import styled from 'styled-components';
+
+export const SupportWrapper = styled.div`
+  padding: 0 1.75rem 2rem 1.75rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > svg {
+    width: 100%;
+    height: auto;
+    max-width: 7rem;
+  }
+
+  > h1 {
+    margin-top: 0.5rem;
+    a {
+      color: var(--text-color-primary);
+    }
+  }
+
+  > h4 {
+    padding: 2.5rem 1.5rem 0.75rem 1.5rem;
+    text-align: center;
+  }
+`;
diff --git a/packages/app/src/modals/MailSupport/index.tsx b/packages/app/src/modals/MailSupport/index.tsx
new file mode 100644
index 0000000000..a177a8c9b0
--- /dev/null
+++ b/packages/app/src/modals/MailSupport/index.tsx
@@ -0,0 +1,25 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import MailSVG from 'img/mail.svg?react';
+import { Title } from 'library/Modal/Title';
+import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
+import { MailSupportAddress } from 'consts';
+import { SupportWrapper } from './Wrapper';
+import { useTranslation } from 'react-i18next';
+
+export const MailSupport = () => {
+  const { t } = useTranslation('modals');
+  return (
+    <>
+      <Title />
+      <ModalPadding verticalOnly>
+        <SupportWrapper>
+          <MailSVG />
+          <h4>{t('supportEmail')}</h4>
+          <h1>{MailSupportAddress}</h1>
+        </SupportWrapper>
+      </ModalPadding>
+    </>
+  );
+};
diff --git a/packages/app/src/overlay/index.tsx b/packages/app/src/overlay/index.tsx
index 4abf6806a4..5e75531087 100644
--- a/packages/app/src/overlay/index.tsx
+++ b/packages/app/src/overlay/index.tsx
@@ -13,7 +13,8 @@ import { ChangePoolRoles } from '../modals/ChangePoolRoles';
 import { ChooseLanguage } from '../modals/ChooseLanguage';
 import { ClaimReward } from '../modals/ClaimReward';
 import { Connect } from '../modals/Connect';
-import { GoToFeedback } from '../modals/GoToFeedback';
+import { MailSupport } from '../modals/MailSupport';
+import { DiscordSupport } from '../modals/DiscordSupport';
 import { ImportLedger } from '../modals/ImportLedger';
 import { ImportVault } from '../modals/ImportVault';
 import { ManageFastUnstake } from '../modals/ManageFastUnstake';
@@ -52,7 +53,8 @@ export const Overlays = () => {
         ClaimReward,
         Connect,
         Accounts,
-        GoToFeedback,
+        DiscordSupport,
+        MailSupport,
         ImportLedger,
         ImportVault,
         ImportWalletConnect,
diff --git a/packages/consts/src/index.ts b/packages/consts/src/index.ts
index c6fdf2059a..6444fca5e6 100644
--- a/packages/consts/src/index.ts
+++ b/packages/consts/src/index.ts
@@ -8,6 +8,8 @@ import { stringToU8a } from '@polkadot/util';
  */
 export const DappName = 'Polkadot Staking Dashboard';
 export const ManualSigners = ['ledger', 'vault', 'wallet_connect'];
+export const DiscordSupportUrl = 'https://discord.gg/EJWK4NA4';
+export const MailSupportAddress = 'staking@polkadot.cloud';
 
 /*
  * Byte Helpers