fix: adds toggling between solana devnet and mainnet

dapps/react-dapp-v2-with-solana-web3js/src/App.tsx

@@ -8,8 +8,8 @@ import Blockchain from "./components/Blockchain";
 import Column from "./components/Column";
 import Header from "./components/Header";
 import Modal from "./components/Modal";
-import { DEFAULT_MAIN_CHAINS } from "./constants";
-import { AccountAction } from "./helpers";
+import { DEFAULT_MAIN_CHAINS, DEFAULT_TEST_CHAINS } from "./constants";
+import { AccountAction, getLocalStorageTestnetFlag, setLocaleStorageTestnetFlag } from "./helpers";
 import RequestModal from "./modals/RequestModal";
 import PingModal from "./modals/PingModal";
 import {
@@ -19,8 +19,10 @@ import {
   SContent,
   SLanding,
   SLayout,
+  SToggleContainer,
 } from "./components/app";
 import { SolanaRpcMethod, useWalletConnectClient } from "./contexts/ClientContext";
+import Toggle from "./components/Toggle";
 
 interface IFormattedRpcResponse {
   method?: string;
@@ -30,6 +32,7 @@ interface IFormattedRpcResponse {
 }
 
 export default function App() {
+  const [isTestnet, setIsTestnet] = useState(getLocalStorageTestnetFlag());
   const [isRpcRequestPending, setIsRpcRequestPending] = useState(false);
   const [rpcResult, setRpcResult] = useState<IFormattedRpcResponse | null>();
 
@@ -163,8 +166,15 @@ export default function App() {
     }
   };
 
+  // Toggle between displaying testnet or mainnet chains as selection options.
+  const toggleTestnets = () => {
+    const nextIsTestnetState = !isTestnet;
+    setIsTestnet(nextIsTestnetState);
+    setLocaleStorageTestnetFlag(nextIsTestnetState);
+  };
+
   const renderContent = () => {
-    const chainOptions = DEFAULT_MAIN_CHAINS;
+    const chainOptions = isTestnet ? DEFAULT_TEST_CHAINS : DEFAULT_MAIN_CHAINS;
     return !accounts.length && !Object.keys(balances).length ? (
       <SLanding center>
         <Banner />
@@ -173,8 +183,18 @@ export default function App() {
         </h6>
         <SButtonContainer>
           <h6>Select chain:</h6>
+          <SToggleContainer>
+            <p>Testnet Only?</p>
+            <Toggle active={isTestnet} onClick={toggleTestnets} />
+          </SToggleContainer>
           {chainOptions.map(chainId => (
-            <Blockchain key={chainId} chainId={chainId} chainData={chainData} onClick={onEnable} />
+            <Blockchain
+              key={chainId}
+              chainId={chainId}
+              chainData={chainData}
+              isTestnet={isTestnet}
+              onClick={onEnable}
+            />
           ))}
         </SButtonContainer>
       </SLanding>

dapps/react-dapp-v2-with-solana-web3js/src/components/Blockchain.tsx

@@ -90,6 +90,7 @@ interface BlockchainProps {
   onClick?: (chain: string) => void;
   balances?: AccountBalances;
   actions?: AccountAction[];
+  isTestnet?: boolean;
 }
 
 interface BlockchainDisplayData {
@@ -119,7 +120,7 @@ function getBlockchainDisplayData(
 const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
   props: PropsWithChildren<BlockchainProps>,
 ) => {
-  const { fetching, chainId, address, onClick, balances, active, actions } = props;
+  const { fetching, chainId, address, onClick, balances, active, actions, isTestnet } = props;
 
   // if (!Object.keys(chainData).length) return null;
 
@@ -130,7 +131,7 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
 
   const chain = {
     meta: {
-      name: "Solana",
+      name: isTestnet ? "Solana Devnet" : "Solana Mainnet",
       rgb: "0, 0, 0",
       logo: "/solana_logo.png",
     },