@chakra-ui/react#Heading JavaScript Examples

MeetupSpeakers = ({ speakers, ...props }) => (
  <StackInline spacing={10} {...props}>
    {speakers &&
      speakers.map((speaker) => (
        <Box key={speaker.twitter}>
          <Heading as="h5" size="sm" color="brand.900">
            {speaker.name}
          </Heading>
          <Image
            boxSize="7.5rem"
            objectFit="cover"
            src={speaker.avatar}
            alt={speaker.name}
            fallbackSrc="/default.jpg"
            borderRadius={4}
            mt={2}
          />
          {speaker.twitter && (
            <A href={`https://twitter.com/${speaker.twitter}`} target="_blank">
              @{speaker.twitter}
            </A>
          )}
        </Box>
      ))}
  </StackInline>
)

function Card({ cardTitle, backgroundColor, children, isLoading }) {
    return (
        <VStack borderRadius="10px" borderStyle="solid" borderColor="whatsapp.500" borderWidth="1px" width="100%" alignItems="flex-start">
            <Box backgroundColor={backgroundColor} width="100%" borderBottomWidth="1px" borderColor="whatsapp.500" px="20px" py="20px">
                <Skeleton isLoaded={!isLoading}>
                    <Heading fontSize="16px">
                        {cardTitle}
                    </Heading>
                </Skeleton>
                
            </Box>
            <VStack alignItems="flex-start" px="20px" py="20px" width="100%">
                {children}
            </VStack>
        </VStack>
    );
}

MDXComponents = {
    h1: (props) => <Heading as="h1" size="xl" my={4} {...props} />,
    h2: (props) => <Heading as="h2" size="lg" fontWeight="bold" {...props} />,
    h3: (props) => <Heading as="h3" size="md" fontWeight="bold" {...props} />,
    h4: (props) => <Heading as="h4" size="sm" fontWeight="bold" {...props} />,
    h5: (props) => <Heading as="h5" size="sm" fontWeight="bold" {...props} />,
    h6: (props) => <Heading as="h6" size="xs" fontWeight="bold" {...props} />,
    inlineCode: (props) => (
        <Code colorScheme="yellow" fontSize="0.84em" {...props} />
    ),
    br: (props) => <Box height="24px" {...props} />,
    hr: Hr,
    a: CustomLink,
    p: (props) => <Text as="p" mt={0} lineHeight="tall" {...props} />,
    ul: (props) => <Box as="ul" pt={2} pl={4} ml={2} {...props} />,
    ol: (props) => <Box as="ol" pt={2} pl={4} ml={2} {...props} />,
    li: (props) => <Box as="li" pb={1} {...props} />,
    blockquote: Quote,
}

export function FormSectionTitle(props) {
  return (
    <Heading
      as="h3"
      pt="2"
      pb="3"
      mb={2}
      fontSize="mdx"
      fontWeight={500}
      lineHeight="5"
      {...props}
    />
  )
}

Podcast = ({ podcast }) => {
  const { title, itunesId, description, artwork, categories } = podcast
  const [subscribeMutation, { data }] = useMutation(PODCAST_SUBSCRIBE)
  return (
    <Flex rounded="lg" borderWidth="2px" m={4}>
      <Box width="200px">
        <Image src={artwork} boxSize="200px" />
        <Button
          width="100%"
          onClick={() =>
            subscribeMutation({ variables: { itunesID: itunesId } })
          }
        >
          <AddIcon />
        </Button>
      </Box>
      <Box m={4} maxWidth="300px">
        <Heading noOfLines={2}>{title}</Heading>
        <Text noOfLines={3}>{description}</Text>
        <Stack isInline>
          {categories.slice(0, 3).map((c) => {
            return <Tag key={c}>{c}</Tag>
          })}
        </Stack>
      </Box>
    </Flex>
  )
}

NotFoundPage = () => (
  <>
    <SEO title="404: Not found" />

    <Box textAlign="center" py="24">
      <Logo />
      <Heading>404: Not Found</Heading>
      <Text fontSize="xl" my={5}>
        You just hit a route that doesn&#39;t exist...
      </Text>
    </Box>
  </>
)

MdH1 = ({ children }) => {
  const { borderColor } = useCustomColorModes();

  return (
    <Heading as="h1" size="xl" mt={6} mb={4} pb={2} borderBottom="1px solid" borderColor={borderColor}>
      {children}
    </Heading>
  );
}

