A transaction failure modal should let the user know their transaction has failed and what to do next.

Buying 10 BAT failed
We couldn’t confirm your purchase because your transaction fee proved too low. Based on the network right now, we recommend trying again with a transaction fee of at least 0.005 ETH.
View on EtherscanTry again
// import { Modal, Card, Box, Blockie, Flex, Icon, Text, Link, Heading, Button } from "rimble-ui";

<Card p={0} borderRadius={1} mb={4}>
  <Box height="4px" bg="danger" borderRadius={["1rem 1rem 0 0"]} />
  <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]}>
      Buying 10 BAT failed
    </Heading>
    <Link>
      <Icon
        name="Close"
        color="moon-gray"
        aria-label="Close and cancel connection"
      />
    </Link>
  </Flex>
  <Text p={[3, 4]}>
    We couldn’t confirm your purchase because your transaction fee proved too
    low. Based on the network right now, we recommend trying again with a
    transaction fee of at least 0.005 ETH.
  </Text>
  <Flex
    p={[3, 4]}
    borderTop={1}
    borderColor="near-white"
    justifyContent="flex-end"
    flexDirection={["column", "row"]}
    alignItems="center"
  >
    <Button.Outline mr={[0, 3]} mb={[2, 0]} width={["100%", "auto"]}>
      View on Etherscan
    </Button.Outline>
    <Button width={["100%", "auto"]}>Try again</Button>
  </Flex>
</Card>
// import { Modal, Card, Box, Blockie, Flex, Icon, Text, Link, Heading, Button } from "rimble-ui";
<Card p={0} borderRadius={1} mb={4}>
  <Box height="4px" bg="danger" borderRadius={["1rem 1rem 0 0"]} />
  <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]}>
      Buying 10 BAT failed
    </Heading>
    <Link>
      <Icon
        name="Close"
        color="moon-gray"
        aria-label="Close and cancel connection"
      />
    </Link>
  </Flex>
  <Text p={[3, 4]}>
    We couldn’t confirm your purchase because your transaction fee proved too
    low. Based on the network right now, we recommend trying again with a
    transaction fee of at least 0.005 ETH.
  </Text>
  <Flex
    p={[3, 4]}
    borderTop={1}
    borderColor="near-white"
    justifyContent="flex-end"
    flexDirection={["column", "row"]}
    alignItems="center"
  >
    <Button.Outline mr={[0, 3]} mb={[2, 0]} width={["100%", "auto"]}>
      View on Etherscan
    </Button.Outline>
    <Button width={["100%", "auto"]}>Try again</Button>
  </Flex>
</Card>
Copy code
Expand code

Template anatomy

1. Title

2. Body

3. CTA

See demo

Transaction demo

Our transaction states demo, presented at Devcon V, shows methods for updating a user on the status of their transaction.

Transaction states demo