@chakra-ui/react#useBreakpointValue JavaScript Examples

export function DetailsPoints({title, value, isLoading, isFailed, ...props}) {
  const countColor = useBreakpointValue(['muted', 'gray.500'])

  return (
    <Flex
      direction="column"
      lineHeight={5}
      mt={[2, 0]}
      mr={[0, 16]}
      w={['100%', 'auto']}
      {...props}
    >
      <Flex
        color={['gray.500', 'muted']}
        fontSize={['base', 'md']}
        fontWeight={[500, 400]}
      >
        {title}
      </Flex>
      <Flex
        mt={[3 / 2, 0]}
        fontSize={['base', 'lg']}
        fontWeight={[400, 500]}
        color={isFailed ? 'red.500' : countColor}
      >
        {isLoading ? <Skeleton h={5} w={8} /> : value}
      </Flex>
      <Divider mt={2} display={['initial', 'none']} />
    </Flex>
  )
}

Feature = ({ text, icon, iconBg, call }) => {
  const responsiveSize = useBreakpointValue({base: 'xs', md: 'sm'})
  return (
    <Stack direction={"row"} align={"center"}>
      <Flex
        w={8}
        h={8}
        align={"center"}
        justify={"center"}
        rounded={"full"}
        // bg={iconBg}
      >
        <Image src={icon} />
      </Flex>
      <Text fontWeight={500} fontSize={{base: '2.8vmin', md: '1.2vmax'}} flex={1}>
        {text}
      </Text>
      <Button onClick={() => call()} colorScheme="pink" bg="#FF61E6" size={responsiveSize} justifySelf="right">
        Apply
      </Button>
    </Stack>
  );
}

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>
  )
}

HomeSection = () => {
  const ref = useRef(null);
  const onScreen = useOnScreen(ref);
  const buttonSize = useBreakpointValue({ base: 'sm', md: 'lg' })


  return (
    <Box
      as="section"
      id="home"
      alignContent="center"
      justifyContent="flex-start"
    >
      <Box
        ref={ref}
        position="relative"
        className="__content"
        maxW={{base: '100%', md: "2xl"}}
        opacity={onScreen ? 1 : 0}
        transform={`translate3d(${onScreen ? 0 : "-70px"}, 0, 0)`}
        transition="transform 0.3s 0.4s ease-in-out, opacity 0.6s 0.5s ease-in"

      >
        <Box
          d="inline-flex"
          flexFlow="column-reverse wrap"
          alignItems="flex-start"
          width="auto"
        >
          <Text
            as="h1"
            className="gradient-cone"
            lineHeight={1}
            overflow="visible"
            sx={{
              position: "relative",
              fontWeight: 700,
              mb: 0,
              strong: {
                d: "block",
                fontWeight: 700,
              },
              em: {
                fontStyle: "normal",
              },
            }}
          >
            MetaFest2
          </Text>
          <span className="fest-dates">9th - 23rd JUNE</span>
        </Box>
        <Box className="__content__body" maxW={{base: '66vw', lg: 'unset'}}>
          <Text as="p" fontWeight={300} mt={-2}>
            powered by{" "}
            <Text as="strong" className="gradient">
              MetaGame
            </Text>
          </Text>
          <Text as="p" fontSize="1.5vmax" mt={{base: 3, md: 6}} fontWeight={500}>
            A virtual festival &amp; conference.
          </Text>
          <Text as="p" fontSize={{base: '3vmin', lg: 'inherit' }} >
            The goal? To help you{" "}
            <Text as="span" className="gradient">
              level up
            </Text>{" "}
            &{" "}
            <Text as="span" className="gradient">
              manifest a better future
            </Text>
            .
          </Text>
          <HStack mt={5}>
            <Link href="#apply"><Button colorScheme="pink" bg="#FF61E6" size={buttonSize}>Apply</Button></Link>
          </HStack>
        </Box>
      </Box>
    </Box>
  );
}

