feat: Support options refresh with Discord and Mail (#2331)

polkadot-cloud · Nov 14, 2024 · 0700594 · 0700594
1 parent 297b1d4
commit 0700594
Show file tree

Hide file tree

Showing 23 changed files with 216 additions and 105 deletions.
diff --git 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
diff --git a/packages/app/src/img/discord.svg b/packages/app/src/img/discord.svg
diff --git a/packages/app/src/img/discord_outline.svg b/packages/app/src/img/discord_outline.svg
diff --git a/packages/app/src/img/envelope.svg b/packages/app/src/img/envelope.svg
diff --git a/packages/app/src/img/mail.svg b/packages/app/src/img/mail.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+    </>
+  );
+};