Not enough ETH modal

On this page

Template anatomy

Not enough ETH modal

A not enough ETH modal should let the user know how to update their balance and why in order for them to continue successfully with their transaction. It should be triggered by checking the user's balance once they go to transact.


Not enough ETH for transaction fees
Buy some Ether (ETH) or move some to this account to purchase your ticket. You'll need at least 0.001 ETH ($0.10).
Every blockchain transaction has a fee to cover the network's processing costs.
Move ETH to this account
To send funds to this Ethereum address, scan this code using your mobile wallet app
// import { Modal, Card, Box, Blockie, Flex, Icon, Text, Link, Heading, Button } from "rimble-ui";

<Box>
  <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]}>
        Not enough ETH for transaction fees
      </Heading>
      <Link>
        <Icon
          name="Close"
          color="moon-gray"
          aria-label="Close and cancel connection"
        />
      </Link>
    </Flex>
    <Box p={[3, 4]}>
      <Text my={2}>
        Buy some Ether (ETH) or move some to this account to purchase your
        ticket. You'll need at least 0.001 ETH ($0.10).
      </Text>
      <Text italic>
        Every blockchain transaction has a fee to cover the network's processing
        costs.
      </Text>
    </Box>
    <Flex
      p={[3, 4]}
      borderTop={1}
      borderColor="near-white"
      justifyContent="space-between"
      flexDirection={["column", "row"]}
      alignItems="center"
    >
      <Button.Text mb={3}>Move ETH from another account</Button.Text>
      <Button width={["100%", "auto"]}>Buy with card</Button>
    </Flex>
  </Card>

  <Card p={0} borderRadius={1}>
    <Flex
      justifyContent="space-between"
      alignItems="center"
      borderBottom={1}
      borderColor="near-white"
      p={[3, 4]}
      pb={3}
    >
      <Icon name="ArrowBack" color="primary" aria-label="Back" />
      <Heading textAlign="center" as="h4" fontSize={[2, 3]} px={[3, 0]}>
        Move ETH to this account
      </Heading>
      <Link>
        <Icon
          name="Close"
          color="moon-gray"
          aria-label="Close and cancel connection"
        />
      </Link>
    </Flex>
    <Box p={[3, 4]}>
      <Text textAlign="center">
        To send funds to this Ethereum address, scan this code using your mobile
        wallet app
      </Text>
      <Flex my={4} justifyContent="center">
        <Card p={3} borderRadius={16}>
          <QR size="200" value="0xAc03BB73b6a9e108530AFf4Df5077c2B3D481e5A" />
        </Card>
      </Flex>
      <EthAddress
        required={true}
        address="0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49"
      />
    </Box>
  </Card>
</Box>// import { Modal, Card, Box, Blockie, Flex, Icon, Text, Link, Heading, Button } from "rimble-ui";
<Box>
  <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]}>
        Not enough ETH for transaction fees
      </Heading>
      <Link>
        <Icon
          name="Close"
          color="moon-gray"
          aria-label="Close and cancel connection"
        />
      </Link>
    </Flex>
    <Box p={[3, 4]}>
      <Text my={2}>
        Buy some Ether (ETH) or move some to this account to purchase your
        ticket. You'll need at least 0.001 ETH ($0.10).
      </Text>
      <Text italic>
        Every blockchain transaction has a fee to cover the network's processing
        costs.
      </Text>
    </Box>
    <Flex
      p={[3, 4]}
      borderTop={1}
      borderColor="near-white"
      justifyContent="space-between"
      flexDirection={["column", "row"]}
      alignItems="center"
    >
      <Button.Text mb={3}>Move ETH from another account</Button.Text>
      <Button width={["100%", "auto"]}>Buy with card</Button>
    </Flex>
  </Card>
  <Card p={0} borderRadius={1}>
    <Flex
      justifyContent="space-between"
      alignItems="center"
      borderBottom={1}
      borderColor="near-white"
      p={[3, 4]}
      pb={3}
    >
      <Icon name="ArrowBack" color="primary" aria-label="Back" />
      <Heading textAlign="center" as="h4" fontSize={[2, 3]} px={[3, 0]}>
        Move ETH to this account
      </Heading>
      <Link>
        <Icon
          name="Close"
          color="moon-gray"
          aria-label="Close and cancel connection"
        />
      </Link>
    </Flex>
    <Box p={[3, 4]}>
      <Text textAlign="center">
        To send funds to this Ethereum address, scan this code using your mobile
        wallet app
      </Text>
      <Flex my={4} justifyContent="center">
        <Card p={3} borderRadius={16}>
          <QR size="200" value="0xAc03BB73b6a9e108530AFf4Df5077c2B3D481e5A" />
        </Card>
      </Flex>
      <EthAddress
        required={true}
        address="0x9505C8Fc1aD98b0aC651b91245d02D055fEc8E49"
      />
    </Box>
  </Card>
</Box>

Template anatomy

An annotated image calling out the different elements of the template

1. Title

Clearly explains the problem to the user when trying to transact.

2. Body

Explains that the user should add funds to their account if they want to continue.

3. CTAs

These represent the two paths a user can take in order to proceed with their transaction."Buy with card" should be used if you're integrated with a fiat on-ramp like Moonpay or Wyre – we believe this to be the best UX. Alternatively link to your preferred exchange.

1. Title

Reiterates the task at hand.

2. Body copy

Explains how to use the below QR code.

3. QR code

Gives experienced users a simple way to top-up via scanning and sending using a mobile wallet.

4. ETH address

Provides a way for a user to copy/paste their Ethereum address in order to top up their Ethereum account.

Not enough ETH modal

Not enough ETH modal

Not enough ETH for transaction fees

Move ETH to this account

Template anatomy

1. Title

2. Body

3. CTAs

1. Title

2. Body copy

3. QR code

4. ETH address

Navigate the guide