@chakra-ui/react#useTheme JavaScript Examples

export function AnnotatedUserStatistics({
  annotation,
  label,
  value,
  children,
  ...props
}) {
  const {colors} = useTheme()
  return (
    <Flex
      fontSize={['mdx', 'md']}
      direction={['row', 'column']}
      justify={['space-between', 'flex-start']}
      {...props}
    >
      <Box
        w="fit-content"
        borderBottom={['none', `dotted 1px ${colors.muted}`]}
        cursor="help"
        fontWeight={[400, 500]}
        color={['auto', colors.muted]}
      >
        <UserStatLabelTooltip label={[annotation]}>
          {label}
        </UserStatLabelTooltip>
      </Box>
      {value && <Box fontWeight="500">{value}</Box>}
      {children}
    </Flex>
  )
}

export function OnboardingLinkButton({
  href,
  onClick = () => openExternalUrl(href),
  ...props
}) {
  const {colors} = useTheme()
  return (
    <Button
      variant="link"
      color="white"
      fontSize="sm"
      fontWeight="normal"
      verticalAlign="baseline"
      textDecoration={`underline ${colors.xwhite['040']}`}
      minW={0}
      _hover={null}
      _active={null}
      _focus={null}
      onClick={onClick}
      {...props}
    />
  )
}

function ReviewValidationDialogLinkButton(props) {
  const {colors} = useTheme()
  return (
    <Button
      variant="link"
      fontSize={['mobile', 'md']}
      color="muted"
      fontWeight="normal"
      verticalAlign="baseline"
      borderColor="red.500"
      textDecoration={`underline ${colors.muted}`}
      _hover={{
        color: 'brandGray.500',
      }}
      _focus={null}
      {...props}
    />
  )
}

export function VotingSkeleton(props) {
  const {colors} = useTheme()
  return (
    <FullSkeleton
      startColor={colors.gray[50]}
      endColor={colors.gray[100]}
      {...props}
    />
  )
}

export function UserStatistics({label, value, children, ...props}) {
  const {colors} = useTheme()
  return (
    <Flex
      fontSize={['mdx', 'md']}
      direction={['row', 'column']}
      justify={['space-between', 'flex-start']}
      {...props}
    >
      <Box fontWeight={['400', '500']} color={['auto', colors.muted]}>
        {label}
      </Box>
      <Flex direction={['row', 'column']}>
        <Box fontWeight="500">{value}</Box>
        {children}
      </Flex>
    </Flex>
  )
}

Card = forwardRef(({ isLink, variant, ...props }, ref) => {
  const theme = useTheme();

  const primary = {
    background: theme.gradients.brand,
    color: "white",
  };

  return (
    <Box
      ref={ref}
      position="relative"
      d="flex"
      flexDirection="column"
      p={6}
      borderRadius="md"
      boxShadow="brand"
      border="1px solid transparent"
      overflow="hidden"
      _hover={
        isLink
          ? {
              borderColor: "brand.600",
              cursor: "pointer",
            }
          : {}
      }
      _focus={
        isLink
          ? {
              borderColor: "brand.600",
            }
          : {}
      }
      {...(variant === "primary" ? primary : {})}
      {...props}
    />
  );
})

export function AnnotatedUserStat({
  annotation,
  label,
  value,
  children,
  ...props
}) {
  const {colors} = useTheme()
  return (
    <UserStat {...props}>
      <UserStatLabel borderBottom={`dotted 1px ${colors.muted}`} cursor="help">
        <UserStatLabelTooltip label={annotation}>{label}</UserStatLabelTooltip>
      </UserStatLabel>
      {value && <UserStatValue>{value}</UserStatValue>}
      {children}
    </UserStat>
  )
}

function SelectableItem({isActive, isFirst, isLast, ...props}) {
  const {colors} = useTheme()
  return (
    <Box
      position="relative"
      _before={{
        content: `""`,
        roundedTop: isFirst ? 'md' : 0,
        roundedBottom: isLast ? 'md' : 0,
        boxShadow: isActive
          ? `0 0 0 4px ${colors.brandBlue['025']}, inset 0 0 0 2px ${colors.brandBlue['500']}`
          : 'none',
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: isActive ? 'docked' : 'base',
      }}
      {...props}
    />
  )
}

StackInline = ({
  children,
  spacing = "2",
  childProps = {},
  ...rest
}) => {
  const theme = useTheme();
  const spacingCss = theme.space[spacing] ?? spacing;

  const _children = React.Children.map(children, (element) => {
    return React.cloneElement(element, {
      marginLeft: spacing,
      marginBottom: spacing,
      ...childProps,
    });
  });

  return (
    <Flex
      flexWrap="wrap"
      marginLeft={`calc(${spacingCss} * -1)`}
      marginBottom={`calc(${spacingCss} * -1)`}
      {...rest}
    >
      {_children}
    </Flex>
  );
}

Logo = (props) => {
  const theme = useTheme();

  return (
    <Image
      src={theme.logos.white}
      ignoreFallback
      alt={theme.logos.alt}
      {...props}
    />
  );
}

export function ActivateMiningSwitch({isOnline, isDelegator, onShow}) {
  const {t} = useTranslation()

  const {colors} = useTheme()

  const accentColor = isOnline ? 'blue' : 'red'

  return (
    <Stack spacing={[0, 3]}>
      <Text display={['none', 'initial']} fontWeight={500} h={18}>
        {t('Status')}
      </Text>
      <Flex
        align="center"
        justify="space-between"
        borderColor="gray.100"
        borderWidth={[0, 1]}
        background={[
          isOnline ? 'rgba(87, 143, 255, 0.1)' : 'rgba(255, 102, 102, 0.1)',
          'initial',
        ]}
        rounded={['8px', 'md']}
        h={[12, 8]}
        px={[5, 3]}
      >
        <FormLabel
          htmlFor="mining"
          fontWeight="normal"
          fontSize={['mdx', 'md']}
          m={0}
        >
          {isDelegator ? t('Delegation') : t('Mining')}
        </FormLabel>
        <Stack isInline align="center">
          <Text color={`${accentColor}.500`} fontWeight={500}>
            {isOnline ? t('On') : t('Off')}
          </Text>
          <Switch
            id="mining"
            size="sm"
            isChecked={isOnline}
            colorScheme={accentColor}
            h={4}
            className="toggle"
            onChange={onShow}
          />
          <style jsx global>{`
            .toggle > input[type='checkbox']:not(:checked) + span {
              background: ${colors.red[500]};
            }
          `}</style>
        </Stack>
      </Flex>
    </Stack>
  )
}

