Perpetuals shutdown (#2424)

* Perps shutdown

* Fix a layout issue

* Do not switch networks on the perps placeholder page

src/app/components/NetworkRibbon/NetworkRibbon.tsx

@@ -15,6 +15,8 @@ import { getNetworkByChainId } from '../../../utils/blockchain/networks';
 import { isMainnet } from 'utils/classifiers';
 import { ChainId } from 'types';
 
+const showPerps = !isMainnet;
+
 export function NetworkRibbon(this: any) {
   const { bridgeChainId } = useSelector(selectWalletProvider);
   const { connected, wallet, chainId, expectedChainId } = useContext(
@@ -28,7 +30,8 @@ export function NetworkRibbon(this: any) {
     if (
       !connected ||
       !isWeb3Wallet(wallet.providerType!) ||
-      location.pathname.startsWith('/cross-chain')
+      location.pathname.startsWith('/cross-chain') ||
+      (!showPerps && location.pathname.startsWith('/perpetuals'))
     ) {
       return false;
     }
@@ -92,7 +95,7 @@ const getExpectedChainId = (
   expectedChainId: number | undefined,
   pathname: string,
 ) => {
-  if (pathname.startsWith('/perpetuals')) {
+  if (pathname.startsWith('/perpetuals') && showPerps) {
     return isMainnet ? ChainId.BSC_MAINNET : ChainId.BSC_TESTNET;
   }
 

src/app/containers/PageContainer/PageContainer.tsx

@@ -13,11 +13,14 @@ import {
 } from './types';
 import { DefaultHeaderComponent } from './components/DefaultHeaderComponent/DefaultHeaderComponent';
 import { Footer } from './components/DefaultFooterComponent/DefaultFooterComponent';
+import { isMainnet } from 'utils/classifiers';
 
 type HeaderContainerProps = {
   pageOptions: PageOptions;
 };
 
+const showPerps = !isMainnet;
+
 export const PageContainer: React.FC<Partial<HeaderContainerProps>> = ({
   children,
   pageOptions,
@@ -46,7 +49,9 @@ export const PageContainer: React.FC<Partial<HeaderContainerProps>> = ({
         initialOptions.footer = FooterTypes.NONE;
       } else if (pathname.startsWith('/perpetuals')) {
         initialOptions.header = HeaderTypes.LABS;
-        initialOptions.footer = FooterTypes.PERPETUALS;
+        initialOptions.footer = showPerps
+          ? FooterTypes.PERPETUALS
+          : FooterTypes.NONE;
       } else {
         initialOptions.header = HeaderTypes.DEFAULT;
         initialOptions.footer = FooterTypes.DEFAULT;

src/app/index.tsx

@@ -51,13 +51,14 @@ import { FastBtcPage } from './pages/FastBtcPage/Loadable';
 import { PageContainer } from './containers/PageContainer';
 import 'react-toastify/dist/ReactToastify.css';
 import { PerpetualPageLoadable } from './pages/PerpetualPage/Loadable';
+import { PerpetualsPlaceholderPageLoadable } from './pages/PerpetualsPlaceholderPage/Loadable';
 import { ReceiveRBTCPage } from './pages/ReceiveRBTCPage';
 import { CompetitionPage } from './pages/PerpetualPage/components/CompetitionPage';
 
 const title = !isMainnet ? `Sovryn ${currentNetwork}` : 'Sovryn';
 
 // TODO: Delete this once we go live, we may need it after the competition
-const showPerps = true; // !isMainnet || isStaging;
+const showPerps = !isMainnet; // !isMainnet || isStaging;
 
 export function App() {
   useAppTheme();
@@ -136,19 +137,22 @@ export function App() {
                   component={FastBtcPage}
                 />
                 <Route exact path="/rbtc/" component={ReceiveRBTCPage} />
+
+                <Route
+                  exact
+                  path="/perpetuals"
+                  component={
+                    showPerps
+                      ? PerpetualPageLoadable
+                      : PerpetualsPlaceholderPageLoadable
+                  }
+                />
                 {showPerps && (
-                  <>
-                    <Route
-                      exact
-                      path="/perpetuals"
-                      component={PerpetualPageLoadable}
-                    />
-                    <Route
-                      exact
-                      path="/perpetuals/competition"
-                      component={CompetitionPage}
-                    />
-                  </>
+                  <Route
+                    exact
+                    path="/perpetuals/competition"
+                    component={CompetitionPage}
+                  />
                 )}
                 <Route component={NotFoundPage} />
               </Switch>

src/app/pages/PerpetualsPlaceholderPage/Loadable.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { lazyLoad } from 'utils/loadable';
+import { PageSkeleton } from 'app/components/PageSkeleton';
+
+export const PerpetualsPlaceholderPageLoadable = lazyLoad(
+  () => import('./index'),
+  module => module.PerpetualsPlaceholderPage,
+  { fallback: <PageSkeleton /> },
+);

src/app/pages/PerpetualsPlaceholderPage/index.module.css

@@ -0,0 +1,11 @@
+.wrapper {
+  @apply tw-flex tw-justify-center tw-items-center tw-relative tw--mt-3;
+  height: calc(100vh - 59px);
+}
+
+.overlay {
+  @apply tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-flex tw-justify-center tw-items-center tw-flex-col;
+
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+}

src/app/pages/PerpetualsPlaceholderPage/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import placeholderImage from 'assets/images/perpetuals-shutdown/perpetuals_screenshot_without_header.png';
+import { HeaderLabs } from 'app/components/HeaderLabs';
+import {
+  discordInvite,
+  sovrynTelegram,
+  sovrynTwitter,
+  WIKI_PERPETUAL_FUTURES_LINK,
+} from 'utils/classifiers';
+import { useTranslation } from 'react-i18next';
+import styles from './index.module.css';
+import { ReactComponent as SovLogo } from 'assets/images/perpetuals-shutdown/Logo.svg';
+import { ReactComponent as DiscordLogo } from 'assets/images/perpetuals-shutdown/Discord.svg';
+import { ReactComponent as TelegramLogo } from 'assets/images/perpetuals-shutdown/Telegram.svg';
+import { ReactComponent as TwitterLogo } from 'assets/images/perpetuals-shutdown/Twitter.svg';
+import { Picture } from 'app/components/Picture';
+import { translations } from 'locales/i18n';
+
+export const PerpetualsPlaceholderPage: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <HeaderLabs helpLink={WIKI_PERPETUAL_FUTURES_LINK} />
+      <div className={styles.wrapper}>
+        <Picture src={placeholderImage} />
+        <div className={styles.overlay}>
+          <SovLogo />
+          <div className="tw-text-2xl tw-font-medium tw-mt-12 tw-max-w-2xl tw-text-center">
+            {t(translations.perpetualPage.shutdown.message)}
+          </div>
+          <div className="tw-flex tw-mt-20">
+            <a href={discordInvite} target="_blank" rel="noreferrer">
+              <DiscordLogo />
+            </a>
+            <a
+              href={sovrynTwitter}
+              target="_blank"
+              rel="noreferrer"
+              className="tw-ml-2.5"
+            >
+              <TwitterLogo />
+            </a>
+            <a
+              href={sovrynTelegram}
+              target="_blank"
+              rel="noreferrer"
+              className="tw-ml-2.5"
+            >
+              <TelegramLogo />
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

src/locales/en/translation.json

@@ -2174,6 +2174,9 @@
       "title": "Perpetuals",
       "description": "Trade with Sovryn's perpetual future contracts"
     },
+    "shutdown": {
+      "message": "We are working on a new version of Sovryn Perpetuals! Please stay informed via social media!"
+    },
     "btcbConversionDialog": {
       "sourceTitle": "From {{source}}",
       "destinationTitle": "To {{destination}}",

src/utils/classifiers.ts

@@ -138,6 +138,7 @@ export const gasLimit = {
 
 export const discordInvite = 'https://discord.gg/kBTNx4zjRf'; //unlimited use, no-expiry invite
 
+export const sovrynTwitter = 'https://twitter.com/SovrynBTC';
 export const sovrynTelegram = 'https://t.me/SovrynBitcoin';
 
 export const useTenderlySimulator = !!process.env.REACT_APP_ESTIMATOR_URI;