From 348e82293ed2a6b28c8894e57259cc3ea3a1cd07 Mon Sep 17 00:00:00 2001
From: aleka <aforaleka@gmail.com>
Date: Mon, 16 Oct 2023 13:08:54 -0400
Subject: [PATCH] show exchange offline dialog for testnet reset (#71)

---
 src/hooks/useSelectedNetwork.ts             | 15 ++++++++++++-
 src/views/dialogs/ExchangeOfflineDialog.tsx | 24 +++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useSelectedNetwork.ts b/src/hooks/useSelectedNetwork.ts
index 9b7a898..21a03a0 100644
--- a/src/hooks/useSelectedNetwork.ts
+++ b/src/hooks/useSelectedNetwork.ts
@@ -1,6 +1,7 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { DialogTypes } from '@/constants/dialogs';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
@@ -8,6 +9,7 @@ import { useAccounts, useLocalStorage } from '@/hooks';
 
 import { setSelectedNetwork } from '@/state/app';
 import { getSelectedNetwork } from '@/state/appSelectors';
+import { openDialog } from '@/state/dialogs';
 
 import { validateAgainstAvailableEnvironments } from '@/lib/network';
 
@@ -25,6 +27,17 @@ export const useSelectedNetwork = (): {
     validateFn: validateAgainstAvailableEnvironments,
   });
 
+  useEffect(() => {
+    if (
+      import.meta.env.MODE === 'production' &&
+      ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId === 'dydx-testnet-3'
+    ) {
+      dispatch(
+        openDialog({ type: DialogTypes.ExchangeOffline, dialogProps: { preventClose: true } })
+      );
+    }
+  }, [selectedNetwork]);
+
   const switchNetwork = useCallback(
     (network: DydxNetwork) => {
       disconnect();
diff --git a/src/views/dialogs/ExchangeOfflineDialog.tsx b/src/views/dialogs/ExchangeOfflineDialog.tsx
index a680a51..609b36e 100644
--- a/src/views/dialogs/ExchangeOfflineDialog.tsx
+++ b/src/views/dialogs/ExchangeOfflineDialog.tsx
@@ -5,6 +5,9 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { AbacusApiStatus } from '@/constants/abacus';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { UNICODE } from '@/constants/unicode';
+
 import { useApiState, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -29,8 +32,16 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
   const selectedNetwork = useSelector(getSelectedNetwork);
   const activeDialog = useSelector(getActiveDialog, shallowEqual);
 
+  const showOfflineMessage =
+    import.meta.env.MODE === 'production' &&
+    ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId === 'dydx-testnet-3';
+
   useEffect(() => {
-    if (activeDialog?.type === DialogTypes.ExchangeOffline && status === AbacusApiStatus.NORMAL) {
+    if (
+      activeDialog?.type === DialogTypes.ExchangeOffline &&
+      status === AbacusApiStatus.NORMAL &&
+      !showOfflineMessage
+    ) {
       dispatch(closeDialog());
     }
   }, [status, selectedNetwork]);
@@ -43,7 +54,16 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
       title={stringGetter({ key: STRING_KEYS.UNAVAILABLE })}
     >
       <Styled.Content>
-        <p>{statusErrorMessage}</p>
+        {showOfflineMessage ? (
+          <>
+            <p>Testnet is currently offline. Please check back!</p>
+            <Styled.Link href="https://v4-teacher.vercel.app/testnets/schedule">
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} {UNICODE.ARROW_RIGHT}
+            </Styled.Link>
+          </>
+        ) : (
+          <p>{statusErrorMessage}</p>
+        )}
         {import.meta.env.MODE !== 'production' && <NetworkSelectMenu />}
       </Styled.Content>
     </Dialog>