Add support for testnet network in Explorer (#5848)

* add testnet network to explorer

* lint

apps/explorer/src/components/network/Network.tsx

@@ -1,12 +1,13 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
-
+import { useFeature } from '@growthbook/growthbook-react';
 import { useCallback, useContext, useState } from 'react';
 
 import { ReactComponent as DownSVG } from '../../assets/Down.svg';
 import { NetworkContext } from '../../context';
 import { Network, getEndpoint } from '../../utils/api/DefaultRpcClient';
 import { IS_STATIC_ENV, IS_STAGING_ENV } from '../../utils/envUtil';
+import { GROWTHBOOK_FEATURES } from '../../utils/growthbook';
 
 import styles from './Network.module.css';
 
@@ -15,6 +16,10 @@ export default function NetworkSelect() {
     const [isModuleOpen, setModuleOpen] = useState(false);
     const [isOpenInput, setIsOpenInput] = useState(false);
 
+    const showTestNet = useFeature(
+        GROWTHBOOK_FEATURES.USE_TEST_NET_ENDPOINT
+    ).on;
+
     const openModal = useCallback(
         () => (isModuleOpen ? setModuleOpen(false) : setModuleOpen(true)),
         [isModuleOpen, setModuleOpen]
@@ -90,6 +95,14 @@ export default function NetworkSelect() {
                                 Staging
                             </div>
                         ) : null}
+                        {showTestNet ? (
+                            <div
+                                onClick={chooseNetwork(Network.Testnet)}
+                                className={networkStyle(Network.Testnet)}
+                            >
+                                Testnet
+                            </div>
+                        ) : null}
                         <div
                             onClick={chooseNetwork(Network.Local)}
                             className={networkStyle(Network.Local)}

apps/explorer/src/utils/api/rpcSetting.ts

@@ -6,6 +6,7 @@ export enum Network {
     Static = 'Static',
     Devnet = 'Devnet',
     Staging = 'Staging',
+    Testnet = 'Testnet',
     CI = 'CI',
 }
 
@@ -16,6 +17,7 @@ const ENDPOINTS: Record<Network, string> = {
     [Network.Staging]: 'https://fullnode.staging.sui.io:443',
     // NOTE: Static is pointed to devnet, but it shouldn't actually fetch data.
     [Network.Static]: 'https://fullnode.devnet.sui.io:443',
+    [Network.Testnet]: 'https://fullnode.testnet.sui.io:443',
 };
 
 export function getEndpoint(network: Network | string): string {

apps/explorer/src/utils/growthbook.ts

@@ -32,3 +32,7 @@ export async function loadFeatures() {
         console.warn('Failed to fetch feature definitions from Growthbook', e);
     }
 }
+
+export enum GROWTHBOOK_FEATURES {
+    USE_TEST_NET_ENDPOINT = 'testnet-selection',
+}