From 00da9a1707ba281bcaa281823b553b5890b0025e Mon Sep 17 00:00:00 2001
From: vkulinich <viacheslav.kulinich@cleevio.com>
Date: Fri, 26 Jan 2024 10:35:01 +0100
Subject: [PATCH 1/2] Disabled cross-chain

---
 src/components/Layout/Header/Header.tsx           |  4 ++++
 .../Layout/Header/MobileNavBar/MobileNavBar.tsx   |  2 ++
 .../Layout/Header/menu/HeaderMenu.styled.tsx      | 15 ++++++++++-----
 src/components/Layout/Header/menu/HeaderMenu.tsx  |  5 ++++-
 src/sections/xcm/XcmPage.tsx                      |  5 +++++
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index a535f12b..b773f236 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -76,6 +76,10 @@ export const Header = () => {
           }
         />
       )}
+      <WarningMessage
+        type="depeg"
+        text="Cross chain transfers in Kusama are temporarily suspended, please do not try to send tokens"
+      />
       <SHeader>
         <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
           <div sx={{ flex: "row", align: "center" }}>
diff --git a/src/components/Layout/Header/MobileNavBar/MobileNavBar.tsx b/src/components/Layout/Header/MobileNavBar/MobileNavBar.tsx
index 6ff2403c..b8607bea 100644
--- a/src/components/Layout/Header/MobileNavBar/MobileNavBar.tsx
+++ b/src/components/Layout/Header/MobileNavBar/MobileNavBar.tsx
@@ -39,6 +39,7 @@ export const MobileNavBar = () => {
 
   const hiddenTabItems = hiddenTabs.map((hiddenTab, index) => (
     <Link
+      disabled={hiddenTab.key === "cross-chain"}
       key={index}
       to={hiddenTab.href}
       search={account ? { account } : undefined}
@@ -68,6 +69,7 @@ export const MobileNavBar = () => {
 
         return (
           <Link
+            disabled={item.key === "cross-chain"}
             key={index}
             to={item.href}
             search={account ? { account } : undefined}
diff --git a/src/components/Layout/Header/menu/HeaderMenu.styled.tsx b/src/components/Layout/Header/menu/HeaderMenu.styled.tsx
index 7f56db73..5982800e 100644
--- a/src/components/Layout/Header/menu/HeaderMenu.styled.tsx
+++ b/src/components/Layout/Header/menu/HeaderMenu.styled.tsx
@@ -8,17 +8,22 @@ export const SList = styled.nav`
     display: flex;
   }
 `
-export const SItem = styled.span<{ isActive?: boolean }>`
+export const SItem = styled.span<{ isActive?: boolean; disabled?: boolean }>`
   font-size: 16px;
   font-weight: 600;
   line-height: 18px;
   margin-right: 32px;
 
-  color: ${({ isActive }) =>
-    isActive ? theme.colors.white : theme.colors.neutralGray300};
+  color: ${({ isActive, disabled }) =>
+    isActive
+      ? theme.colors.white
+      : disabled
+      ? theme.colors.neutralGray500
+      : theme.colors.neutralGray300};
 
   &:hover {
-    color: ${theme.colors.primary100};
-    cursor: pointer;
+    color: ${({ disabled }) =>
+      disabled ? theme.colors.neutralGray500 : theme.colors.primary100};
+    cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   }
 `
diff --git a/src/components/Layout/Header/menu/HeaderMenu.tsx b/src/components/Layout/Header/menu/HeaderMenu.tsx
index d65df3ed..3db9cfb3 100644
--- a/src/components/Layout/Header/menu/HeaderMenu.tsx
+++ b/src/components/Layout/Header/menu/HeaderMenu.tsx
@@ -23,12 +23,15 @@ export const HeaderMenu = () => {
 
         return (
           <Link
+            disabled={item.key === "cross-chain"}
             key={i}
             to={item.href}
             search={account ? { account } : undefined}
           >
             {({ isActive }) => (
-              <SItem isActive={isActive}>{t(item.translationKey)}</SItem>
+              <SItem isActive={isActive} disabled={item.key === "cross-chain"}>
+                {t(item.translationKey)}
+              </SItem>
             )}
           </Link>
         )
diff --git a/src/sections/xcm/XcmPage.tsx b/src/sections/xcm/XcmPage.tsx
index 43f295c1..659d624c 100644
--- a/src/sections/xcm/XcmPage.tsx
+++ b/src/sections/xcm/XcmPage.tsx
@@ -6,17 +6,22 @@ import * as Apps from "@galacticcouncil/apps"
 import { createComponent } from "@lit-labs/react"
 import { useAccountStore } from "state/store"
 import { GcTransactionCenter } from "./TransactionCenter"
+import { Navigate } from "@tanstack/react-location"
 
 export const XcmApp = createComponent({
   tagName: "gc-xcm-app",
   elementClass: Apps.XcmApp,
   react: React,
 })
+const disabled = true
 
 export function XcmPage() {
   const { account } = useAccountStore()
 
   const ref = React.useRef<Apps.XcmApp>(null)
+
+  if (disabled) return <Navigate to="/trade" search />
+
   return (
     <GcTransactionCenter>
       <Page>

From 0602dbf6fd9209e39f09cf79b95a1f8a9512390f Mon Sep 17 00:00:00 2001
From: vkulinich <viacheslav.kulinich@cleevio.com>
Date: Fri, 26 Jan 2024 10:54:13 +0100
Subject: [PATCH 2/2] Update textation

---
 src/components/Layout/Header/Header.tsx          | 11 ++++++-----
 src/components/WarningMessage/WarningMessage.tsx |  2 +-
 src/i18n/locales/en/translations.json            |  1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index b773f236..7025d8a7 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -50,7 +50,12 @@ export const Header = () => {
       {isWarningVisible && (
         <WarningMessage
           type="depeg"
-          text={t("depeg.modal.desx")}
+          text={
+            <div>
+              <p>{t("depeg.modal.desx")}</p>
+              <p>{t("depeg.modal.desx.crossChain")}</p>
+            </div>
+          }
           modalContent={
             <div sx={{ flex: "column" }}>
               <Text sx={{ mt: 24 }}>{t("depeg.modal.desx")}</Text>
@@ -76,10 +81,6 @@ export const Header = () => {
           }
         />
       )}
-      <WarningMessage
-        type="depeg"
-        text="Cross chain transfers in Kusama are temporarily suspended, please do not try to send tokens"
-      />
       <SHeader>
         <div sx={{ flex: "row", justify: "space-between", align: "center" }}>
           <div sx={{ flex: "row", align: "center" }}>
diff --git a/src/components/WarningMessage/WarningMessage.tsx b/src/components/WarningMessage/WarningMessage.tsx
index fe2b6a63..219a69a6 100644
--- a/src/components/WarningMessage/WarningMessage.tsx
+++ b/src/components/WarningMessage/WarningMessage.tsx
@@ -65,7 +65,7 @@ export const WarningMessage = (props: {
             </defs>
           </svg>
 
-          {props.text}
+          <p>{props.text}</p>
         </SWarningMessageContent>
 
         <SSecondaryItem
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index 39a8d45c..d1151dfa 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -365,5 +365,6 @@
   "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.desx.crossChain": "Cross chain transfers in Kusama are temporarily suspended, please do not try to send tokens",
   "depeg.modal.icon": "More info"
 }