export default function useMobile() {
  return useBreakpointValue([true, false])
}

EasterEgg = () => {
  const [toggle, setToggle] = useState(false);
  const [openClaim, setOpenClaim] = useState(false);
  const ref = useRef(null);
  const claimRef = useRef(null);
  const responsiveButtonSize = useBreakpointValue({base: 'sm', lg: 'md'})
  const handleToggle = () => {
    if (typeof window !== "undefined") {
      setToggle(!toggle);
      ref.current.classList.remove("found");
    }
  };

  // const claimNFT = () => {
  //   if (typeof window !== "undefined") {
  //     setOpenClaim(!openClaim);
  //     // setToggle(!toggle);
  //     // ref.current.classList.remove("found");
  //   }
  // };
  return (
    <>
      <Box
        ref={ref}
        className="ee1"
        bg="rgba(0,0,0,0.3)"
        boxShadow="0 0 15px rgba(0,0,0,0.6)"
        backdropFilter="blur(7px)"
        color="white"
        position="fixed"
        bottom={0}
        left={0}
        right={0}
        maxW="100vw"
        textAlign="center"
        height={{base: '150px', md: "auto"}}
        opacity={0}
        // transform="translateY(100px)"
        transition="transform 0.3s 0.2s ease-in-out, opacity 0.3s 0.3s ease-in-out"
        zIndex={0}
        overflowX="clip"
        sx={{
          h4: {
            fontSize: "2vmax",
            fontWeight: 700,
          },
          "&.found": {
            opacity: 1,
            transform: "translateY(0)",
            zIndex: 2003,
          },
        }}
      >
        {openClaim && (
          <Button
            position="absolute"
            bottom={20}
            right={6}
            colorScheme="pink"
            bg="#FF61E6"
            boxShadow="0 0 10px rgba(0, 0, 0, 0.6)"
            size="sm"
            transition="all 0.3s 0.8s ease"
            // transform={`translateY(${openClaim ? 0 : "-70px"})`}
            onClick={() => setOpenClaim(!openClaim)}
            zIndex={2004}
          >
            Close the claimer
          </Button>
        )}
        <Box
          d="flex"
          position="relative"
          alignItems="center"
          justifyContent="space-around"
          flexFlow="row nowrap"
          mx="auto"
          maxW={{base: '100%', md: "5xl"}}
          py={3}
        >
          <Image src={BabyOctoGif} boxSize={{base: '35px', xl:"100px"}} objectFit="cover" />
          <Box flex={1}>
            <Text as="h4">
              <span role="img" aria-label="Octo emoji">
                ?
              </span>{" "}
              Nova's blessings!!{" "}
              <span role="img" aria-label="Octo emoji">
                ?
              </span>
            </Text>
            <Text as="p" fontWeight={500}>
              Welcome Anon!{" "}
              <span role="img" aria-label="Cheers/Clinking glasses emoji">
                ?
              </span>
              <br />
              You noticed little octo, all alone in space.{" "}
              <span role="img" aria-label="Loved up emoji">
                ?
              </span>{" "}
              <br /> For that Nova will bestow wonderment upon you! Do you wish
              to accept the gift?
              <br />
            </Text>
            <Button
              href="#"
              colorScheme="pink"
              bg="#FF61E6"
              size={responsiveButtonSize}
              mt={5}
              onClick={() => setOpenClaim(!openClaim)}
            >
              Claim your NFT
            </Button>
          </Box>

          <Image src={BabyOctoGif} boxSize={{base: '35px', xl:"100px"}} objectFit="cover" />
          <IconButton
            onClick={handleToggle}
            colorScheme="ghost"
            pos="absolute"
            top={3}
            right={0}
            size="sm"
            aria-label="Close easter egg"
            icon={<CloseIcon />}
            zIndex={2001}
          />
        </Box>
      </Box>
      {openClaim && (
        <Box
          ref={claimRef}
          position="fixed"
          top="12.5vh"
          left={0}
          height="75vh"
          minH="75vh"
          width="100vw"
          boxShadow="0 0 30px rgba(0,0,0,0.8)"
          // opacity={onScreen ? 1 : 0}
          transition="opacity 1.2s 0.8s ease-in-out"
          zIndex={2003}
          sx={{
            bg: "rgba(25,0,50,0.4)",
            backdropFilter: "blur(7px)",
          }}
        >
          <Container maxW={{base: '100%', md: "2xl"}} height="100%" py={12} align="center">
            <MinterInstance />
          </Container>
          <Box
            display="flex"
            position="absolute"
            bottom={0}
            right={0}
            width="100%"
            textAlign="center"
          >
            <Link
              href="https://testnets.opensea.io/assets?search[query]=0x91BBa1e0EE2DCC8d78Fa017588614f328d6d1885"
              isExternal
              fontWeight={700}
              fontSize="0.7vmax"
              // d="inline-block"
              mx="auto"
              p={3}
              bg="linear-gradient(90.24deg, #640DFB99 0.3%, rgba(100, 13, 251, 0.9) 80.16%)"
              borderRadius="5px 5px 0 0"
              boxShadow="0 0 5px rgba(0,0,0,0.6)"
              overflow="clip"
            >
              <span role="img" aria-label="Attention!">
                ?
              </span>{" "}
              Need more NFTs? View the contract on OpenSea. <ExternalLinkIcon />
            </Link>
          </Box>
        </Box>
      )}
    </>
  );
}