NavTopbar = ({ onNavOpen = () => {}, ...props }) => {
  const theme = useTheme();

  const data = useStaticQuery(graphql`
    query NavTopbarQuery {
      site {
        siteMetadata {
          currentYear
        }
      }
    }
  `);

  return (
    <Flex
      as="nav"
      display={{ base: "flex", md: "none" }}
      background={theme.gradients.brand}
      justifyContent="space-between"
      color="white"
      position="fixed"
      top="0"
      left="0"
      right="0"
      zIndex="2"
      align="center"
      {...props}
    >
      <Link to={`/${data.site.siteMetadata.currentYear}`}>
        <Logo w="4.5" h="2.5rem" pl="2" />
      </Link>
      <Box textAlign="center">
        <Text fontFamily="heading" fontSize="0.6rem">
          {theme.data.pretitle}
        </Text>
        <Heading as="h4" size="xs" fontSize="0.7rem">
          {theme.data.title}
        </Heading>
      </Box>
      <IconButton
        variant="unstyled"
        aria-label="Menu"
        d="inline-flex"
        icon={<FiMenu />}
        size="lg"
        onClick={() => onNavOpen()}
      />
    </Flex>
  );
}

function Flip({
  isLoading,
  images,
  orders,
  answer,
  variant,
  isCorrect,
  isSmall,
}) {
  const theme = useTheme()
  const isSelected = answer === variant
  const borderRadius = useBreakpointValue(['lgx', 'lg'])

  if (isLoading) return <LoadingFlip isSmall={isSmall} />

  return (
    <FlipHolder
      isSmall={isSmall}
      borderColor={
        isSelected ? (isCorrect ? 'blue.500' : 'red.500') : 'blue.025'
      }
      boxShadow={
        isSelected
          ? `0 0 2px 3px ${
              isCorrect ? theme.colors.blue['025'] : theme.colors.red['025']
            }`
          : 'none'
      }
      opacity={isSelected ? 1 : 0.3}
    >
      {reorderList(images, orders[variant - 1]).map((src, idx) => (
        <Box
          key={idx}
          height="100%"
          position="relative"
          overflow="hidden"
          roundedTop={idx === 0 ? borderRadius : 0}
          roundedBottom={idx === images.length - 1 ? borderRadius : 0}
        >
          <Box
            background={`center center / cover no-repeat url(${src})`}
            filter="blur(6px)"
            zIndex={1}
            position="absolute"
            top={0}
            left={0}
            right={0}
            bottom={0}
          />
          <Image
            ignoreFallback
            src={src}
            alt="current-flip"
            height="100%"
            width="100%"
            objectFit="fit"
            objectPosition="center"
            textAlign="center"
            position="relative"
            zIndex={2}
          />
        </Box>
      ))}
    </FlipHolder>
  )
}

export function ValidationReportGaugeBar({value, bg, color}) {
  const {colors} = useTheme()
  const isMobile = useBreakpointValue([true, false])

  const radius = 84
  const innerRadius = 80
  const circumference = innerRadius * 2 * Math.PI
  const angle = 205

  const arc = circumference * (angle / 360)
  const dashArray = `${arc} ${circumference}`
  const transform = `rotate(${180 -
    Math.max(angle - 180, 0) / 2}, ${radius}, ${radius})`

  const percentNormalized = Math.min(Math.max(value, 0), 100)
  const offset = arc - (percentNormalized / 100) * arc

  return isMobile ? (
    <Box
      h={2}
      w="100%"
      borderRadius="md"
      bg={bg || colors.gray[50]}
      position="relative"
    >
      <Box
        position="absolute"
        h="100%"
        bg={color}
        w={`${percentNormalized}%`}
        borderRadius="md"
      ></Box>
    </Box>
  ) : (
    <svg
      viewBox={`0 0 ${radius * 2} ${radius * 2}`}
      width={radius * 2}
      height={radius * 2}
    >
      <circle
        cx={radius}
        cy={radius}
        fill="transparent"
        r={innerRadius}
        stroke={bg || colors.gray[50]}
        strokeWidth={4}
        strokeDasharray={dashArray}
        strokeLinecap="round"
        transform={transform}
      />
      <circle
        cx={radius}
        cy={radius}
        fill="transparent"
        r={innerRadius}
        stroke={color}
        strokeWidth={4}
        strokeDasharray={dashArray}
        strokeDashoffset={offset}
        strokeLinecap="round"
        transform={transform}
      />
    </svg>
  )
}

