From cb91467b777b7dd93fce6f8fa0d55bbac5c0879c Mon Sep 17 00:00:00 2001
From: Jibz1 <godwinjibs@gmail.com>
Date: Fri, 4 Nov 2022 07:52:06 -0700
Subject: [PATCH] Add support for testnet network in Explorer (#5848)

* add testnet network to explorer

* lint
---
 apps/explorer/src/components/network/Network.tsx | 15 ++++++++++++++-
 apps/explorer/src/utils/api/rpcSetting.ts        |  2 ++
 apps/explorer/src/utils/growthbook.ts            |  4 ++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/explorer/src/components/network/Network.tsx b/apps/explorer/src/components/network/Network.tsx
index 075dd9245ca19..9eaf38db63d0f 100644
--- a/apps/explorer/src/components/network/Network.tsx
+++ b/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)}
diff --git a/apps/explorer/src/utils/api/rpcSetting.ts b/apps/explorer/src/utils/api/rpcSetting.ts
index 7b0b8145d6043..b13de8a67ea92 100644
--- a/apps/explorer/src/utils/api/rpcSetting.ts
+++ b/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 {
diff --git a/apps/explorer/src/utils/growthbook.ts b/apps/explorer/src/utils/growthbook.ts
index a724b826ced66..bd6bb780a0f02 100644
--- a/apps/explorer/src/utils/growthbook.ts
+++ b/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',
+}