From b24b94f688e485c3f29a4397c357fa698f0aed66 Mon Sep 17 00:00:00 2001
From: vkulinich <viacheslav.kulinich@cleevio.com>
Date: Mon, 15 Jan 2024 14:42:03 +0100
Subject: [PATCH] Add Depeg info message

---
 src/components/Layout/Header/Header.styled.ts |   5 -
 src/components/Layout/Header/Header.tsx       | 123 ++++++++++++------
 src/components/Layout/Page/Page.styled.ts     |  12 +-
 .../WarningMessage/WarningMessage.styled.ts   |  35 +++++
 .../WarningMessage/WarningMessage.tsx         |  86 ++++++++++++
 .../WarningMessage/WarningMessage.utils.ts    |  35 +++++
 src/i18n/locales/en/translations.json         |   5 +-
 src/utils/farms/claiming.ts                   |   2 +-
 8 files changed, 245 insertions(+), 58 deletions(-)
 create mode 100644 src/components/WarningMessage/WarningMessage.styled.ts
 create mode 100644 src/components/WarningMessage/WarningMessage.tsx
 create mode 100644 src/components/WarningMessage/WarningMessage.utils.ts

diff --git a/src/components/Layout/Header/Header.styled.ts b/src/components/Layout/Header/Header.styled.ts
index 4e19f59c..bf45d562 100644
--- a/src/components/Layout/Header/Header.styled.ts
+++ b/src/components/Layout/Header/Header.styled.ts
@@ -3,11 +3,6 @@ import { theme } from "theme"
 import { IconButton } from "components/IconButton/IconButton"
 
 export const SHeader = styled.header`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: ${theme.zIndices.header};
-
   width: 100%;
 
   padding: 6px 12px;
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index ee5da0fa..a535f12b 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -1,5 +1,6 @@
 import { ReactComponent as BasiliskIcon } from "assets/icons/BasiliskIcon.svg"
 import { ReactComponent as BasiliskLogo } from "assets/icons/BasiliskLogo.svg"
+import { ReactComponent as LinkIcon } from "assets/icons/LinkIcon.svg"
 import { Icon } from "components/Icon/Icon"
 import { HeaderMenu } from "components/Layout/Header/menu/HeaderMenu"
 import {
@@ -18,6 +19,9 @@ import { theme } from "theme"
 import { useState } from "react"
 import { FundWalletButton } from "../../FundWallet/FundWalletButton"
 import { FundWalletModal } from "../../FundWallet/FundWalletModal"
+import { WarningMessage } from "components/WarningMessage/WarningMessage"
+import { useWarningsStore } from "components/WarningMessage/WarningMessage.utils"
+import { Text } from "components/Typography/Text/Text"
 
 export const Header = () => {
   const [isFundModalOpen, setIsFundModalOpen] = useState(false)
@@ -25,6 +29,8 @@ export const Header = () => {
   const { setSidebar, toasts } = useToast()
   const { t } = useTranslation()
 
+  const warnings = useWarningsStore()
+
   const loadingToasts = toasts.filter((toast) => toast.variant === "progress")
 
   const isLoadingToast = !!loadingToasts.length
@@ -37,52 +43,85 @@ export const Header = () => {
       isLoading={isLoadingToast}
     />
   )
+  const isWarningVisible = warnings.warnings.depeg.visible
+
   return (
-    <SHeader>
-      <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
-        <div sx={{ flex: "row", align: "center" }}>
-          <Icon size={32} icon={<BasiliskIcon />} sx={{ mr: 11 }} />
-          <Icon sx={{ mr: 60, display: ["none", "inherit"] }}>
-            <BasiliskLogo />
-          </Icon>
-          <HeaderMenu />
-        </div>
+    <div css={{ position: "sticky", top: 0, zIndex: 5 }}>
+      {isWarningVisible && (
+        <WarningMessage
+          type="depeg"
+          text={t("depeg.modal.desx")}
+          modalContent={
+            <div sx={{ flex: "column" }}>
+              <Text sx={{ mt: 24 }}>{t("depeg.modal.desx")}</Text>
+              <a
+                href="https://tether.to/en/tether-makes-strategic-transition-to-meet-community-demands-and-foster-innovation/"
+                target="_blank"
+                rel="noreferrer noopener"
+                sx={{
+                  flex: "row",
+                  align: "center",
+                  gap: 4,
+                  color: "neutralGray300",
+                  mt: 20,
+                }}
+                css={{ textDecoration: "underline" }}
+              >
+                <Text fs={12} color="neutralGray300">
+                  {t("depeg.modal.icon")}
+                </Text>
+                <Icon sx={{ color: "neutralGray300" }} icon={<LinkIcon />} />
+              </a>
+            </div>
+          }
+        />
+      )}
+      <SHeader>
+        <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
+          <div sx={{ flex: "row", align: "center" }}>
+            <Icon size={32} icon={<BasiliskIcon />} sx={{ mr: 11 }} />
+            <Icon sx={{ mr: 60, display: ["none", "inherit"] }}>
+              <BasiliskLogo />
+            </Icon>
+            <HeaderMenu />
+          </div>
 
-        <div sx={{ flex: "row", align: "center", gap: [12, 24] }}>
-          {isLoadingToast ? (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <div css={{ position: "relative" }}>
-                  {isLoadingToast && <Spinner width={40} height={40} />}
-                  {bellIcon}
-                </div>
-              </Tooltip.Trigger>
-              <Tooltip.Content>
-                <STooltip>
-                  {t("toast.sidebar.pendingAmount", {
-                    amount: loadingToasts.length,
-                  })}
-                </STooltip>
-                <Tooltip.Arrow css={{ "& > polygon": { fill: "#ABE67E" } }} />
-              </Tooltip.Content>
-            </Tooltip.Root>
-          ) : (
-            bellIcon
-          )}
+          <div sx={{ flex: "row", align: "center", gap: [12, 24] }}>
+            {isLoadingToast ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <div css={{ position: "relative" }}>
+                    {isLoadingToast && <Spinner width={40} height={40} />}
+                    {bellIcon}
+                  </div>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <STooltip>
+                    {t("toast.sidebar.pendingAmount", {
+                      amount: loadingToasts.length,
+                    })}
+                  </STooltip>
+                  <Tooltip.Arrow css={{ "& > polygon": { fill: "#ABE67E" } }} />
+                </Tooltip.Content>
+              </Tooltip.Root>
+            ) : (
+              bellIcon
+            )}
 
-          {isDesktop && (
-            <>
-              <FundWalletButton onClick={() => setIsFundModalOpen(true)} />
-              <FundWalletModal
-                open={isFundModalOpen}
-                onClose={() => setIsFundModalOpen(false)}
-              />
-            </>
-          )}
+            {isDesktop && (
+              <>
+                <FundWalletButton onClick={() => setIsFundModalOpen(true)} />
+                <FundWalletModal
+                  open={isFundModalOpen}
+                  onClose={() => setIsFundModalOpen(false)}
+                />
+              </>
+            )}
 
-          <WalletConnectButton />
+            <WalletConnectButton />
+          </div>
         </div>
-      </div>
-    </SHeader>
+      </SHeader>
+    </div>
   )
 }
diff --git a/src/components/Layout/Page/Page.styled.ts b/src/components/Layout/Page/Page.styled.ts
index 98ff7157..8ef5665b 100644
--- a/src/components/Layout/Page/Page.styled.ts
+++ b/src/components/Layout/Page/Page.styled.ts
@@ -15,29 +15,23 @@ export const SPage = styled.div`
 
   background: ${theme.gradients.verticalGradient};
 