export function FlipCard({flipService, onDelete}) {
  const {t} = useTranslation()

  const [current, send] = useService(flipService)
  const {id, keywords, originalOrder, images, type, createdAt} = current.context

  const {colors} = useTheme()

  const isActionable = [
    FlipType.Published,
    FlipType.Draft,
    FlipType.Archived,
    FlipType.Invalid,
  ].includes(type)
  const isSubmittable = [FlipType.Draft, FlipType.Invalid].includes(type)
  const isViewable = [FlipType.Published, FlipType.Archived].includes(type)
  const isEditable = [FlipType.Draft, FlipType.Invalid].includes(type)
  const isDeletable = [FlipType.Published, FlipType.Draft].includes(type)

  return (
    <WrapItem w={150}>
      <Box position="relative">
        <FlipCardImageBox>
          {[FlipType.Publishing, FlipType.Deleting, FlipType.Invalid].some(
            x => x === type
          ) && (
            <FlipOverlay
              backgroundImage={
                // eslint-disable-next-line no-nested-ternary
                [FlipType.Publishing, FlipType.Deleting].some(x => x === type)
                  ? `linear-gradient(to top, ${
                      colors.warning[500]
                    }, ${transparentize(100, colors.warning[500])})`
                  : type === FlipType.Invalid
                  ? `linear-gradient(to top, ${
                      colors.red[500]
                    }, ${transparentize(100, colors.red[500])})`
                  : ''
              }
            >
              <FlipOverlayStatus>
                <InfoSolidIcon boxSize={5} />
                <FlipOverlayText>
                  {type === FlipType.Publishing && t('Mining...')}
                  {type === FlipType.Deleting && t('Deleting...')}
                  {type === FlipType.Invalid && t('Mining error')}
                </FlipOverlayText>
              </FlipOverlayStatus>
            </FlipOverlay>
          )}
          <FlipCardImage src={images[originalOrder ? originalOrder[0] : 0]} />
        </FlipCardImageBox>
        <Flex justifyContent="space-between" alignItems="flex-start" mt={4}>
          <Box>
            <FlipCardTitle>
              {keywords.words && keywords.words.length
                ? formatKeywords(keywords.words)
                : t('Missing keywords')}
            </FlipCardTitle>
            <FlipCardSubtitle>
              {new Date(createdAt).toLocaleString()}
            </FlipCardSubtitle>
          </Box>
          {isActionable && (
            <FlipCardMenu>
              {isSubmittable && (
                <FlipCardMenuItem onClick={() => send('PUBLISH', {id})}>
                  <UploadIcon boxSize={5} mr={2} color="blue.500" />
                  {t('Submit flip')}
                </FlipCardMenuItem>
              )}
              {isViewable && (
                <FlipCardMenuItem>
                  <NextLink href={`/flips/view?id=${id}`}>
                    <Flex>
                      <ViewIcon boxSize={5} mr={2} color="blue.500" />
                      {t('View flip')}
                    </Flex>
                  </NextLink>
                </FlipCardMenuItem>
              )}
              {isEditable && (
                <FlipCardMenuItem>
                  <NextLink href={`/flips/edit?id=${id}`}>
                    <Flex>
                      <EditIcon boxSize={5} mr={2} color="blue.500" />
                      {t('Edit flip')}
                    </Flex>
                  </NextLink>
                </FlipCardMenuItem>
              )}
              {(isSubmittable || isEditable) && isDeletable && (
                <MenuDivider color="gray.100" my={2} width={rem(145)} />
              )}

              {isDeletable && (
                <FlipCardMenuItem onClick={onDelete}>
                  <DeleteIcon boxSize={5} mr={2} color="red.500" />
                  {t('Delete flip')}
                </FlipCardMenuItem>
              )}
            </FlipCardMenu>
          )}
        </Flex>
      </Box>
    </WrapItem>
  )
}

