diff --git a/dapps/react-dapp-v2-with-solana-web3js/src/App.tsx b/dapps/react-dapp-v2-with-solana-web3js/src/App.tsx index cad0ec1..8df337b 100644 --- a/dapps/react-dapp-v2-with-solana-web3js/src/App.tsx +++ b/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(); @@ -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 ? ( @@ -173,8 +183,18 @@ export default function App() {
Select chain:
+ +

Testnet Only?

+ +
{chainOptions.map(chainId => ( - + ))}
diff --git a/dapps/react-dapp-v2-with-solana-web3js/src/components/Blockchain.tsx b/dapps/react-dapp-v2-with-solana-web3js/src/components/Blockchain.tsx index 725658a..593c563 100644 --- a/dapps/react-dapp-v2-with-solana-web3js/src/components/Blockchain.tsx +++ b/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> = ( props: PropsWithChildren, ) => { - 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> = ( const chain = { meta: { - name: "Solana", + name: isTestnet ? "Solana Devnet" : "Solana Mainnet", rgb: "0, 0, 0", logo: "/solana_logo.png", },