Header = () => {
  return (
      <Flex
          as="nav"
          align="center"
          justify="space-between"
          wrap="wrap"
          padding="0.5rem"
          bg="gray.400"
      >
        <Flex align="center" mr={5}>
          <Heading as="h1" size="sm">Todos</Heading>
          <Divider />
        </Flex>
      </Flex>
  );
}

export default function Forget() {
    return (
      <>
      <Navbar />
        <div className="login">
      <div className="login__container">
        <div className="login__containerTop">
          <div className="login__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="login__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              FORGET PASSWORD
            </Heading>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input  required
                borderRadius="full"
                type="tel"
                placeholder="Email Address"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="login__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input
                type="tel" required
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <HStack className="login__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="loginBtn"
              >
                SUBMIT
              </Button>
              <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/login" >Remember?</a>
              </Link>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
    )
}

MeetupSpeaker = ({ speaker, ...props }) => {
  const md = new Remarkable("full", {
    html: true,
  });

  // Save original method to invoke.
  var originalRender = md.renderer.rules.link_open;

  md.renderer.rules.link_open = function () {
    // Invoke original method first.
    let result = originalRender.apply(null, arguments);

    result = result.replace(
      ">",
      'target="_blank" rel="noopener noreferrer" class="remarkable-link">'
    );

    return result;
  };

  const bio = md.render(speaker.bio);

  return (
    <Stack spacing={2} {...props}>
      <Heading as="h5" size="sm" color="brand.900">
        {speaker.name}
      </Heading>
      <Stack isInline spacing={6}>
        <Image
          boxSize={{ base: "5rem", sm: "7.5rem" }}
          flex="none"
          objectFit="cover"
          src={speaker.avatar}
          alt={speaker.name}
          fallbackSrc="/default.jpg"
          borderRadius={4}
        />
        <Stack>
          <Box
            className="remarkable"
            dangerouslySetInnerHTML={{ __html: bio }}
          />
          {speaker.twitter && (
            <Text>
              Twitter :{" "}
              <A
                href={`https://twitter.com/${speaker.twitter}`}
                target="_blank"
              >
                @{speaker.twitter}
              </A>
            </Text>
          )}
        </Stack>
      </Stack>
    </Stack>
  );
}

function Stats(props) {
	return (
		<VStack width='100%'>
			<VStack
				borderColor='whatsapp.500'
				borderStyle='solid'
				borderWidth='1px'
				alignItems='flex-start'
				px='20px'
				py='15px'
				width='100%'
				boxShadow='base'
				borderRadius='10px'>
				<Text fontWeight='600'>Treasury Funds</Text>
				<Heading fontSize='24px' textColor='whatsapp.500'>
					50 DAI
				</Heading>
			</VStack>
			<VStack
				borderColor='whatsapp.500'
				borderStyle='solid'
				borderWidth='1px'
				alignItems='flex-start'
				px='20px'
				py='15px'
				width='100%'
				boxShadow='base'
				borderRadius='10px'>
				<Text fontWeight='600'>Total Claims</Text>
				<Heading fontSize='24px' textColor='whatsapp.500'>
					{props.claims}
				</Heading>
			</VStack>
			<VStack
				borderColor='whatsapp.500'
				borderStyle='solid'
				borderWidth='1px'
				alignItems='flex-start'
				px='20px'
				py='15px'
				width='100%'
				boxShadow='base'
				borderRadius='10px'>
				<Text fontWeight='600'>DAO Members</Text>
				<Heading fontSize='24px' textColor='whatsapp.500'>
					{props.daoMemberCount}
				</Heading>
			</VStack>
		</VStack>
	);
}

GearList = () => {
    const { data, error } = useSWR('/api/gear', fetcher)
    const { colorMode } = useColorMode()

    const color = {
        light: 'black',
        dark: 'white'
    }

    if (error) return <div>Error loading gear!</div>
    if (!data) return <CircularProgress isIndeterminate color={color[colorMode]}></CircularProgress>

    var software = data.filter(function (g) {
        return g.software == 1
    })

    var hardware = data.filter(function (g) {
        return g.software == 0
    })

    var cameraGear = data.filter(function (g) {
        return g.software == 2
    })

    return (
        <>
            <Heading letterSpacing="tight" mb={2} mt={2} as="h2" size="xl">
                Hardware
            </Heading>
            {hardware.map((g, i) => (
                <Gear key={i} gear={g} />
            ))}
            <Heading letterSpacing="tight" mb={2} mt={4} as="h2" size="xl">
                Software
            </Heading>
            {software.map((g, i) => (
                <Gear key={i} gear={g} />
            ))}
            <Heading letterSpacing="tight" mb={2} mt={4} as="h2" size="xl">
                Camera Gear
            </Heading>
            {cameraGear.map((g, i) => (
                <Gear key={i} gear={g} />
            ))}
        </>
    )
}