export default function ValidationReport() {
  const {t, i18n} = useTranslation()

  const {colors} = useTheme()

  const epoch = useEpoch()
  const [identity] = useIdentity()

  const isMobile = useMobile()

  const {address, state, isValidated} = identity

  const {
    prevState,
    lastValidationScore,
    totalScore,
    earnings,
    earningsScore,
    validationReward,
    missedValidationReward,
    invitationReward,
    missedInvitationReward,
    flipReward,
    missedFlipReward,
    flipReportReward,
    missedFlipReportReward,
    totalMissedReward,
    validationResult,
    stakingReward,
    missedStakingReward,
    candidateReward,
    missedCandidateReward,
    isLoading,
  } = useValidationReportSummary()

  const {
    short: {score: shortScore, ...shortResults},
    long: {score: longScore, ...longResults},
  } = lastValidationScore

  const toDna = toLocaleDna(i18n.language, {maximumFractionDigits: 3})

  const maybeDna = amount =>
    !amount || Number.isNaN(amount)
      ? '–'
      : amount.toLocaleString(i18n.language, {maximumFractionDigits: 3})

  const epochNumber = epoch?.epoch

  return (
    <Layout>
      <Page as={Stack} spacing={6}>
        <Flex
          justify="space-between"
          align="center"
          w="full"
          alignItems="center"
        >
          <AngleArrowBackIcon
            stroke="#578FFF"
            position="absolute"
            left={4}
            top={4}
            h="28px"
            w="28px"
            onClick={() => router.back()}
            display={['initial', 'none']}
          />
          <PageTitleNew mb={0} mt={[-2, 0]}>
            {t('Epoch #{{epochNumber}} validation report', {epochNumber})}
          </PageTitleNew>
          <CloseButton
            display={['none', 'initial']}
            onClick={() => router.push('/home')}
          />
        </Flex>
        <Stack spacing={6} w="full">
          <Box>
            <Skeleton isLoaded={!isLoading} alignSelf="start">
              {isValidated ? (
                <SuccessAlert>
                  {validationResult === ValidationResult.Success &&
                    t('Successfully validated')}
                  {validationResult === ValidationResult.Penalty &&
                    t('Validated')}
                </SuccessAlert>
              ) : (
                <ErrorAlert>{t('Validation failed')}</ErrorAlert>
              )}
            </Skeleton>
          </Box>
          <Box py={2} display={['none', 'block']}>
            <UserCard identity={{address, state}} />
          </Box>
          <Stack isInline={!isMobile} spacing={[4, 10]}>
            <ValidationReportBlockOverview>
              <Stack spacing={[6, 10]}>
                <Box>
                  <ValidationReportGauge>
                    <ValidationReportGaugeBox>
                      {isLoading ? (
                        <ValidationReportGaugeBar color={colors.gray['100']} />
                      ) : isValidated ? (
                        <ValidationReportGaugeBar
                          value={totalScore * 100}
                          color={
                            totalScore <= 0.75
                              ? colors.red['500']
                              : totalScore <= 0.9
                              ? colors.orange['500']
                              : colors.green['500']
                          }
                          bg="white"
                        />
                      ) : (
                        <ValidationReportGaugeBar
                          value={shortScore * 100 || 2}
                          color={colors.red['500']}
                          bg="white"
                        />
                      )}
                      <ValidationReportGaugeIcon
                        icon={<TimerIcon />}
                        display={['none', 'initial']}
                      />
                    </ValidationReportGaugeBox>
                    <ValidationReportGaugeStat>
                      <Skeleton isLoaded={!isLoading} w="auto">
                        {isValidated ? (
                          <ValidationReportGaugeStatValue>
                            {toPercent(totalScore)}
                          </ValidationReportGaugeStatValue>
                        ) : (
                          <ValidationReportGaugeStatValue color="red.500">
                            {t('Failed')}
                          </ValidationReportGaugeStatValue>
                        )}
                      </Skeleton>
                      <Skeleton isLoaded={!isLoading} w="auto">
                        <ValidationReportGaugeStatLabel>
                          {isValidated && t('Total score')}
                          {validationResult ===
                            ValidationResult.LateSubmission &&
                            t('Late submission')}
                          {validationResult ===
                            ValidationResult.MissedValidation &&
                            t('Missed validation')}
                          {validationResult === ValidationResult.WrongAnswers &&
                            t('Wrong answers')}
                        </ValidationReportGaugeStatLabel>
                      </Skeleton>
                    </ValidationReportGaugeStat>
                  </ValidationReportGauge>
                </Box>
                <Stack spacing={[2, 4]} isInline={!isMobile}>
                  <Flex justify="space-between">
                    <Skeleton isLoaded={!isLoading}>
                      <ValidationReportStat
                        label={t('Short session')}
                        value={
                          [
                            ValidationResult.MissedValidation,
                            ValidationResult.LateSubmission,
                          ].includes(validationResult)
                            ? '—'
                            : t('{{score}} ({{point}} out of {{flipsCount}})', {
                                score: toPercent(shortScore),
                                point: shortResults.point,
                                flipsCount: shortResults.flipsCount,
                              })
                        }
                      />
                    </Skeleton>
                  </Flex>
                  <Divider
                    orientation="horizontal"
                    display={['initial', 'none']}
                  />
                  <Flex justify="space-between">
                    <Skeleton isLoaded={!isLoading}>
                      <ValidationReportStat
                        label={t('Long session')}
                        value={
                          validationResult === ValidationResult.MissedValidation
                            ? '—'
                            : t('{{score}} ({{point}} out of {{flipsCount}})', {
                                score: toPercent(longScore),
                                point: longResults.point,
                                flipsCount: longResults.flipsCount,
                              })
                        }
                      />
                    </Skeleton>
                  </Flex>
                </Stack>
              </Stack>
            </ValidationReportBlockOverview>
            <ValidationReportBlockOverview>
              <Stack spacing={[6, 10]}>
                <Box>
                  <ValidationReportGauge>
                    <ValidationReportGaugeBox>
                      {isLoading ? (
                        <ValidationReportGaugeBar color={colors.gray['100']} />
                      ) : isValidated ? (
                        <ValidationReportGaugeBar
                          value={earningsScore * 100 || 2}
                          color={
                            // eslint-disable-next-line no-nested-ternary
                            earningsScore <= 0.5
                              ? colors.red['500']
                              : earningsScore <= 0.75
                              ? colors.orange['500']
                              : colors.green['500']
                          }
                          bg="white"
                        />
                      ) : (
                        <ValidationReportGaugeBar
                          value={2}
                          color={colors.red['500']}
                          bg="white"
                        />
                      )}
                      <ValidationReportGaugeIcon
                        icon={<SendOutIcon />}
                        display={['none', 'initial']}
                      />
                    </ValidationReportGaugeBox>
                    <ValidationReportGaugeStat>
                      <Skeleton isLoaded={!isLoading} w="auto">
                        {validationResult === ValidationResult.Success ? (
                          <ValidationReportGaugeStatValue>
                            {toDna(earnings)}
                          </ValidationReportGaugeStatValue>
                        ) : (
                          <ValidationReportGaugeStatValue color="red.500">
                            {toDna(totalMissedReward)}
                          </ValidationReportGaugeStatValue>
                        )}
                      </Skeleton>
                      <ValidationReportGaugeStatLabel>
                        {t('Earnings')}
                      </ValidationReportGaugeStatLabel>
                    </ValidationReportGaugeStat>
                  </ValidationReportGauge>
                </Box>

                <Flex justify="space-between" flexWrap="wrap">
                  <Flex mr={4} mb={[0, 4]}>
                    <Skeleton isLoaded={!isLoading}>
                      <ValidationReportStat
                        label={t('Missed invitation earnings')}
                        value={toDna(missedInvitationReward)}
                      />
                    </Skeleton>
                  </Flex>
                  <Divider
                    orientation="horizontal"
                    display={['initial', 'none']}
                    my={2}
                  />
                  <Flex mr={4} mb={[0, 4]}>
                    <Skeleton isLoaded={!isLoading}>
                      <ValidationReportStat
                        label={t('Missed reporting earnings')}
                        value={toDna(missedFlipReportReward)}
                      />
                    </Skeleton>
                  </Flex>
                  <Divider
                    orientation="horizontal"
                    display={['initial', 'none']}
                    my={2}
                  />
                  <Flex mr={4} mb={[0, 4]}>
                    <Skeleton isLoaded={!isLoading}>
                      <ValidationReportStat
                        label={t('Missed flip earnings')}
                        value={toDna(missedFlipReward)}
                      />
                    </Skeleton>
                  </Flex>
                </Flex>
              </Stack>
            </ValidationReportBlockOverview>
          </Stack>
          <Stack spacing={[0, 5]}>
            <Box mb={2}>
              <Heading color="brandGray.500" fontSize="lg" fontWeight={500}>
                {t('Earnings summary')}
              </Heading>
              <ExternalLink
                href={`https://scan.idena.io/identity/${address}/epoch/${
                  epoch?.epoch
                }/${isValidated ? 'rewards' : 'validation'}`}
              >
                {t('See the full report in blockchain explorer')}
              </ExternalLink>
            </Box>
            <Table fontWeight={500}>
              <Thead display={['none', 'table-header-group']}>
                <Tr>
                  <ValidationReportTh>
                    {t('Category')}
                    <ValidationReportThCorner borderLeftRadius="md" />
                  </ValidationReportTh>
                  <ValidationReportTh>
                    {t('Earned, iDNA')}
                    <ValidationReportThCorner />
                  </ValidationReportTh>
                  <ValidationReportTh>
                    {t('Missed, iDNA')}
                    <ValidationReportThCorner />
                  </ValidationReportTh>
                  <ValidationReportTh style={{width: '260px'}}>
                    {t('How to get maximum reward')}
                    <ValidationReportThCorner borderRightRadius="md" />
                  </ValidationReportTh>
                </Tr>
              </Thead>
              <Tbody>
                {stakingReward === 0 && candidateReward === 0 ? (
                  <>
                    <Tr>
                      <ValidationReportColumn>
                        <ValidationReportCategoryLabel
                          isFirst
                          label={t('Validation')}
                          description={
                            isMobile
                              ? t('Category')
                              : t('Rewards for the successfull validation')
                          }
                          info={t('Rewards for the successfull validation')}
                        />
                      </ValidationReportColumn>
                      <ValidationReportColumn>
                        <ValidationReportCategoryLabel
                          label={maybeDna(validationReward)}
                          description={isMobile ? t('Earned') : ''}
                        />
                      </ValidationReportColumn>
                      <ValidationReportColumn>
                        <ValidationReportCategoryLabel
                          label={
                            <Text
                              color={
                                missedValidationReward > 0 ? 'red.500' : ''
                              }
                            >
                              {maybeDna(missedValidationReward)}
                            </Text>
                          }
                          description={isMobile ? t('Missed') : ''}
                        />
                      </ValidationReportColumn>
                      <ValidationReportColumn display={['none', 'table-cell']}>
                        <TableValidationDesc
                          t={t}
                          validationResult={validationResult}
                          missedValidationReward={missedValidationReward}
                        />
                      </ValidationReportColumn>
                    </Tr>
                    <TableHiddenDescRow>
                      <TableValidationDesc
                        t={t}
                        validationResult={validationResult}
                        missedValidationReward={missedValidationReward}
                      />
                    </TableHiddenDescRow>
                  </>
                ) : (
                  <>
                    <Tr>
                      <ValidationReportColumn>
                        <ValidationReportCategoryLabel
                          isFirst
                          label={t('Staking')}
                          description={t('Quadratic staking rewards')}
                          info={t('Quadratic staking rewards')}
                        />
                      </ValidationReportColumn>
                      <ValidationReportColumn>
                        <ValidationReportCategoryLabel
                          label={maybeDna(stakingReward)}
                          description={isMobile ? t('Earned') : ''}
                        />
                      </ValidationReportColumn>
                      <ValidationReportColumn>
                        <ValidationReportCategoryLabel
                          label={
                            <Text
                              color={missedStakingReward > 0 ? 'red.500' : ''}
                            >
                              {maybeDna(missedStakingReward)}
                            </Text>
                          }
                          description={isMobile ? t('Missed') : ''}
                        />
                      </ValidationReportColumn>
                      <ValidationReportColumn display={['none', 'table-cell']}>
                        <TextLink href="/home?replenishStake">
                          {t('Add stake')}
                          <ChevronRightIcon />
                        </TextLink>
                      </ValidationReportColumn>
                    </Tr>
                    <TableHiddenDescRow>
                      <TextLink href="/home">
                        {t('Add stake')}
                        <ChevronRightIcon />
                      </TextLink>
                    </TableHiddenDescRow>
                    {state === IdentityStatus.Newbie &&
                      prevState === IdentityStatus.Candidate && (
                        <>
                          <Tr>
                            <ValidationReportColumn>
                              <ValidationReportCategoryLabel
                                isFirst
                                label={t('Validation')}
                                description={
                                  isMobile
                                    ? t('Category')
                                    : t(
                                        'Rewards for the 1st successful validation'
                                      )
                                }
                                info={t(
                                  'Rewards for the 1st successful validation'
                                )}
                              />
                            </ValidationReportColumn>
                            <ValidationReportColumn>
                              <ValidationReportCategoryLabel
                                label={maybeDna(candidateReward)}
                                description={isMobile ? t('Earned') : ''}
                              />
                            </ValidationReportColumn>
                            <ValidationReportColumn>
                              <ValidationReportCategoryLabel
                                label={
                                  <Text
                                    color={
                                      missedCandidateReward > 0 ? 'red.500' : ''
                                    }
                                  >
                                    {maybeDna(missedCandidateReward)}
                                  </Text>
                                }
                                description={isMobile ? t('Missed') : ''}
                              />
                            </ValidationReportColumn>
                            <ValidationReportColumn
                              display={['none', 'table-cell']}
                            >
                              <TableValidationDesc
                                t={t}
                                validationResult={validationResult}
                                missedValidationReward={missedCandidateReward}
                              />
                            </ValidationReportColumn>
                          </Tr>
                          <TableHiddenDescRow>
                            <TableValidationDesc
                              t={t}
                              validationResult={validationResult}
                              missedValidationReward={missedCandidateReward}
                            />
                          </TableHiddenDescRow>
                        </>
                      )}
                  </>
                )}
                <Tr>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      isFirst
                      label={t('Flips')}
                      description={
                        isMobile
                          ? t('Category')
                          : t('Rewards for submitted and qualified flips')
                      }
                      info={t('Rewards for submitted and qualified flips')}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      label={maybeDna(flipReward)}
                      description={isMobile ? t('Earned') : ''}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      label={
                        <Text color={missedFlipReward > 0 ? 'red.500' : ''}>
                          {maybeDna(missedFlipReward)}
                        </Text>
                      }
                      description={isMobile ? t('Missed') : ''}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn display={['none', 'table-cell']}>
                    <TableFlipsDesc
                      t={t}
                      validationResult={validationResult}
                      missedFlipReward={missedFlipReward}
                      flipReward={flipReward}
                    />
                  </ValidationReportColumn>
                </Tr>
                <TableHiddenDescRow>
                  <TableFlipsDesc
                    t={t}
                    validationResult={validationResult}
                    missedFlipReward={missedFlipReward}
                    flipReward={flipReward}
                  />
                </TableHiddenDescRow>
                <Tr>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      isFirst
                      label={t('Invitations')}
                      description={
                        isMobile
                          ? t('Category')
                          : t('Rewards for invitee validation')
                      }
                      info={t('Rewards for invitee validation')}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      label={maybeDna(invitationReward)}
                      description={isMobile ? t('Earned') : ''}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      label={
                        <Text
                          color={missedInvitationReward > 0 ? 'red.500' : ''}
                        >
                          {maybeDna(missedInvitationReward)}
                        </Text>
                      }
                      description={isMobile ? t('Missed') : ''}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn display={['none', 'table-cell']}>
                    <TableInvitationsDesc
                      t={t}
                      validationResult={validationResult}
                      missedInvitationReward={missedInvitationReward}
                      invitationReward={invitationReward}
                    />
                  </ValidationReportColumn>
                </Tr>
                <TableHiddenDescRow>
                  <TableInvitationsDesc
                    t={t}
                    validationResult={validationResult}
                    missedInvitationReward={missedInvitationReward}
                    invitationReward={invitationReward}
                  />
                </TableHiddenDescRow>
                <Tr>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      isFirst
                      label={t('Flip reports')}
                      description={
                        isMobile
                          ? t('Category')
                          : t('Rewards for reporting bad flips')
                      }
                      info={t('Rewards for reporting bad flips')}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      label={maybeDna(flipReportReward)}
                      description={isMobile ? t('Earned') : ''}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn>
                    <ValidationReportCategoryLabel
                      label={
                        <Text
                          color={missedFlipReportReward > 0 ? 'red.500' : ''}
                        >
                          {maybeDna(missedFlipReportReward)}
                        </Text>
                      }
                      description={isMobile ? t('Missed') : ''}
                    />
                  </ValidationReportColumn>
                  <ValidationReportColumn display={['none', 'table-cell']}>
                    <TableFlipReportsDesc
                      t={t}
                      validationResult={validationResult}
                      missedFlipReportReward={missedFlipReportReward}
                      flipReportReward={flipReportReward}
                    />
                  </ValidationReportColumn>
                </Tr>
                <TableHiddenDescRow>
                  <TableFlipReportsDesc
                    t={t}
                    validationResult={validationResult}
                    missedFlipReportReward={missedFlipReportReward}
                    flipReportReward={flipReportReward}
                  />
                </TableHiddenDescRow>
              </Tbody>
            </Table>
          </Stack>
        </Stack>
      </Page>
    </Layout>
  )
}

