diff --git a/src/app/components/NetworkRibbon/NetworkRibbon.tsx b/src/app/components/NetworkRibbon/NetworkRibbon.tsx index a504c567d..53c212a43 100644 --- a/src/app/components/NetworkRibbon/NetworkRibbon.tsx +++ b/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; } diff --git a/src/app/containers/PageContainer/PageContainer.tsx b/src/app/containers/PageContainer/PageContainer.tsx index 50cad541c..821185c13 100644 --- a/src/app/containers/PageContainer/PageContainer.tsx +++ b/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> = ({ children, pageOptions, @@ -46,7 +49,9 @@ export const PageContainer: React.FC> = ({ 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; diff --git a/src/app/index.tsx b/src/app/index.tsx index 34eacca07..ef7725c9c 100644 --- a/src/app/index.tsx +++ b/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} /> + + {showPerps && ( - <> - - - + )} diff --git a/src/app/pages/PerpetualsPlaceholderPage/Loadable.tsx b/src/app/pages/PerpetualsPlaceholderPage/Loadable.tsx new file mode 100644 index 000000000..397fdd7dc --- /dev/null +++ b/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: }, +); diff --git a/src/app/pages/PerpetualsPlaceholderPage/index.module.css b/src/app/pages/PerpetualsPlaceholderPage/index.module.css new file mode 100644 index 000000000..c8dd6e8ad --- /dev/null +++ b/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); +} diff --git a/src/app/pages/PerpetualsPlaceholderPage/index.tsx b/src/app/pages/PerpetualsPlaceholderPage/index.tsx new file mode 100644 index 000000000..dfa1d92bc --- /dev/null +++ b/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 ( + <> + +
+ +
+ +
+ {t(translations.perpetualPage.shutdown.message)} +
+ +
+
+ + ); +}; diff --git a/src/assets/images/perpetuals-shutdown/Discord.svg b/src/assets/images/perpetuals-shutdown/Discord.svg new file mode 100644 index 000000000..130f474d8 --- /dev/null +++ b/src/assets/images/perpetuals-shutdown/Discord.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/perpetuals-shutdown/Logo.svg b/src/assets/images/perpetuals-shutdown/Logo.svg new file mode 100644 index 000000000..23ec470a8 --- /dev/null +++ b/src/assets/images/perpetuals-shutdown/Logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/perpetuals-shutdown/Telegram.svg b/src/assets/images/perpetuals-shutdown/Telegram.svg new file mode 100644 index 000000000..9aab37f0e --- /dev/null +++ b/src/assets/images/perpetuals-shutdown/Telegram.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/perpetuals-shutdown/Twitter.svg b/src/assets/images/perpetuals-shutdown/Twitter.svg new file mode 100644 index 000000000..1606d108c --- /dev/null +++ b/src/assets/images/perpetuals-shutdown/Twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/perpetuals-shutdown/perpetuals_screenshot_without_header.png b/src/assets/images/perpetuals-shutdown/perpetuals_screenshot_without_header.png new file mode 100644 index 000000000..f210edb54 Binary files /dev/null and b/src/assets/images/perpetuals-shutdown/perpetuals_screenshot_without_header.png differ diff --git a/src/assets/perpetuals_screenshot_without_header.png b/src/assets/perpetuals_screenshot_without_header.png new file mode 100644 index 000000000..f210edb54 Binary files /dev/null and b/src/assets/perpetuals_screenshot_without_header.png differ diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index d21664526..970d8cba7 100644 --- a/src/locales/en/translation.json +++ b/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}}", diff --git a/src/utils/classifiers.ts b/src/utils/classifiers.ts index a73dcb73f..c20a57f7e 100644 --- a/src/utils/classifiers.ts +++ b/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;