export default function ManyTabs() {
  const router = useRouter()
  const {t} = useTranslation()

  return (
    <Flex
      flexWrap="wrap"
      color="brand.gray"
      bg="gray.100"
      fontSize="md"
      h="100vh"
      flex={1}
      w="100%"
      align="center"
      justify="center"
    >
      <Flex align="center" justify="center" px={20} py={20} bg="white">
        <Stack alignItems="center" spacing={4}>
          <Image
            ignoreFallback
            src="/static/idena-logo-circle.svg"
            alt="logo"
            w={16}
          />
          <Heading fontSize="lg" fontWeight={500} color="gray.500">
            {t('Error, many tabs…')}
          </Heading>
          <Text color="muted" w="320px" textAlign="center">
            {t(
              'Idena supports only one active tab with the app. Please reload this page to continue using this tab or close it.'
            )}
          </Text>
          <IconButton
            onClick={() => router.reload()}
            rightIcon={<RefreshIcon boxSize={5} />}
          >
            {t('Reload page')}
          </IconButton>
        </Stack>
      </Flex>
    </Flex>
  )
}

Modal = ({ title, src, children, actions, size = '2xl' }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Box onClick={onOpen}>{src}</Box>
      <ChakModal
        isOpen={isOpen}
        onClose={onClose}
        isCentered
        motionPreset="scale"
        size={size}
        autoFocus={false}
        returnFocusOnClose={false}
      >
        <ModalOverlay background="rgba(78,86,107,0.71)" />
        <ModalContent>
          <ModalHeader px={{ base: '2', lg: '10' }}>
            <Flex align="center">
              <Flex
                direction={{ base: 'column', lg: 'row' }}
                align="center"
                justify={{ base: 'center', lg: 'space-between' }}
                flex="1"
              >
                <Heading fontSize="xl" variant="main">
                  {title}
                </Heading>
                <Box>{actions}</Box>
              </Flex>
              <Button
                onClick={onClose}
                variant="subtle"
                pos="relative"
                right={{ base: '0', lg: '-20px' }}
              >
                <CloseIcon />
              </Button>
            </Flex>
          </ModalHeader>
          <Divider />
          <ModalBody py="5" px="10">
            {typeof children === 'function' ? children() : children}
          </ModalBody>
        </ModalContent>
      </ChakModal>
    </>
  );
}

export default function ActivityView() {
  const [eventsFeed, setEventFeeds] = useState([]);
  const [isLoadingEvents, setIsLoadingEvents] = useState(false);
  const { secondaryFontColor } = useCustomColorModes();

  useEffect(() => {
    const updateEvents = async () => {
      setIsLoadingEvents(true);
      const events = await getAllEvents(25);
      setEventFeeds(events);
      setIsLoadingEvents(false);
    };

    updateEvents();
  }, []);

  return (
    <Container maxW="container.md" centerContent>
      <Heading as="h1" mb="4">
        Activity feed
      </Heading>
      <Text color={secondaryFontColor} textAlign="center" mb={10}>
        Last 25 things happening at SRE.
      </Text>
      {isLoadingEvents ? (
        <Box w="100%" maxW="500px">
          <SkeletonText mt="4" noOfLines={10} spacing="4" />
        </Box>
      ) : (
        <Table>
          <Thead>
            <Tr>
              <Th>Builder</Th>
              <Th>Time</Th>
              <Th>Action</Th>
            </Tr>
          </Thead>
          <Tbody>
            {eventsFeed.map(event => (
              <EventRow key={`${event.timestamp}_${event.payload.userAddress}`} event={event} />
            ))}
          </Tbody>
        </Table>
      )}
    </Container>
  );
}