+  overflow-y: auto;
+  overflow-x: hidden;
+
   @media ${theme.viewport.gte.sm} {
     padding-bottom: 0;
   }
 `
 
 export const SPageContent = styled.main`
-  overflow-y: auto;
   padding: 0 12px;
-  overflow-x: hidden;
-
-  padding-top: var(--nav-height);
-  padding-bottom: var(--mobile-nav-height);
 
   ::-webkit-scrollbar {
     width: 0px;
   }
-  ::-webkit-scrollbar-track {
-    margin-top: var(--nav-height);
-  }
 
   @media ${theme.viewport.gte.sm} {
     padding: 0 20px;
-    padding-top: var(--nav-height);
 
     ::-webkit-scrollbar {
       width: 6px;
diff --git a/src/components/WarningMessage/WarningMessage.styled.ts b/src/components/WarningMessage/WarningMessage.styled.ts
new file mode 100644
index 00000000..8487beb4
--- /dev/null
+++ b/src/components/WarningMessage/WarningMessage.styled.ts
@@ -0,0 +1,35 @@
+import styled from "@emotion/styled"
+import { theme } from "theme"
+
+export const SWarningMessageContainer = styled.div`
+  background: ${theme.gradients.primaryGradient};
+
+  width: 100%;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  padding: 8px;
+
+  z-index: ${theme.zIndices.header};
+
+  color: ${theme.colors.black};
+`
+
+export const SWarningMessageContent = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+`
+
+export const SSecondaryItem = styled.div`
+  display: flex;
+  flex: 1 1 0%;
+  flexbasis: 0;
+`
diff --git a/src/components/WarningMessage/WarningMessage.tsx b/src/components/WarningMessage/WarningMessage.tsx
new file mode 100644
index 00000000..fe2b6a63
--- /dev/null
+++ b/src/components/WarningMessage/WarningMessage.tsx
@@ -0,0 +1,86 @@
+import { ReactComponent as CrossIcon } from "assets/icons/CrossIcon.svg"
+import { Modal } from "components/Modal/Modal"
+import { ReactNode, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { TWarningsType, useWarningsStore } from "./WarningMessage.utils"
+import {
+  SSecondaryItem,
+  SWarningMessageContainer,
+  SWarningMessageContent,
+} from "./WarningMessage.styled"
+
+export const WarningMessage = (props: {
+  type: TWarningsType
+  text: ReactNode
+  modalContent?: ReactNode
+}) => {
+  const [open, setOpen] = useState(false)
+  const { t } = useTranslation()
+
+  const warnings = useWarningsStore()
+
+  return (
+    <>
+      {open && (
+        <Modal
+          open
+          onClose={() => setOpen(false)}
+          title={t("depeg.modal.title")}
+          width={450}
+        >
+          {props.modalContent}
+        </Modal>
+      )}
+      <SWarningMessageContainer
+        onClick={() => props.modalContent && setOpen(true)}
+      >
+        <SSecondaryItem />
+        <SWarningMessageContent>
+          <svg
+            width="18"
+            height="15"
+            viewBox="0 0 18 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000.svg?react"
+            css={{ flexShrink: 0 }}
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M8.75753 0.707031L16.7104 14.4818H0.804688L8.75753 0.707031ZM8.01068 10.5323H9.50752V12.0291H8.01068V10.5323ZM9.50752 5.99067H8.01068V9.48331H9.50752V5.99067Z"
+              fill="url(#paint0_linear_21027_167880)"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_21027_167880"
+                x1="8.75753"
+                y1="1.38726"
+                x2="8.75753"
+                y2="14.4818"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0.448929" stopColor="black" />
+                <stop offset="1" stopColor="black" stopOpacity="0.27" />
+              </linearGradient>
+            </defs>
+          </svg>
+
+          {props.text}
+        </SWarningMessageContent>
+
+        <SSecondaryItem
+          css={{
+            justifyContent: "flex-end",
+          }}
+        >
+          <CrossIcon
+            onClick={(e) => {
+              e.stopPropagation()
+              warnings.setWarnings(props.type, false)
+            }}
+          />
+        </SSecondaryItem>
+      </SWarningMessageContainer>
+    </>
+  )
+}
diff --git a/src/components/WarningMessage/WarningMessage.utils.ts b/src/components/WarningMessage/WarningMessage.utils.ts
new file mode 100644
index 00000000..c17b3f0d
--- /dev/null
+++ b/src/components/WarningMessage/WarningMessage.utils.ts
@@ -0,0 +1,35 @@
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+
+type TWarningStore = {
+  warnings: {
+    depeg: { visible?: boolean }
+  }
+  setWarnings: (key: TWarningsType, isOpen: boolean) => void
+}
+
+export type TWarningsType = keyof TWarningStore["warnings"]
+
+export const useWarningsStore = create(
+  persist<TWarningStore>(
+    (set) => ({
+      warnings: {
+        depeg: {
+          visible: true,
+        },
+      },
+      setWarnings: (key, isOpen) =>
+        set(({ warnings }) => ({
+          warnings: {
+            ...warnings,
+            [key]: { ...warnings[key], visible: isOpen },
+          },
+        })),
+    }),
+    {
+      name: "warnings",
+      version: 0.1,
+      getStorage: () => window.sessionStorage,
+    },
+  ),
+)
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index a4374453..39a8d45c 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -362,5 +362,8 @@
   "fund.modal.crypto.title": "Fund with crypto",
   "fund.modal.crypto.description": "Looking to fund your wallet with crypto? Head to our cross-chain UI.",
   "fund.modal.crypto.buy": "Use cross-chain",
-  "fund.button": "Fund wallet"
+  "fund.button": "Fund wallet",
+  "depeg.modal.title": "Important Notice",
+  "depeg.modal.desx": "Tether have dropped support for native USDT on Kusama - herefore USDT pools are currently not priced at $1",
+  "depeg.modal.icon": "More info"
 }
diff --git a/src/utils/farms/claiming.ts b/src/utils/farms/claiming.ts
index 2b9bdb62..fca4503b 100644
--- a/src/utils/farms/claiming.ts
+++ b/src/utils/farms/claiming.ts
@@ -194,7 +194,7 @@ export const useClaimAllMutation = (
 
     if (txs.length > 1) {
       return await createTransaction(
-        { tx: api.tx.utility.batch(txs) },
+        { tx: api.tx.utility.forceBatch(txs) },
         { toast, onClose, onBack: onClose ? () => {} : undefined },
       )
     } else if (txs.length > 0) {