PageHeader = () => {
  const { themeName, data } = useTheme();

  const getButtons = () => {
    const donationButton = (
      <Button
        variant="outline"
        colorScheme="brand"
        as="a"
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.helloasso.com/associations/codeurs-en-seine/formulaires/1/widget"
      >
        Faire un don
      </Button>
    );

    switch (themeName) {
      case "meetups":
        return (
          <ButtonGroup justifyContent="center" flexGrow={{ base: 1, md: 0 }}>
            <Button as={Link} to="/meetups/sponsors" colorScheme="brand">
              Devenir sponsor
            </Button>
            {donationButton}
          </ButtonGroup>
        );

      case "devoxx4kids":
        return (
          <ButtonGroup justifyContent="center" flexGrow={{ base: 1, md: 0 }}>
            {donationButton}
          </ButtonGroup>
        );

      default:
        return (
          <ButtonGroup justifyContent="center" flexGrow={{ base: 1, md: 0 }}>
            {donationButton}
          </ButtonGroup>
        );
    }
  };

  return (
    <>
      <Flex
        alignItems="center"
        justify="space-between"
        pb={5}
        my={{ base: 0, md: "4vh" }}
      >
        <Box d={{ base: "none", md: "block" }} color="brand.800">
          <Text fontFamily="heading" fontSize="sm">
            {data.pretitle}
          </Text>
          <Heading as="h4" fontSize="lg" lineHeight="1rem">
            {data.title}
          </Heading>
        </Box>
        {getButtons()}
      </Flex>
      {process.env.GATSBY_ARCHIVE && (
        <Card bg="red.600" color="white" mb={8}>
          <StackInline alignItems="center">
            <Text fontWeight="bold" flex={1} fontSize="lg">
              Vous visitez le site d'une édition précédente.
            </Text>
            <Button
              as="a"
              rel="nopener norefferer"
              href="https://www.codeursenseine.com"
              color="brand.600"
            >
              Voir l'édition actuelle
            </Button>
          </StackInline>
        </Card>
      )}
    </>
  );
}