function Register() {
  return (
    <>
    <Navbar />
    <div className="Register">
      <div className="Register__container">
        <div className="Register__containerTop">
          <div className="Register__img"></div>
          <p>Add a crisp to your bulky documents !!</p>
          <h4>Welcome to the website</h4>
        </div>
        <div className="Register__containerBottom">
          <VStack className="input__container" w="65%" m="auto">
            <Heading
              fontSize="1.2rem"
              color="blue.500"
              fontWeight="semibold"
              py={3}
            >
              Register HERE
            </Heading>
            <InputGroup w="95%" borderRadius="full">
              <Input
                borderRadius="full"
                type="tel"
                placeholder="First Name"
                bgColor="gray.200"
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Last Name"
                bgColor="gray.200"
                marginLeft="4px"
              />
            </InputGroup>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillPersonFill color="#C6C6E8" fontSize="1.6rem" />
                }
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Username"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="Register__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <InputGroup
              className="Register__input"
              w="95%"
              borderRadius="full"
              bgColor="gray.200"
            >
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
                }
              />
              <Input
                type="password"
                borderRadius="full"
                placeholder=" Confirm Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/login" >Have Account?</a>
              </Link>
            <HStack className="Register__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="RegisterBtn"
              >
                Register
              </Button>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
  );
}

MeetupLayout = ({ children, title }) => {
  const data = useStaticQuery(graphql`
    {
      sponsors: allFile(
        filter: {
          sourceInstanceName: { eq: "sponsors" }
          childMdx: { frontmatter: { isMeetupSponsor: { eq: true } } }
        }
        sort: { order: ASC, fields: childMdx___frontmatter___name }
      ) {
        nodes {
          childMdx {
            frontmatter {
              name
              link
              logo {
                publicURL
              }
            }
          }
        }
      }
      associations: allFile(
        filter: {
          sourceInstanceName: { eq: "associations" }
          internal: {}
          extension: { eq: "mdx" }
        }
        sort: { fields: childMdx___frontmatter___name }
      ) {
        nodes {
          childMdx {
            frontmatter {
              name
              link
              logo {
                publicURL
              }
            }
          }
        }
      }
    }
  `);

  return (
    <Layout theme="meetups">
      <Seo title={title} />
      <Grid templateColumns={{ base: "1fr", md: "2.5fr 1fr" }} gap={8}>
        <Box>{children}</Box>
        <Stack spacing={10}>
          <Stack spacing={6}>
            <Heading as="h2" size="lg" fontWeight="normal" mb={8}>
              Sponsors meetups
            </Heading>
            <Grid templateColumns="1fr 1fr" gap={4}>
              {data.sponsors.nodes.map(({ childMdx: sponsor }) => (
                <Card
                  isLink
                  as="a"
                  href={sponsor.frontmatter.link}
                  title={sponsor.frontmatter.name}
                  key={sponsor.frontmatter.name}
                  p={0}
                >
                  <Image
                    src={sponsor.frontmatter.logo.publicURL}
                    alt={sponsor.frontmatter.name}
                  />
                </Card>
              ))}
            </Grid>
          </Stack>
          <Stack spacing={6}>
            <Heading as="h2" size="lg" fontWeight="normal" mb={8}>
              Associations
            </Heading>
            <Grid templateColumns="1fr 1fr" gap={4}>
              {data.associations.nodes.map(({ childMdx: association }) => (
                <Card
                  isLink
                  as="a"
                  href={association.frontmatter.link}
                  title={association.frontmatter.name}
                  key={association.frontmatter.name}
                  p={0}
                >
                  <Flex align="center" justify="center">
                    <Image
                      src={association.frontmatter.logo.publicURL}
                      alt={association.frontmatter.name}
                    />
                  </Flex>
                </Card>
              ))}
            </Grid>
          </Stack>
        </Stack>
      </Grid>
    </Layout>
  );
}

