Feat/715: Create flag for explorer txs page (#717)

* frontend-monorepo-715: Create flag for explorer txs page

* frontend-monorepo-715: Prettier formatted

* Update apps/explorer-e2e/.env

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

apps/explorer-e2e/.env

@@ -11,6 +11,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=0
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.devnet

@@ -11,6 +11,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.stagnet1

@@ -11,6 +11,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.stagnet2

@@ -11,6 +11,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer-e2e/.env.testnet

@@ -11,6 +11,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer/.env

@@ -22,3 +22,4 @@ NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=1

apps/explorer/.env.capsule

@@ -12,6 +12,7 @@ NX_EXPLORER_ASSETS=1
 NX_EXPLORER_GENESIS=1
 NX_EXPLORER_GOVERNANCE=1
 NX_EXPLORER_MARKETS=1
+NX_EXPLORER_TXS_LIST=1
 NX_EXPLORER_NETWORK_PARAMETERS=1
 NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1

apps/explorer/README.md

@@ -58,6 +58,7 @@ There are a few different configuration options offered for this app:
 | `NX_EXPLORER_GENESIS`            | Enable the genesis page for the explorer                                                             |
 | `NX_EXPLORER_GOVERNANCE`         | Enable the governance page for the explorer                                                          |
 | `NX_EXPLORER_MARKETS`            | Enable the markets page for the explorer                                                             |
+| `NX_EXPLORER_TXS_LIST`           | Enable the transactions list page for the explorer                                                   |
 | `NX_EXPLORER_NETWORK_PARAMETERS` | Enable the network parameters page for the explorer                                                  |
 | `NX_EXPLORER_PARTIES`            | Enable the parties page for the explorer                                                             |
 | `NX_EXPLORER_VALIDATORS`         | Enable the validators page for the explorer                                                          |

apps/explorer/src/app/config/env.ts

@@ -24,6 +24,7 @@ export const ENV = {
     genesis: truthy.includes(windowOrDefault('NX_EXPLORER_GENESIS')),
     governance: truthy.includes(windowOrDefault('NX_EXPLORER_GOVERNANCE')),
     markets: truthy.includes(windowOrDefault('NX_EXPLORER_MARKETS')),
+    txsList: truthy.includes(windowOrDefault('NX_EXPLORER_TXS_LIST')),
     networkParameters: truthy.includes(
       windowOrDefault('NX_EXPLORER_NETWORK_PARAMETERS')
     ),

apps/explorer/src/app/routes/router-config.tsx

@@ -12,7 +12,7 @@ import Genesis from './genesis';
 import { Block } from './blocks/id';
 import { Blocks } from './blocks/home';
 import { Tx } from './txs/id';
-import { TxsHome } from './txs/home';
+import { TxsHome, TxsHomeFallback } from './txs/home';
 import { PendingTxs } from './pending';
 import flags from '../config/flags';
 import { t } from '@vegaprotocol/react-helpers';
@@ -129,7 +129,7 @@ const routerConfig = [
       },
       {
         index: true,
-        element: <TxsHome />,
+        element: flags.txsList ? <TxsHome /> : <TxsHomeFallback />,
       },
     ],
   },

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -94,7 +94,7 @@ const Txs = ({ latestBlockHeight }: TxsProps) => {
   );
 };
 
-const Wrapper = () => {
+export const TxsHome = () => {
   const {
     state: { data, error, loading },
   } = useFetch<TendermintBlockchainResponse>(
@@ -119,4 +119,12 @@ const Wrapper = () => {
   );
 };
 
-export { Wrapper as TxsHome };
+export const TxsHomeFallback = () => (
+  <>
+    <RouteTitle>{t('Transactions')}</RouteTitle>
+    <div>
+      The transactions list is currently disabled. Please use the search bar to
+      discover transaction data
+    </div>
+  </>
+);