No MetaMask modal

On this page

Template anatomy
See demo

No MetaMask modal

The modal should instruct users to install MetaMask if they are trying to use a Web3 feature in your dApp but you can't detect a Web3 provider. This should only be displayed if the user is using a desktop browser that is compatible with MetaMask (e.g. not Safari). This modal should explain why the user needs MetaMask and provide a direct link to installation.

This template is only relevant in edge cases where your dApp doesn't support alternative connection methods like WalletConnect or Portis.

Install MetaMask to use [dApp]
MetaMask is a browser extension that will let you use our blockchain features in this browser. It may take you a few minutes to set up your MetaMask account.
Rather use your phone? You can use [dApp] in mobile browser wallets like Status, Cipher or Coinbase wallet.
// import { Heading, Text, Flex, Modal, MetaMaskButton, Box, Card } from "rimble-ui";

<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]}>
      Install MetaMask 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={4}>
      MetaMask is a browser extension that will let you use our blockchain
      features in this browser. It may take you a few minutes to set up your
      MetaMask account.
    </Text>
    <Text italic>
      Rather use your phone? You can use [dApp] in mobile browser wallets like{" "}
      <Link>Status</Link>, <Link>Cipher</Link> or <Link>Coinbase wallet</Link>.
    </Text>
  </Box>
  <Flex justifyContent="flex-end" borderTop={1} borderColor="light-gray" p={[3, 4]}>
    <MetaMaskButton width={["100%", "auto"]}>
      Install MetaMask
    </MetaMaskButton>
  </Flex>
</Card>// import { Heading, Text, Flex, Modal, MetaMaskButton, Box, Card } from "rimble-ui";
<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]}>
      Install MetaMask 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={4}>
      MetaMask is a browser extension that will let you use our blockchain
      features in this browser. It may take you a few minutes to set up your
      MetaMask account.
    </Text>
    <Text italic>
      Rather use your phone? You can use [dApp] in mobile browser wallets like{" "}
      <Link>Status</Link>, <Link>Cipher</Link> or <Link>Coinbase wallet</Link>.
    </Text>
  </Box>
  <Flex justifyContent="flex-end" borderTop={1} borderColor="light-gray" p={[3, 4]}>
    <MetaMaskButton width={["100%", "auto"]}>
      Install MetaMask
    </MetaMaskButton>
  </Flex>
</Card>

Template anatomy

1. Title

Clearly states that an extra step is needed to progress.

2. Body

Explains what MetaMask is and why you need it. It also sets some expectations around the fact that there's a setup time for getting MetaMask ready.

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.

4. MetaMaskButton

Directs the user straight to the right page to avoid any dodgy sites or confusion.

See demo

An illustration of Rimble's connecting to a dApp process

dApp connection demo

Our connection demo shows methods for helping a user connect to your dApp and start transacting.

dApp connection demo

No MetaMask modal

No MetaMask modal

Install MetaMask to use [dApp]

Template anatomy

1. Title

2. Body

3. "Rather use your phone" copy

4. MetaMaskButton

See demo

dApp connection demo

Navigate the guide