function ClaimsList({ claims }) {
	let history = useHistory();

	return (
		<VStack alignItems='flex-start' width='100%' spacing={4}>
			{claims.map((claim) => {
				return (
					<VStack
						key={claim[0].toNumber()}
						alignItems='flex-start'
						borderStyle='solid'
						borderWidth='1px'
						borderRadius='10px'
						borderColor='whatsapp.500'
						px={6}
						py={4}
						width='100%'>
						<HStack
							justifyItems='flex-start'
							alignItems='flex-start'
							width='100%'>
							<Box>
								<HStack>
									<Box
										borderStyle='solid'
										borderWidth='2px'
										borderRadius='full'
										borderColor='whatsapp.500'
										padding='2px'>
										<Avatar
											size='sm'
											icon={
												<Jazzicon
													diameter='32'
													address={claim[1]}
												/>
											}
										/>
									</Box>
									<Text>{claim[1]}</Text>
									<Tag
										colorScheme='whatsapp'
										fontWeight='600'>
										? : {claim[4].toNumber()}
									</Tag>
									<Tag
										colorScheme='whatsapp'
										fontWeight='600'>
										? : {claim[5].toNumber()}
									</Tag>
								</HStack>
							</Box>
							<Spacer />
						</HStack>
						<Link
							cursor='pointer'
							to={`/voting/${claim[0].toNumber()}`}>
							<Heading fontSize='20px' textColor='whatsapp.500'>
								{claim[2]}
							</Heading>
						</Link>
						<Text>{claim.claimSummary}</Text>
						<Text fontWeight='600'>{claim.startTime}</Text>
					</VStack>
				);
			})}
		</VStack>
	);
}

export default function Hero() {
    return (
        <Box bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")}>
            <Flex
                w="100%"
                flexDir={["column", "column", "row"]}
                align="center"
                px={4}
                mt={[8, 8, 16]}
                mb={8}
                maxW="1200px"
                mx="auto"
            >
                <Flex flexDir="column" w={["100%", "100%", "50%"]} mr={[0, 0, 4]}>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: .4 }}
                    >
                        <Heading
                            letterSpacing="tight"
                            mb={4}
                            as="h1"
                            size="xl"
                            fontWeight={700}
                        >
                            Hello! I'm Benjamin Carlson -
                        </Heading>
                    </motion.div>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: .8 }}
                    >
                        <Text
                            fontSize="xl"
                            color={useColorModeValue("gray.600", "gray.500")}
                            mb={6}
                        >
                            A <strong>software engineer ?‍?</strong>, <strong>creator ?</strong>, and <strong>student ?‍?</strong> living and working in CT. You've stumbled onto my online portfolio, resume, blog, and all things in between.
                        </Text>
                    </motion.div>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: 1.2 }}
                    >
                        <Flex flexDir={["column", "row", "row"]}>
                            <Link href="https://youtube.com/benjamincarlson" _hover={{ textDecor: 'none' }} w={["100%", "100%", null]} mr={[0, 2, 2]} mb={[2, 0, 0]} isExternal>
                                <Button
                                    w={["100%", "100%", null]}
                                    colorScheme="red"
                                    size="md"
                                    rightIcon={<YoutubeIcon fontSize="xl" />}
                                    boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
                                    _hover={{ transform: "translateY(-2px)", opacity: .85, bgColor: useColorModeValue("red.400", "red.500") }}
                                >
                                    Visit my YouTube
                                </Button>
                            </Link>
                            <Link href="https://github.com/sponsors/bjcarlson42" _hover={{ textDecor: 'none' }} w={["100%", "100%", null]} isExternal>
                                <Button
                                    w={["100%", "100%", null]}
                                    colorScheme="gray"
                                    variant="outline"
                                    size="md"
                                    rightIcon={<GitHubIcon fontSize="xl" />}
                                    boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
                                    _hover={{ transform: "translateY(-2px)", bgColor: useColorModeValue("gray.100", "gray.800") }}
                                >
                                    Sponsor me on GitHub
                                </Button>
                            </Link>
                        </Flex>
                    </motion.div>
                </Flex>
                <Box mt={[10, 10, 0]} w={["100%", "100%", "50%"]}>
                    <motion.div
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: .7, delay: 1.6 }}
                    >
                        <AspectRatio ratio={16 / 9}>
                            <iframe src="https://www.youtube.com/embed/uNKBWrkMO_Q" alt="Featured YouTube video" allowFullScreen={true} style={{ borderRadius: 10 }} />
                        </AspectRatio>
                    </motion.div>
                </Box>
            </Flex>
        </Box>
    )
}