Nav = ({
  breakpoint,
  isOpen,
  onNavClose = () => {},
  ...props
}) => {
  const theme = useTheme();
  const { pathname } = useLocation();

  const data = useStaticQuery(graphql`
    query NavPagesQuery {
      site {
        siteMetadata {
          currentYear
        }
      }
    }
  `);

  const currentYear = data.site.siteMetadata.currentYear;

  return (
    <Flex
      direction="column"
      alignItems={{ [breakpoint]: "flex-end" }}
      background={theme.gradients.brand}
      color="white"
      position="fixed"
      top="0"
      left="0"
      bottom="0"
      transform={{
        base: `translate(${isOpen ? 0 : "100%"})`,
        [breakpoint]: "none",
      }}
      transition={{ base: "transform 0.4s", [breakpoint]: "none" }}
      overflowY="auto"
      overflowX="none"
      zIndex="3"
      as="nav"
      {...props}
    >
      <Flex direction="column" flexGrow={1}>
        <IconButton
          variant="unstyled"
          aria-label="Menu"
          d={{ base: "inline-flex", [breakpoint]: "none" }}
          icon={<FiX />}
          size="lg"
          position="absolute"
          top="0"
          right="0"
          onClick={() => onNavClose()}
        />
        <Stack px="2">
          <Flex
            px="2"
            pt="4vh"
            pb="2vh"
            align="center"
            justify={{ base: "center", [breakpoint]: "flex-end" }}
          >
            <Link to={`/${currentYear}`}>
              <Logo w={{ base: "8rem", [breakpoint]: "12rem" }} />
            </Link>
          </Flex>
          <Stack>
            <NavLink isMain as={Link} to={`/${currentYear}`}>
              Édition {currentYear}
            </NavLink>
            {pathname.startsWith(withPrefix(`/${currentYear}`)) && (
              <>
                {/* <NavLink as={Link} to={`/${currentYear}/programme`}>
                  Programme
                </NavLink>
                <NavLink as={Link} to={`/${currentYear}/speakers`}>
                  Intervenants
                </NavLink> */}
                <NavLink as={Link} to={`/${currentYear}/sponsors`}>
                  Sponsors
                </NavLink>
                <NavLink as={Link} to={`/${currentYear}/organisateurs`}>
                  Organisateurs
                </NavLink>
                {/* <NavLink as={Link} to={`/${currentYear}/kit-de-presse`}>
                  Kit de presse
                </NavLink> */}
                <NavLink as={Link} to={`/${currentYear}/code-of-conduct`}>
                  Code de conduite
                </NavLink>
                <NavLink as={Link} to={`/${currentYear}/review-2020-2021`}>
                  Review 2020-2021
                </NavLink>
              </>
            )}
          </Stack>
          <Stack spacing="0">
            <NavLink isMain as={Link} to="/meetups">
              Meetups
            </NavLink>
            {pathname.startsWith(withPrefix("/meetups")) && (
              <>
                <NavLink as={Link} to="/meetups/sponsors">
                  Sponsors
                </NavLink>
              </>
            )}
          </Stack>
          <Stack>
            <NavLink isMain as={Link} to="/live" title="Live Twitch">
              <span role="img" aria-label="Red circle">
                ?
              </span>{" "}
              Live Stream
            </NavLink>
          </Stack>
          <Stack>
            <NavLink isMain as={Link} to="/devoxx4kids" title="Devoxx4Kids">
              Devoxx4Kids
            </NavLink>
          </Stack>
        </Stack>
        <Stack mt="auto" p="4" mb="2">
          <NavSocial />
          <NavPreviousYears />
        </Stack>
      </Flex>
    </Flex>
  );
}