export default function CreateKey() {
  const {t} = useTranslation()
  const size = useBreakpointValue(['lg', 'md'])
  const variant = useBreakpointValue(['mobile', 'initial'])
  const buttonVariant = useBreakpointValue(['primaryFlat', 'secondary'])
  const successToast = useSuccessToast()

  const router = useRouter()
  const [state, setState] = useState({
    step: steps.AVATAR,
  })
  const [error, setError] = useState()
  const {onCopy, hasCopied} = useClipboard(state.encryptedPrivateKey)

  const setStep = s => setState(prevState => ({...prevState, step: s}))

  const generateNewAddress = () => {
    const key = generatePrivateKey()
    setState(prevState => ({
      ...prevState,
      privateKey: key,
      address: privateKeyToAddress(key),
    }))
  }

  const setPassword = () => {
    if (state.password !== state.passwordConfirm) {
      setError(t("Passwords don't match. Try again."))
    } else {
      const encryptedKey = encryptPrivateKey(state.privateKey, state.password)
      setState(prevState => ({
        ...prevState,
        encryptedPrivateKey: encryptedKey,
        step: steps.BACKUP,
      }))
      setError(null)
    }
  }

  useEffect(() => {
    generateNewAddress()
  }, [])

  return (
    <>
      {state.step === steps.AVATAR && (
        <AuthLayout>
          <AuthLayout.Small>
            <Flex width="100%" direction="column">
              <Flex justifyContent="center">
                <div style={{position: 'relative'}}>
                  <Avatar address={state.address} />
                  <Box
                    color={['xblack.016', 'xwhite.500']}
                    opacity={[1, '0.8']}
                    position="absolute"
                    w={8}
                    h={8}
                    bottom={['28px', '5px']}
                    right={['-40px', '5px']}
                    borderRadius="6px"
                    background="gray.500"
                    padding="3px 2px 2px 5px"
                    cursor="pointer"
                    onClick={() => generateNewAddress()}
                  >
                    <RefreshIcon
                      color={['xwhite.500', 'inherit']}
                      boxSize={5}
                      fill="white"
                      style={{
                        opacity: 0.8,
                        transform: 'scaleX(-1) rotate(90deg)',
                      }}
                    ></RefreshIcon>
                  </Box>
                </div>
              </Flex>

              <Flex mt={[5, 0]} justify="center">
                <SubHeading color="white">{t('Your address')}</SubHeading>
              </Flex>

              <Flex
                mt="5px"
                mb="45px"
                fontSize="mdx"
                style={{
                  opacity: 0.5,
                  textAlign: 'center',
                  wordBreak: 'break-all',
                }}
              >
                {state.address}
              </Flex>
              <PrimaryButton
                size={size}
                onClick={() => setStep(steps.PASSWORD)}
              >
                {t('Proceed')}
              </PrimaryButton>

              <Flex justifyContent="center">
                <FlatButton onClick={() => router.push('/')} mt={5}>
                  {t('Cancel')}
                </FlatButton>
              </Flex>
            </Flex>
          </AuthLayout.Small>
        </AuthLayout>
      )}
      {state.step === steps.PASSWORD && (
        <AuthLayout>
          <Box
            w="100%"
            h={6}
            position="absolute"
            top="40px"
            display={['block', 'none']}
          >
            <ArrowBackIcon
              fill="#fff"
              boxSize={6}
              ml={4}
              onClick={() => setStep(steps.AVATAR)}
            ></ArrowBackIcon>
          </Box>
          <AuthLayout.Normal>
            <Flex
              direction={['column', 'initial']}
              align={['center', 'initial']}
              width="100%"
            >
              <Avatar address={state.address} />
              <Flex
                direction="column"
                align={['center', 'initial']}
                justify="center"
                flex="1"
                w={['75%', '100%']}
                mt={[5, 0]}
                ml={[0, 5]}
              >
                <Box>
                  <SubHeading color="white">
                    {t('Create password to encrypt your account')}
                  </SubHeading>
                </Box>

                <Flex justify="space-between">
                  <Text
                    wordBreak={['break-all', 'initial']}
                    color="xwhite.050"
                    fontSize="mdx"
                  >
                    {state.address}
                  </Text>
                </Flex>
              </Flex>
            </Flex>
            <Flex width="100%" mt={6}>
              <form
                onSubmit={e => {
                  e.preventDefault()
                  setPassword()
                }}
                style={{width: '100%'}}
              >
                <FormLabel
                  display={['none', 'inherit']}
                  htmlFor="key"
                  style={{color: 'white', fontSize: '13px'}}
                >
                  {t('Password')}
                </FormLabel>
                <Flex width="100%" mb={[3, 5]} style={{position: 'relative'}}>
                  <PasswordInput
                    id="password"
                    size={size}
                    value={state.password}
                    width="100%"
                    borderColor="xblack.008"
                    backgroundColor="xblack.016"
                    onChange={e =>
                      setState({
                        ...state,
                        password: e.target.value,
                      })
                    }
                    placeholder={t('Enter password')}
                  />
                </Flex>
                <FormLabel
                  display={['none', 'inherit']}
                  htmlFor="key"
                  style={{
                    color: 'white',
                    fontSize: '13px',
                  }}
                >
                  {t('Confirm password')}
                </FormLabel>
                <Flex width="100%" style={{position: 'relative'}}>
                  <PasswordInput
                    id="passwordConfirm"
                    size={size}
                    value={state.passwordConfirm}
                    width="100%"
                    borderColor="xblack.008"
                    backgroundColor="xblack.016"
                    onChange={e =>
                      setState({
                        ...state,
                        passwordConfirm: e.target.value,
                      })
                    }
                    placeholder={t('Enter password again')}
                  />
                </Flex>
                <Flex mt={[4, 8]} justify="space-between">
                  <FlatButton
                    display={['none', 'inherit']}
                    color="white"
                    _hover={{color: 'xwhite.080'}}
                    onClick={() => setStep(steps.AVATAR)}
                  >
                    <ArrowUpIcon
                      boxSize={5}
                      style={{transform: 'rotate(-90deg)', marginTop: -3}}
                    ></ArrowUpIcon>
                    {t('Back')}
                  </FlatButton>
                  <PrimaryButton
                    size={size}
                    w={['100%', 'initial']}
                    type="submit"
                  >
                    {t('Next')}
                  </PrimaryButton>
                </Flex>
                {error && (
                  <Flex
                    mt="30px"
                    background="rgb(255, 102, 102)"
                    borderRadius="9px"
                    fontSize="mdx"
                    p="18px 24px"
                  >
                    {error}
                  </Flex>
                )}
              </form>
            </Flex>
          </AuthLayout.Normal>
        </AuthLayout>
      )}
      {state.step === steps.BACKUP && (
        <AuthLayout>
          <Box
            w="100%"
            h={6}
            position="absolute"
            top="40px"
            display={['block', 'none']}
          >
            <ArrowBackIcon
              fill="#fff"
              boxSize={6}
              ml={4}
              onClick={() => setStep(steps.PASSWORD)}
            ></ArrowBackIcon>
          </Box>
          <AuthLayout.Normal>
            <Flex
              direction={['column', 'initial']}
              align={['center', 'initial']}
              width="100%"
            >
              <Avatar address={state.address} />
              <Flex
                direction="column"
                justify="center"
                flex="1"
                mt={[4, 0]}
                ml={[0, 5]}
              >
                <SubHeading color="white">
                  {t('Backup your private key')}
                </SubHeading>

                <Flex justify="space-between">
                  <Text color="xwhite.050" fontSize="mdx">
                    {t(
                      'Make a photo of QR code or save your encrypted private key.'
                    )}
                  </Text>
                </Flex>
              </Flex>
            </Flex>
            <Flex width="100%" mt={6}>
              <form
                onSubmit={e => {
                  e.preventDefault()
                  if (!state.understand1 || !state.understand2) {
                    setError(t('Please confirm you understand risks'))
                  } else {
                    sendSignUp(state.address)
                    setError('')
                    setStep(steps.SUCCESS)
                  }
                }}
                style={{width: '100%'}}
              >
                <Flex display={['none', 'flex']} justify="space-between">
                  <FormLabel style={{color: 'white', fontSize: 'md'}}>
                    {t('Your encrypted private key')}
                  </FormLabel>
                  {hasCopied ? (
                    <FormLabel style={{color: 'white', fontSize: 'md'}}>
                      {t('Copied!')}
                    </FormLabel>
                  ) : (
                    <FlatButton onClick={onCopy} marginBottom="10px">
                      {t('Copy')}
                    </FlatButton>
                  )}
                </Flex>
                <Flex width="100%" mb={[0, 5]} style={{position: 'relative'}}>
                  <Input
                    size={size}
                    variant={variant}
                    value={state.encryptedPrivateKey}
                    borderColor="xblack.008"
                    backgroundColor={['gray.500', 'xblack.016']}
                    width="100%"
                    pr={[10, 3]}
                    disabled
                  />
                  <Box
                    display={['initial', 'none']}
                    position="absolute"
                    top={3}
                    right={3}
                  >
                    <CopyIcon
                      boxSize={6}
                      fill="#E8EAED"
                      opacity="0.16"
                      onClick={() => {
                        onCopy()
                        successToast({
                          title: 'Private key copied!',
                          duration: '5000',
                        })
                      }}
                    />
                  </Box>
                </Flex>
                <Flex direction="column">
                  <Checkbox
                    order={[2, 1]}
                    mt={[9, 0]}
                    variant={variant}
                    textAlign={['left', 'initial']}
                    value={state.understand1}
                    isChecked={state.understand1}
                    onChange={e =>
                      setState({...state, understand1: e.target.checked})
                    }
                    style={{fontWeight: 300}}
                  >
                    {t(
                      'I understand that Idena cannot recover the private key for me.'
                    )}
                  </Checkbox>
                  <Checkbox
                    order={[3, 2]}
                    mt={2}
                    variant={variant}
                    textAlign={['left', 'initial']}
                    value={state.understand2}
                    isChecked={state.understand2}
                    onChange={e =>
                      setState({...state, understand2: e.target.checked})
                    }
                    style={{fontWeight: 300}}
                  >
                    {t(
                      'I understand the risk of compromising my private key backup.'
                    )}
                  </Checkbox>
                  <Flex order={[1, 3]} mt={[4, 8]} justify="space-between">
                    <FlatButton
                      display={['none', 'inherit']}
                      color="white"
                      _hover={{color: 'xwhite.080'}}
                      onClick={() => {
                        setError('')
                        setStep(steps.PASSWORD)
                      }}
                    >
                      <ArrowUpIcon
                        boxSize={5}
                        style={{transform: 'rotate(-90deg)', marginTop: -3}}
                      ></ArrowUpIcon>
                      {t('Back')}
                    </FlatButton>
                    <Flex
                      w={['100%', 'initial']}
                      direction={['column', 'initial']}
                    >
                      <Button
                        order={[2, 1]}
                        size={size}
                        variant={buttonVariant}
                        w={['100%', 'initial']}
                        type="button"
                        mt={[4, 0]}
                        mr={[0, 2.5]}
                        fontSize={['15px', '13px']}
                        onClick={() => setState({...state, showQrDialog: true})}
                      >
                        {t('Show QR code')}
                      </Button>
                      <PrimaryButton
                        order={[1, 2]}
                        w={['100%', 'initial']}
                        size={size}
                        type="submit"
                      >
                        {t('Next')}
                      </PrimaryButton>
                    </Flex>
                  </Flex>
                </Flex>
                {error && (
                  <Flex
                    mt="30px"
                    p="18px 24px"
                    background="rgb(255, 102, 102)"
                    borderRadius="9px"
                    fontSyze="mdx"
                    style={{
                      fontSize: '14px',
                    }}
                  >
                    {error}
                  </Flex>
                )}
              </form>
            </Flex>
          </AuthLayout.Normal>
          <Dialog
            key="qr"
            isOpen={state.showQrDialog}
            onClose={() => setState({...state, showQrDialog: false})}
          >
            <DialogHeader>{t('Encrypted private key')}</DialogHeader>
            <DialogBody>
              {t('Scan QR by your mobile phone.')}
              <Flex justify="center" mx="auto" my={8}>
                <QRCode value={state.encryptedPrivateKey} />
              </Flex>
            </DialogBody>
            <DialogFooter>
              <SecondaryButton
                onClick={() => setState({...state, showQrDialog: false})}
              >
                {t('Close')}
              </SecondaryButton>
              <PrimaryButton
                onClick={() => {
                  const blob = new Blob([state.encryptedPrivateKey], {
                    type: 'text/plain;charset=utf-8',
                  })
                  saveAs(blob, 'idena-encrypted-key.txt')
                }}
              >
                {t('Save to file')}
              </PrimaryButton>
            </DialogFooter>
          </Dialog>
        </AuthLayout>
      )}
      {state.step === steps.SUCCESS && (
        <AuthLayout>
          <AuthLayout.Small>
            <Flex width="100%" direction="column">
              <Flex justifyContent="center">
                <div style={{position: 'relative'}}>
                  <Avatar address={state.address} />
                </div>
              </Flex>
              <Flex justify="center" marginTop={7.5}>
                <SubHeading color="white">
                  {t('Successfully created!')}
                </SubHeading>
              </Flex>

              <Flex
                mt="5px"
                mb="45px"
                fontSize="mdx"
                style={{
                  opacity: 0.5,
                  textAlign: 'center',
                  wordBreak: 'break-all',
                }}
              >
                {state.address}
              </Flex>
              <PrimaryButton
                size={size}
                onClick={() => router.push('/key/import')}
              >
                {t('Sign in')}
              </PrimaryButton>
              <Flex display={['none', 'flex']} justifyContent="center">
                <FlatButton onClick={() => setStep(steps.BACKUP)} mt={5}>
                  {t('Back')}
                </FlatButton>
              </Flex>
            </Flex>
          </AuthLayout.Small>
        </AuthLayout>
      )}
    </>
  )
}