add hide

2024-02-21 21:19:46 +11:00 · 2024-02-21 21:19:46 +11:00 · ab02c94992
parent 9b19dcc661
commit ab02c94992
10 changed files with 67 additions and 36 deletions
--- a/components/account/AccountOverview.tsx
+++ b/components/account/AccountOverview.tsx
@ -117,12 +117,7 @@ const AccountOverview = () => {
          <AccountHeroStats accountValue={accountValue} />
        </div>
      </div>
-      <div className="px-4 pt-10 md:px-6">
-        {/* <h2 className="mb-4 text-center text-lg md:text-left">
-          {t('announcements')}
-        </h2> */}
-        <Announcements />
-      </div>
+      <Announcements />
      <Explore />
      {showCreateAccountModal ? (
        <CreateAccountModal
--- a/components/account/Announcements.tsx
+++ b/components/account/Announcements.tsx
@ -8,9 +8,18 @@ import { usePlausible } from 'next-plausible'
 import Link from 'next/link'
 import { useQuery } from '@tanstack/react-query'
 import { AppAnnouncement, fetchCMSAnnounements } from 'utils/contentful'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import { SHOW_ANNOUNCEMENTS_KEY } from 'utils/constants'
+import { LinkButton } from '@components/shared/Button'
+import { useTranslation } from 'react-i18next'

 const Announcements = () => {
  const { width } = useViewport()
+  const { t } = useTranslation('account')
+  const [showAnnouncements, setShowAnnouncements] = useLocalStorageState(
+    SHOW_ANNOUNCEMENTS_KEY,
+    true,
+  )

  const { data: announcements } = useQuery(
    ['announcements-data'],
@ -65,37 +74,43 @@ const Announcements = () => {
    ? slides < announcements.length
    : false

-  return announcements?.length ? (
-    <div className="flex items-center justify-center">
-      {showArrows ? (
-        <button
-          className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border-2 border-th-bkg-4"
-          onClick={prevSlide}
-        >
-          <ChevronLeftIcon className="h-5 w-5 text-th-fgd-1" />
-        </button>
-      ) : null}
-      <div className={` ${showArrows ? 'w-[calc(100%-120px)]' : 'w-full'}`}>
-        <Slider ref={sliderRef} {...sliderSettings}>
-          {announcements.map((announcement, i) => (
-            <div
-              // className={i !== announcements.length - 1 ? 'pr-3' : 'pr-[1px]'}
-              className="px-2"
-              key={announcement.title + i}
-            >
-              <Announcement data={announcement} />
-            </div>
-          ))}
-        </Slider>
+  return announcements?.length && showAnnouncements ? (
+    <div className="px-2 pt-10 md:px-4">
+      <div className="flex items-center justify-center">
+        {showArrows ? (
+          <button
+            className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border-2 border-th-bkg-4"
+            onClick={prevSlide}
+          >
+            <ChevronLeftIcon className="h-5 w-5 text-th-fgd-1" />
+          </button>
+        ) : null}
+        <div className={` ${showArrows ? 'w-[calc(100%-120px)]' : 'w-full'}`}>
+          <Slider ref={sliderRef} {...sliderSettings}>
+            {announcements.map((announcement, i) => (
+              <div className="px-2" key={announcement.title + i}>
+                <Announcement data={announcement} />
+              </div>
+            ))}
+          </Slider>
+        </div>
+        {showArrows ? (
+          <button
+            className="ml-4 flex h-8 w-8 items-center justify-center rounded-full border-2 border-th-bkg-4"
+            onClick={nextSlide}
+          >
+            <ChevronRightIcon className="h-5 w-5 text-th-fgd-1" />
+          </button>
+        ) : null}
      </div>
-      {showArrows ? (
-        <button
-          className="ml-4 flex h-8 w-8 items-center justify-center rounded-full border-2 border-th-bkg-4"
-          onClick={nextSlide}
+      <div className="mt-2 flex justify-center px-2 md:justify-end">
+        <LinkButton
+          className="text-xs font-normal text-th-fgd-3"
+          onClick={() => setShowAnnouncements(false)}
        >
-          <ChevronRightIcon className="h-5 w-5 text-th-fgd-1" />
-        </button>
-      ) : null}
+          {t('hide-announcements')}
+        </LinkButton>
+      </div>
    </div>
  ) : null
 }
@ -158,7 +173,6 @@ const Announcement = ({ data }: { data: AppAnnouncement }) => {
          />
        ) : null}
        <div>
-          {/* <p className="mb-1 text-xs leading-none text-th-active">{category}</p> */}
          <p className="block font-display text-sm text-th-fgd-1">{title}</p>
          <p className="block text-sm text-th-fgd-3">{description}</p>
        </div>
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@ -18,6 +18,7 @@ import { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import {
  NOTIFICATION_POSITION_KEY,
+  SHOW_ANNOUNCEMENTS_KEY,
  SIZE_INPUT_UI_KEY,
  TRADE_CHART_UI_KEY,
  TRADE_LAYOUT_KEY,
@ -25,6 +26,7 @@ import {
 import mangoStore from '@store/mangoStore'
 import { CUSTOM_SKINS } from 'utils/theme'
 import { SETTINGS_BUTTON_TITLE_CLASSES } from './AccountSettings'
+import Switch from '@components/forms/Switch'

 const NOTIFICATION_POSITIONS = [
  'bottom-left',
@ -89,6 +91,11 @@ const DisplaySettings = () => {

  const [, setTradeLayout] = useLocalStorageState(TRADE_LAYOUT_KEY, 'chartLeft')

+  const [showAnnouncements, setShowAnnouncements] = useLocalStorageState(
+    SHOW_ANNOUNCEMENTS_KEY,
+    true,
+  )
+
  // add nft skins to theme selection list
  useEffect(() => {
    if (nfts.length) {
@ -236,6 +243,13 @@ const DisplaySettings = () => {
          />
        </div>
      </div>
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
+        <p className={SETTINGS_BUTTON_TITLE_CLASSES}>{t('announcements')}</p>
+        <Switch
+          checked={showAnnouncements}
+          onChange={() => setShowAnnouncements(!showAnnouncements)}
+        />
+      </div>
    </div>
  )
 }
--- a/public/locales/en/account.json
+++ b/public/locales/en/account.json
@ -14,6 +14,7 @@
    "follow": "Follow",
    "followed-accounts": "Followed Accounts",
    "funding-chart": "Funding Chart",
+    "hide-announcements": "Hide Announcements",
    "init-health": "Init Health",
    "maint-health": "Maint Health",
    "health-contributions": "Health Contributions",
--- a/public/locales/es/account.json
+++ b/public/locales/es/account.json
@ -14,6 +14,7 @@
    "follow": "Follow",
    "followed-accounts": "Followed Accounts",
    "funding-chart": "Funding Chart",
+    "hide-announcements": "Hide Announcements",
    "init-health": "Init Health",
    "maint-health": "Maint Health",
    "health-contributions": "Health Contributions",
--- a/public/locales/pt/account.json
+++ b/public/locales/pt/account.json
@ -14,6 +14,7 @@
    "follow": "Seguir",
    "followed-accounts": "Contas Seguidas",
    "funding-chart": "Gráfico de Financiamento",
+    "hide-announcements": "Hide Announcements",
    "init-health": "Saúde Inicial",
    "maint-health": "Saúde de Manutenção",
    "health-contributions": "Contribuições para a Saúde",
--- a/public/locales/ru/account.json
+++ b/public/locales/ru/account.json
@ -14,6 +14,7 @@
    "follow": "Follow",
    "followed-accounts": "Followed Accounts",
    "funding-chart": "Funding Chart",
+    "hide-announcements": "Hide Announcements",
    "init-health": "Init Health",
    "maint-health": "Maint Health",
    "health-contributions": "Health Contributions",
--- a/public/locales/zh/account.json
+++ b/public/locales/zh/account.json
@ -14,6 +14,7 @@
    "follow": "关注",
    "followed-accounts": "你关注的帐户",
    "funding-chart": "资金费图表",
+    "hide-announcements": "Hide Announcements",
    "health-contributions": "健康度贡献",
    "init-health": "初始健康度",
    "init-health-contribution": "初始健康贡献",
--- a/public/locales/zh_tw/account.json
+++ b/public/locales/zh_tw/account.json
@ -14,6 +14,7 @@
    "follow": "關注",
    "followed-accounts": "你關注的帳戶",
    "funding-chart": "資金費圖表",
+    "hide-announcements": "Hide Announcements",
    "health-contributions": "健康度貢獻",
    "init-health": "初始健康度",
    "init-health-contribution": "初始健康貢獻",
--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -88,6 +88,8 @@ export const NON_RESTRICTED_JURISDICTION_KEY = 'non-restricted-jurisdiction-0.1'
 export const FILTER_ORDERS_FOR_MARKET_KEY = 'filterOrdersForMarket-0.1'
 export const FILTER_HISTORY_FOR_MARKET_KEY = 'filterHistoryForMarket-0.1'

+export const SHOW_ANNOUNCEMENTS_KEY = 'showAnnouncements-0.1'
+
 // Unused
 export const PROFILE_CATEGORIES = [
  'borrower',