export default function Certificate({id, certificate}) {
  const {
    isOpen: isMenuOpen,
    onOpen: onMenuOpen,
    onClose: onMenuClose,
  } = useDisclosure()

  const {t} = useTranslation()

  const menuRef = useRef()

  useClickOutside(menuRef, () => {
    onMenuClose()
  })

  const {data: identity, isLoading: identityIsLoading, isFetched} = useQuery(
    ['fetch-identity', certificate.coinbase],
    () => fetchIdentity(certificate.coinbase, true),
    {
      retry: false,
      refetchOnWindowFocus: false,
    }
  )

  const identityState = identity?.state || IdentityStatus.Undefined

  return (
    <Flex
      background="rgba(17, 17, 17, 0.8)"
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
      flex={1}
      height="100vh"
    >
      <Flex
        borderRadius="md"
        backgroundColor="white"
        justifyContent="center"
        px={10}
        py={8}
        direction="column"
        overflow="hidden"
        position="relative"
      >
        <CertificateTypeLabel type={certificate.type} />
        <Flex direction="column" alignItems="center" px={5}>
          <Image ignoreFallback src="/static/idena-logo-round.svg" h={16} />
          <Heading fontSize="lg" fontWeight="500" mt="45px">
            {t('Certificate')}
          </Heading>
          <Text color="muted" fontSize="md" mt={2}>
            {t('Training validation is passed successfully')}
          </Text>
          <Stack
            mt={7}
            spacing={3 / 2}
            bg="gray.50"
            px={6}
            py={4}
            rounded="lg"
            fontSize="sm"
            w={280}
          >
            <Flex justifyContent="space-between">
              <Box> {t('Short session score')}</Box>
              <Box>{toPercent(certificate.shortScore / 6)}</Box>
            </Flex>
            <Flex justifyContent="space-between">
              <Box> {t('Long session score')}</Box>
              <Box>{toPercent(certificate.longScore / 18)}</Box>
            </Flex>
            <Flex justifyContent="space-between">
              <Box> {t('Reporting score')}</Box>
              <Box>{toPercent(certificate.reportScore / 6)}</Box>
            </Flex>
          </Stack>

          <Stack isInline spacing={3} align="center" w={280} mt={8}>
            <Avatar size={8} address={certificate.coinbase} />

            <Stack spacing={0} overflow="hidden" w="100%">
              {identityIsLoading ? (
                <Skeleton h={4} w={20}></Skeleton>
              ) : (
                <Heading fontSize="md" fontWeight={500} lineHeight={4}>
                  {mapIdentityToFriendlyStatus(identityState)}
                </Heading>
              )}
              <Heading
                fontSize="sm"
                textOverflow="ellipsis"
                overflow="hidden"
                whiteSpace="nowrap"
                fontWeight={500}
                color="muted"
                lineHeight="shorter"
              >
                {certificate.coinbase}
              </Heading>
            </Stack>
            {isFetched && identityState === IdentityStatus.Undefined && (
              <Flex position="relative">
                <Icon
                  as={MdMoreVert}
                  cursor="pointer"
                  boxSize={5}
                  onClick={onMenuOpen}
                />
                <Flex
                  position="absolute"
                  borderRadius="lg"
                  py={2}
                  boxShadow="0 4px 6px 0 rgba(83, 86, 92, 0.24), 0 0 2px 0 rgba(83, 86, 92, 0.2)"
                  right={0}
                  top={6}
                  zIndex={100}
                  bg="white"
                  display={isMenuOpen ? 'flex' : 'none'}
                  ref={menuRef}
                >
                  <IconButton
                    w="100%"
                    color="brandGray.080"
                    icon={<AddUserIcon color="blue.500" boxSize={5} />}
                    _hover={{bg: 'gray.50'}}
                    _active={{bg: 'gray.50'}}
                    onClick={() => {
                      onMenuClose()
                      openExternalUrl(
                        `https://app.idena.io/dna/invite?address=${certificate.coinbase}`
                      )
                    }}
                  >
                    {t('Send invite')}
                  </IconButton>
                </Flex>
              </Flex>
            )}
          </Stack>

          <Divider mt={7}></Divider>
        </Flex>
        <Flex
          mt={16}
          justifyContent="space-between"
          w="100%"
          alignItems="center"
        >
          <Box fontSize="md" color="muted" lineHeight={4}>
            {new Date(certificate.timestamp).toLocaleDateString()}
          </Box>
          <Flex>
            <Link
              target="_blank"
              href={`https://telegram.me/share/url?url=${encodeURIComponent(
                `https://app.idena.io/certificate/${id}`
              )}&text=${encodeURIComponent(
                `I am looking for an invitation code to join Idena. Please find my ${CertificateTypeTitle(
                  certificate.type
                ).toUpperCase()} training validation certificate in the link attached.`
              )}`}
              _hover={{color: 'blue.500'}}
            >
              <TelegramIcon boxSize={5} />
            </Link>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  )
}