The modal should help users get on the right network to use your dApp. This modal should only appear if a user tries to do something that requires Web3 – not just when they land on your dApp.
Switch to the Main Ethereum network
This dApp only works on the Main Ethereum network. You’re currently on Rinkeby.
Waiting for the right network...
Switch networks from your wallet
<Card p={0} borderRadius={1}>
<Flex
justifyContent="space-between"
alignItems="center"
borderBottom={1}
borderColor="near-white"
p={[3, 4]}
pb={3}
>
<Image
src="/images/MetaMaskIcon.svg"
aria-label="MetaMask extension icon"
size="24px"
/>
<Heading textAlign="center" as="h1" fontSize={[2, 3]} px={[3, 0]}>
Switch to the Main Ethereum network
</Heading>
<Link>
<Icon
name="Close"
color="moon-gray"
aria-label="Close and cancel connection"
/>
</Link>
</Flex>
<Box p={[3, 4]}>
<Text textAlign="center">
This dApp only works on the Main Ethereum network. You’re currently on{" "}
<b>Rinkeby</b>.
</Text>
</Box>
<Box px={[3, 4]} pb={[3, 4]}>
<Flex
flexDirection={["column", "row"]}
bg={"primary-2x-light"}
p={[3, 4]}
alignItems={["center", "auto"]}
>
<Loader size={"3em"} mr={[0, 3]} mb={[2, 0]} />
<Flex flexDirection="column" alignItems={["center", "flex-start"]}>
<Text fontWeight={4}>Waiting for the right network...</Text>
<Text fontWeight={2}>Switch networks from your wallet</Text>
</Flex>
</Flex>
</Box>
</Card>
Template anatomy
1. Title
Straight-to-the-point title which allows those with more Ethereum knowledge to quickly follow the instruction. "MetaMask" icon should change based on the wallet provider in use.
2. Body
Explains why the user is being blocked by this modal. You might want to make this more explicit to reference the action the user is trying to do, for example "You can only send ETH on the Main Ethereum network". It also reiterates the user's current network as this can act as a good reference point for more inexperienced users when they're looking for where to switch networks.
3. Waiting banner with loader
Indicates to the user that the dApp is waiting for them to complete an action.
See demo
dApp connection demo
Our connection demo shows methods for helping a user connect to your dApp and start transacting.
