A transaction success modal should let the user know their transaction has been successful and provide logical next steps.

You're going to Devcon
Your NFT ticket should now be in your wallet. Show it when you arrive at the venue.
Conference ticket - #32
Show ticket details
Gift your ticketShare
// 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="success" borderRadius={["1rem 1rem 0 0"]} />
  <Flex
    justifyContent="space-between"
    alignItems="center"
    borderBottom={1}
    borderColor="near-white"
    p={[3, 4]}
    pb={3}
  >
    <Icon name="CheckCircle" color="success" aria-label="Success" />
    <Heading textAlign="center" as="h1" fontSize={[2, 3]} px={[3, 0]}>
      You're going to Devcon
    </Heading>
    <Link>
      <Icon
        name="Close"
        color="moon-gray"
        aria-label="Close and cancel connection"
      />
    </Link>
  </Flex>
  <Box p={[3, 4]} pb={2}>
    <Text textAlign="center" mt={2}>
      Your NFT ticket should now be in your wallet. Show it when you arrive at
      the venue.
    </Text>
    <Flex mt={4} justifyContent="center">
      <Card p={3} borderRadius={16}>
        <Image src="/images/devcon-ticket-example.png" size="156px" />
      </Card>
    </Flex>
  </Box>
  <Flex pt={2} pb={4} justifyContent="center" flexDirection="column">
    <Heading textAlign="center" as="h4">
      Conference ticket - #32
    </Heading>
    <Link textAlign="center">Show ticket details</Link>
  </Flex>

  <Flex
    pt={[4, 4]}
    pb={[4, 4]}
    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"]}>
      Gift your ticket
    </Button.Outline>
    <Button width={["100%", "auto"]}>Share</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="success" borderRadius={["1rem 1rem 0 0"]} />
  <Flex
    justifyContent="space-between"
    alignItems="center"
    borderBottom={1}
    borderColor="near-white"
    p={[3, 4]}
    pb={3}
  >
    <Icon name="CheckCircle" color="success" aria-label="Success" />
    <Heading textAlign="center" as="h1" fontSize={[2, 3]} px={[3, 0]}>
      You're going to Devcon
    </Heading>
    <Link>
      <Icon
        name="Close"
        color="moon-gray"
        aria-label="Close and cancel connection"
      />
    </Link>
  </Flex>
  <Box p={[3, 4]} pb={2}>
    <Text textAlign="center" mt={2}>
      Your NFT ticket should now be in your wallet. Show it when you arrive at
      the venue.
    </Text>
    <Flex mt={4} justifyContent="center">
      <Card p={3} borderRadius={16}>
        <Image src="/images/devcon-ticket-example.png" size="156px" />
      </Card>
    </Flex>
  </Box>
  <Flex pt={2} pb={4} justifyContent="center" flexDirection="column">
    <Heading textAlign="center" as="h4">
      Conference ticket - #32
    </Heading>
    <Link textAlign="center">Show ticket details</Link>
  </Flex>
  <Flex
    pt={[4, 4]}
    pb={[4, 4]}
    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"]}>
      Gift your ticket
    </Button.Outline>
    <Button width={["100%", "auto"]}>Share</Button>
  </Flex>
</Card>
Copy code
Expand code

Template anatomy

1. Title

2. Body

3. Visual

4. CTAs

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