We designed this modal to help desktop users change browsers if they want to use your dApp (if they're using Safari, for example). This modal should only appear if a user tries to do something that requires Web3.
You can avoid this modal if you integrate a service like
Portis which allows desktop users to connect without a Web3 provider in their browser.
Switch browsers to use [dApp]
You can't [dapp blockchain feature e.g. buy tokens] in this browser. in this browser. Switch to
Brave,
FireFox,
Opera, or
Chrome to continue.
<Card p={0} borderRadius={1}>
<Flex
justifyContent="space-between"
alignItems="center"
borderBottom={1}
borderColor="near-white"
p={[3, 4]}
pb={3}
>
<Icon name="Warning" color="danger" aria-label="Warning" />
<Heading textAlign="center" as="h1" fontSize={[2, 3]} px={[3, 0]}>
Switch browsers to use [dApp]
</Heading>
<Link>
<Icon
name="Close"
color="moon-gray"
aria-label="Close and cancel connection"
/>
</Link>
</Flex>
<Box p={[3, 4]}>
<Text mb={[3, 4]}>
You can't [dapp blockchain feature e.g. buy tokens] in this browser. in
this browser. Switch to <Link>Brave</Link>, <Link>FireFox</Link>,{" "}
<Link>Opera</Link>, or <Link>Chrome</Link> to continue.
</Text>
<Text italic>
Rather use your phone? You can use the Rimble App Demo in mobile browser
wallets like <Link>Status</Link>, <Link>Cipher</Link> or{" "}
<Link>Coinbase wallet</Link>.
</Text>
</Box>
</Card>
Mobile browser content
Switch browsers to use [dApp]
You can't [dapp blockchain feature, e.g. buy a cryptokitty] in this browser. We recommend using mobile wallet browsers like
Status,
Cipher or
MetaMask wallet.
<Card p={0} borderRadius={1}>
<Flex
justifyContent="space-between"
alignItems="center"
borderBottom={1}
borderColor="near-white"
p={[3, 4]}
pb={3}
>
<Icon name="Warning" color="danger" aria-label="Warning" />
<Heading textAlign="center" as="h1" fontSize={[2, 3]} px={[3, 0]}>
Switch browsers to use [dApp]
</Heading>
<Link>
<Icon
name="Close"
color="moon-gray"
aria-label="Close and cancel connection"
/>
</Link>
</Flex>
<Box p={[3, 4]}>
<Text mb={[2, 4]}>
You can't [dapp blockchain feature, e.g. buy a cryptokitty] in this
browser. We recommend using mobile wallet browsers like{" "}
<Link>Status</Link>, <Link>Cipher</Link> or <Link>MetaMask wallet</Link>.
</Text>
</Box>
</Card>
Template anatomy
1. Title
Sums up the main instruction.
2. Body
Explains why and links users to a list of acceptable browsers. Because you can't install MetaMask extension on traditional mobile browsers, the content here should change between desktop and mobile. The mobile content should just link to mobile wallet browsers like Status or MetaMask wallet.
3. "Rather use your phone" copy
It may be easier to get users to onboard via a mobile wallet which will have experiences designed for getting users set up with a wallet. Only use this content on desktop.
See demo
dApp connection demo
Our connection demo shows methods for helping a user connect to your dApp and start transacting.