export function ValidationReportSummary({onClose, ...props}) {
  const {t, i18n} = useTranslation()

  const {colors} = useTheme()
  const router = useRouter()

  const [{isValidated, status}] = useIdentity()

  const {
    lastValidationScore,
    totalScore,
    earnings,
    earningsScore,
    totalMissedReward,
    validationResult,
    isLoading,
    isFailed,
  } = useValidationReportSummary()

  const maybeNew =
    !status ||
    [
      IdentityStatus.Undefined,
      IdentityStatus.Invite,
      IdentityStatus.Candidate,
    ].includes(status)

  if (isFailed || (isLoading && maybeNew)) return null

  const {
    short: {score: shortScore},
  } = lastValidationScore

  const dna = toLocaleDna(i18n.language, {maximumFractionDigits: 3})

  const tweet = () =>
    openExternalUrl(`
  https://twitter.com/intent/tweet?text=${encodeURIComponent(
    `I've earned ${earnings.toLocaleString(i18n.language, {
      maximumFractionDigits: 3,
    })} $IDNA`
  )}&url=https://idena.io/join-idena&hashtags=Idena,ubi,blockchain,mining
`)

  return (
    <Box w="100%" pb={[2, 0]} {...props}>
      <Flex
        borderTop="4px solid"
        borderTopColor={
          // eslint-disable-next-line no-nested-ternary
          isLoading
            ? 'transparent'
            : // eslint-disable-next-line no-nested-ternary
            isValidated
            ? validationResult === ValidationResult.Penalty
              ? 'orange.500'
              : 'green.500'
            : 'red.500'
        }
        borderRadius="md"
        boxShadow="0 3px 12px 0 rgba(83, 86, 92, 0.1), 0 2px 3px 0 rgba(83, 86, 92, 0.2)"
        px={[7, 8]}
        pt={6}
        pb={[2, 6]}
        position="relative"
        w="100%"
      >
        <CloseButton
          w={6}
          h={6}
          pos="absolute"
          top={3}
          right={3}
          onClick={onClose}
        />
        <Stack spacing={6} w="full">
          <Skeleton isLoaded={!isLoading} alignSelf="start" w="auto">
            <Text fontSize="lg" fontWeight={500}>
              {(() => {
                switch (validationResult) {
                  case ValidationResult.Success:
                    return t('Successfully validated')
                  case ValidationResult.Penalty:
                    return t('Validated')
                  default:
                    return t('Validation failed')
                }
              })()}
            </Text>
          </Skeleton>
          <Stack spacing={[6, 10]}>
            <Flex justify="space-between" direction={['column', 'row']}>
              <ValidationReportGauge>
                <ValidationReportGaugeBox>
                  {isLoading ? (
                    <ValidationReportGaugeBar color={colors.gray['100']} />
                  ) : isValidated ? (
                    <ValidationReportGaugeBar
                      value={totalScore * 100}
                      color={
                        // eslint-disable-next-line no-nested-ternary
                        totalScore <= 0.75
                          ? colors.red[500]
                          : totalScore <= 0.9
                          ? colors.orange[500]
                          : colors.green[500]
                      }
                    />
                  ) : (
                    <ValidationReportGaugeBar
                      value={shortScore * 100 || 2}
                      color={colors.red[500]}
                    />
                  )}
                  <ValidationReportGaugeIcon
                    display={['none', 'initial']}
                    icon={<TimerIcon />}
                  />
                </ValidationReportGaugeBox>
                <ValidationReportGaugeStat>
                  <Skeleton isLoaded={!isLoading} w="auto">
                    {isValidated ? (
                      <ValidationReportGaugeStatValue>
                        {toPercent(totalScore)}
                      </ValidationReportGaugeStatValue>
                    ) : (
                      <ValidationReportGaugeStatValue color="red.500">
                        {t('Failed')}
                      </ValidationReportGaugeStatValue>
                    )}
                  </Skeleton>
                  <ValidationReportGaugeStatLabel>
                    {[
                      ValidationResult.Success,
                      ValidationResult.Penalty,
                    ].includes(validationResult) && t('Score')}
                    {validationResult === ValidationResult.LateSubmission &&
                      t('Late submission')}
                    {validationResult === ValidationResult.MissedValidation &&
                      t('Missed validation')}
                    {validationResult === ValidationResult.WrongAnswers &&
                      t('Wrong answers')}
                  </ValidationReportGaugeStatLabel>
                </ValidationReportGaugeStat>
              </ValidationReportGauge>
              <ValidationReportGauge mt={[6, 0]}>
                <ValidationReportGaugeBox>
                  {isLoading ? (
                    <ValidationReportGaugeBar color={colors.gray['100']} />
                  ) : isValidated ? (
                    <ValidationReportGaugeBar
                      value={earningsScore * 100 || 2}
                      color={
                        // eslint-disable-next-line no-nested-ternary
                        earningsScore <= 0.5
                          ? colors.red[500]
                          : earningsScore <= 0.75
                          ? colors.orange[500]
                          : colors.green[500]
                      }
                    />
                  ) : (
                    <ValidationReportGaugeBar
                      value={2}
                      color={colors.red[500]}
                    />
                  )}
                  <ValidationReportGaugeIcon
                    display={['none', 'initial']}
                    icon={<SendOutIcon />}
                  />
                </ValidationReportGaugeBox>
                <ValidationReportGaugeStat>
                  <Skeleton isLoaded={!isLoading} w="auto">
                    {validationResult === ValidationResult.Success ? (
                      <ValidationReportGaugeStatValue>
                        {dna(earnings)}
                      </ValidationReportGaugeStatValue>
                    ) : (
                      <ValidationReportGaugeStatValue color="red.500">
                        {dna(totalMissedReward)}
                      </ValidationReportGaugeStatValue>
                    )}
                  </Skeleton>
                  <ValidationReportGaugeStatLabel>
                    {t('Earnings')}
                  </ValidationReportGaugeStatLabel>
                </ValidationReportGaugeStat>
              </ValidationReportGauge>
            </Flex>
            <Flex display={['flex', 'none']} justify="space-around">
              <Button
                onClick={tweet}
                variant="primaryFlat"
                size="lg"
                fontWeight={500}
                isDisabled={!isValidated}
              >
                {t('Share')}
              </Button>
              <Divider
                display={['block', 'none']}
                h={10}
                orientation="vertical"
                color="gray.100"
              />
              <Button
                onClick={() => router.push('/validation-report')}
                variant="primaryFlat"
                size="lg"
                fontWeight={500}
              >
                {t('Details')}
              </Button>
            </Flex>
            <Flex
              display={['none', 'flex']}
              justify="space-between"
              alignItems="center"
            >
              <Box>
                <TextLink
                  href="/validation-report"
                  fontWeight={500}
                  display="inline-block"
                >
                  <Stack isInline spacing={0} align="center">
                    <Text as="span">{t('More details')}</Text>
                    <ChevronDownIcon boxSize={4} transform="rotate(-90deg)" />
                  </Stack>
                </TextLink>
              </Box>
              <Stack isInline color="muted">
                <IconButton
                  icon={<TwitterIcon boxSize={5} />}
                  size="xs"
                  variant="ghost"
                  color="blue.500"
                  fontSize={20}
                  _hover={{bg: 'blue.50'}}
                  onClick={tweet}
                />
              </Stack>
            </Flex>
          </Stack>
        </Stack>
      </Flex>
    </Box>
  )
}

