Networks

Within most blockchain ecosystems, there is a concept of "networks". Within Stacks, networks are of either two "chain modes": testnet or mainnet. Mainnet refers to the primary Stacks blockchain, where real transactions and activity occur. Testnet is a staging or non-production instance of the network. There can be many instances of testnet, but only one of mainnet.

Unlike in Ethereum or other chains, where the wallet controls what network is set for a given application, that responsibility lies with the apps. This means an app could be operating only in testnet, where the user might have their wallet set to mainnet.

Changing the default network#

The default network mode is set to mainnet. To change default mode of your application, you can pass network="testnet" (or an instance of StacksNetwork) to your client, like so:

import * as MicroStacks from '@micro-stacks/react';
 
function App() {
  return (
    <MicroStacks.ClientProvider
      appName="My sick app"
      appIconUrl="APP_ICON.png"
      network="testnet"
    >
      <Router />
    </MicroStacks.ClientProvider>
  );
}
 
export default App;

Toggling networks in-app#

Sometimes you'll be building an app that can work in many different networks, or take a custom RPC api endpoint. In this case, you can create a button that will change the network:

import { useNetwork } from '@micro-stacks/react';
 
export const NetworkToggle = () => {
  const { isMainnet, setNetwork } = useNetwork();
  const networkMode = isMainnet ? 'mainnet' : 'testnet';
 
  return (
    <button onClick={() => setNetwork(isMainnet ? 'testnet' : 'mainnet')}>{networkMode}</button>
  );
};