Merge pull request #460 from galacticcouncil/rococo

Rococo => prod
galacticcouncil · Jan 26, 2024 · 50472cc · 50472cc
2 parents 447d832 + cfdcc52
commit 50472cc
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 8 deletions.
diff --git 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>

diff --git 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
@@ -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
@@ -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/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
@@ -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"
 }
diff --git 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>