function RowStatus({direction, isMining, type, walletName, tx, ...props}) {
  const {i18n} = useTranslation()
  const toDna = toLocaleDna(i18n.language, {maximumFractionDigits: 3})

  function getColor(dir) {
    switch (dir) {
      case 'Sent':
        return 'red.500'
      case 'Pending':
        return 'warning.500'
      default:
        return 'gray.500'
    }
  }

  function getIcon(dir) {
    switch (dir) {
      case 'Sent':
        return <ArrowUpIcon boxSize={5} />
      case 'Pending':
        return <TimerIcon boxSize={5} />
      default:
        return <ArrowDownIcon boxSize={5} />
    }
  }

  const chakraTheme = useTheme()
  const color = isMining ? 'muted' : getColor(direction)
  const iconColor = transparentize(color, 0.12)(chakraTheme)

  const {
    isOpen: isOpenTxDetailDrawer,
    onOpen: onOpenTxDetailDrawer,
    onClose: onCloseTxDetailDrawer,
  } = useDisclosure()

  const onDrawerOpen = useBreakpointValue([onOpenTxDetailDrawer, () => {}])

  return (
    <Flex
      {...props}
      onClick={onDrawerOpen}
      className="status"
      alignItems="center"
    >
      <Box
        h={[10, 8]}
        w={[10, 8]}
        backgroundColor={iconColor}
        color={color}
        borderRadius={['xl', 'lg']}
        mr={[4, 3]}
        p={3 / 2}
        float="left"
        fontSize={['130%', '100%']}
        textAlign="center"
      >
        {getIcon(direction)}
      </Box>
      <Box className="content" overflow="hidden" flex={1}>
        <Flex
          fontSize={['base', 'md']}
          fontWeight={[500, 400]}
          justify={['space-between', 'flex-start']}
        >
          <Box
            className="type"
            textOverflow={['ellipsis', 'initial']}
            overflow={['hidden', 'auto']}
            maxW={['50%', 'initial']}
            whiteSpace={['nowrap', 'initial']}
          >
            {type}
          </Box>
          <Box display={['block', 'none']}>{toDna(tx.amount)}</Box>
        </Flex>
        <Flex justify={['space-between', 'flex-start']}>
          <Box display={['block', 'none']}>
            {!tx.timestamp
              ? '\u2013'
              : new Date(tx.timestamp).toLocaleDateString()}
          </Box>
          <Box
            className="name"
            color="muted"
            fontSize={['md', 'sm']}
            fontWeight={500}
          >
            {walletName}
          </Box>
        </Flex>
      </Box>

      <TransactionDetailDrawer
        tx={tx}
        direction={direction}
        isOpen={isOpenTxDetailDrawer}
        onClose={onCloseTxDetailDrawer}
      />
    </Flex>
  )
}