deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: adds toggling between solana devnet and mainnet

Browse Source
This commit is contained in:
Ben Kremer 2022-03-14 12:10:15 +01:00
parent ae2a3d2d60
commit 5338c930fe
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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