@chakra-ui/react#HStack JavaScript Examples

function AdListItemSkeleton() {
  return (
    <HStack spacing="5" align="flex-start">
      <SkeletonCircle
        size={['60px']}
        startColor="gray.50"
        endColor="gray.100"
      />
      <Stack spacing="5" w="full">
        <Stack spacing="1">
          <Skeleton minH="4" w="44" />
          <Skeleton minH="10" w="md" />
        </Stack>
        <SkeletonText
          noOfLines={3}
          spacing="1.5"
          startColor="gray.50"
          endColor="gray.100"
          minH="4"
        />
      </Stack>
    </HStack>
  )
}

BlobActionBar = () => (
  <Box mt="10">
    <Container centerContent maxW="sm">
      <HStack spacing="24px">
        <HtmlCodeModalButton />
        <RandomizerBtn />
        <FlutterCodeModalButton />
      </HStack>
    </Container>
  </Box>
)

export function PageFooter(props) {
  return (
    <HStack
      as="footer"
      spacing={2}
      justify="flex-end"
      bg="white"
      borderTop="1px"
      borderTopColor="gray.100"
      px={4}
      py={3}
      h={14}
      w="full"
      {...props}
    />
  )
}

ChallengeCard = ({ challengeId, challengeInfo, submissionInfo }) => (
  <HStack spacing="6px" style={{ opacity: challengeInfo.disabled ? 0.5 : 1 }}>
    {challengeInfo.disabled ? (
      <p>{challengeInfo.label}</p>
    ) : (
      <Link as={RouteLink} to={`/challenge/${challengeId}`} color="teal.500">
        {challengeInfo.label}
      </Link>
    )}
    {submissionInfo && <p> [{submissionInfo.status}]</p>}
    {challengeInfo.disabled && <p> (disabled)</p>}
  </HStack>
)

function AdBannerAuthor({ad, ...props}) {
  const {t} = useTranslation()

  return (
    <HStack spacing="4" {...props}>
      <VDivider h="9" />
      <Stack spacing="0.5" fontWeight={500}>
        <Text>{t('Sponsored by')}</Text>
        <HStack spacing="1">
          <Avatar
            address={ad?.author}
            size={4}
            borderWidth={1}
            borderColor="gray.016"
            rounded="sm"
          />
          <Skeleton isLoaded={Boolean(ad?.author)}>
            <Text color="muted" fontSize="sm" w="24" lineHeight="4" isTruncated>
              {ad?.author}
            </Text>
          </Skeleton>
        </HStack>
      </Stack>
    </HStack>
  )
}

TargetModalDialog = ({ project, isOpen, onSubmit, onCancel }) => {
    const emptyTarget = { project_id: project.id, name: null, kind: TargetKinds[0].value };
    const [target, setTarget] = useState(emptyTarget)

    const onAddTargetFormSubmit = ev => {
        ev.preventDefault();

        secureApiFetch(`/targets`, { method: 'POST', body: JSON.stringify(target) })
            .then(() => {
                onSubmit();
                actionCompletedToast(`The target "${target.name}" has been added.`);
            })
            .catch(err => {
                errorToast(err);
            })
            .finally(() => {
                setTarget(emptyTarget)
            })
    }

    return <Modal size="xl" isOpen={isOpen} onClose={onCancel}>
        <ModalOverlay />
        <ModalContent>
            <ModalHeader><HStack><TargetIcon style={{ width: '24px' }} /> <h4>New target details</h4></HStack></ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                <TargetForm newTarget={target} onFormSubmit={onAddTargetFormSubmit} targetSetter={setTarget} />
            </ModalBody>

            <ModalFooter>
                <Button onClick={onCancel} mr={3}>Cancel</Button>
                <Button colorScheme="blue" onClick={onAddTargetFormSubmit}>Save</Button>
            </ModalFooter>
        </ModalContent>
    </Modal>
}

export function AdDrawer({isMining = true, children, ...props}) {
  const isDesktop = useIsDesktop()

  const ads = useRotatingAds()

  const hasRotatingAds = ads.length > 0

  const {currentIndex, prev, next, setCurrentIndex} = useRotateAds()

  const activeAd = ads[currentIndex]

  return (
    <Drawer {...props}>
      {children}

      {isDesktop && isMining && hasRotatingAds && (
        <DrawerPromotionPortal>
          <Stack spacing="4">
            <HStack spacing="16">
              <IconButton
                variant="unstyled"
                color="xwhite.050"
                icon={<TriangleUpIcon transform="rotate(-90deg)" />}
                _hover={{
                  color: 'white',
                }}
                onClick={prev}
              />

              <AdPromotion {...activeAd} />

              <IconButton
                variant="unstyled"
                color="xwhite.050"
                icon={<TriangleUpIcon transform="rotate(90deg)" />}
                _hover={{
                  color: 'white',
                }}
                onClick={next}
              />
            </HStack>
            <HStack spacing="2.5" justify="center" align="center" h="2">
              {ads.map((ad, idx) => {
                const isCurrrent = currentIndex === idx

                const isSibling = Math.abs(currentIndex - idx) === 1

                // eslint-disable-next-line no-nested-ternary
                const boxSize = isCurrrent ? '2' : isSibling ? '1.5' : '1'

                return (
                  <Button
                    key={ad.cid}
                    variant="unstyled"
                    bg={
                      // eslint-disable-next-line no-nested-ternary
                      isCurrrent
                        ? 'white'
                        : isSibling
                        ? 'transparent'
                        : 'xwhite.016'
                    }
                    borderColor="xwhite.016"
                    borderWidth={isSibling ? 2 : 0}
                    rounded="full"
                    boxSize={boxSize}
                    minW={boxSize}
                    onClick={() => {
                      setCurrentIndex(idx)
                    }}
                  />
                )
              })}
            </HStack>
          </Stack>
        </DrawerPromotionPortal>
      )}
    </Drawer>
  )
}

function Login() {
  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}
            >
              USER LOGIN
            </Heading>
            <InputGroup w="95%" borderRadius="full" bgColor="gray.200">
              <InputLeftElement
                margin="0 20px"
                pointerEvents="none"
                children={
                  <RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
                }
              />
              <Input
                borderRadius="full"
                type="tel"
                placeholder="Username"
                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="password"
                borderRadius="full"
                placeholder="Password"
                paddingLeft="60px"
              />
            </InputGroup>
            <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/register" >Need Account ?</a>
              </Link>
            <HStack className="login__btn" alignSelf="flex-end">
              <Button
                colorScheme="pink"
                px="6"
                size="sm"
                fontWeight="bold"
                className="loginBtn"
              >
                LOGIN
              </Button>
              <Link  fontSize="sm" textDecoration="underline" color="blue">
                <a href="/forget" >Forgot password?</a>
              </Link>
            </HStack>
          </VStack>
        </div>
      </div>
    </div>
    </>
  );
}

export function PublishFlipDrawer({isPending, flip, onSubmit, ...props}) {
  const {t} = useTranslation()

  return (
    <AdDrawer isMining={isPending} {...props}>
      <DrawerHeader>
        <Stack spacing={4}>
          <Center
            alignSelf="flex-start"
            bg="blue.012"
            w={12}
            minH={12}
            rounded="xl"
          >
            <PublishFlipIcon boxSize={6} color="blue.500" />
          </Center>
          <Heading color="gray.500" fontSize="lg" fontWeight={500}>
            {t('Submit flip')}
          </Heading>
        </Stack>
      </DrawerHeader>
      <DrawerBody overflowY="auto" mx={-6} mt="3" mb={10}>
        <Stack spacing={6} fontSize="md" px={6} align="center">
          <HStack spacing="3">
            <FlipImageList>
              {flip.originalOrder.map((num, idx) => (
                <FlipImageListItem
                  key={num}
                  src={flip?.images[num]}
                  isFirst={idx === 0}
                  isLast={idx === flip?.images.length - 1}
                  w="24"
                />
              ))}
            </FlipImageList>
            <FlipImageList>
              {flip.order.map((num, idx) => (
                <FlipImageListItem
                  key={num}
                  src={flip?.images[num]}
                  isFirst={idx === 0}
                  isLast={idx === flip?.images.length - 1}
                  w="24"
                />
              ))}
            </FlipImageList>
          </HStack>
          <FlipKeywordPanel w="full">
            <Stack spacing="4">
              {flip.keywords.map(word => (
                <FlipKeyword key={word.id}>
                  <FlipKeywordName>{word.name}</FlipKeywordName>
                  <FlipKeywordDescription>{word.desc}</FlipKeywordDescription>
                </FlipKeyword>
              ))}
            </Stack>
          </FlipKeywordPanel>
        </Stack>
      </DrawerBody>
      <DrawerFooter>
        <HStack>
          {/* eslint-disable-next-line react/destructuring-assignment */}
          <SecondaryButton onClick={props.onClose}>
            {t('Not now')}
          </SecondaryButton>
          <PrimaryButton
            isLoading={isPending}
            loadingText={t('Mining...')}
            onClick={onSubmit}
          >
            {t('Submit')}
          </PrimaryButton>
        </HStack>
      </DrawerFooter>
    </AdDrawer>
  )
}

Footer = ({ toggleSound, playSound }) => (
  <Center my="6">
    <HStack
      spacing="10px"
      fontSize="sm"
      flexDirection={{ base: 'column-reverse', lg: 'row' }}
    >
      <Button
        variant="silent"
        leftIcon={<CopyrightIcon fontSize="lg" />}
        aria-label="Toggle Theme"
      >
        Copyright 2021
      </Button>

      <Modal
        title="Source code & Libraries"
        size="md"
        src={
          <Button
            variant="silent"
            leftIcon={<GithubIcon fontSize="lg" />}
            aria-label="Source code"
          >
            Source code
          </Button>
        }
      >
        <Box>
          <SourceCode />
        </Box>
      </Modal>

      <Modal
        title="Credits"
        size="md"
        src={
          <Button
            variant="silent"
            leftIcon={<CreditsIcon fontSize="lg" />}
            aria-label="Credits"
          >
            Credits
          </Button>
        }
      >
        <Box>
          <Credits />
        </Box>
      </Modal>
      <LoIcon />
      <Button
        variant="silent"
        leftIcon={<UserIcon fontSize="lg" />}
        aria-label="Lokesh Rajendran"
        target="_blank"
        as={Link}
        href="https://twitter.com/lokesh_coder"
      >
        lokesh_coder
      </Button>
      <Button
        variant="silent"
        leftIcon={(() => {
          if (!playSound) return <SoundOffIcon fontSize="lg" />;
          return <SoundIcon fontSize="lg" />;
        })()}
        aria-label="Toggle Theme"
        onClick={toggleSound}
      >
        Toggle sound
      </Button>
      <Box as={Text}>
        <ThemeSwitch />
      </Box>
    </HStack>
  </Center>
)

/*
  ~ What it does? ~

  Displays an address with a blockie image and option to copy address

  ~ How can I use? ~

  <Address
    address={address}
    ensProvider={mainnetProvider}
    blockExplorer={blockExplorer}
    fontSize={fontSize}
  />

  ~ Features ~

  - Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
              (ex. "0xa870" => "user.eth")
  - Provide blockExplorer={blockExplorer}, click on address and get the link
              (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")
  - Provide fontSize={fontSize} to change the size of address text
*/

// INFO: Address used to have ensProvider as prop. That's no longer needed.
export default function Address({ value, address: sentAddress, size, w, fontSize }) {
  const address = value || sentAddress;

  const mainnetProviderData = useContext(BlockchainProvidersContext).mainnet;
  const mainnetProvider = mainnetProviderData.provider;

  const ens = useLookupAddress(mainnetProvider, address);

  if (!address) {
    return <span>Loading...</span>;
  }

  let displayAddress = address.substr(0, 6);

  if (ens && ens.indexOf("0x") < 0) {
    displayAddress = ens;
  } else if (size === "short") {
    displayAddress += "..." + address.substr(-4);
  } else if (size === "long") {
    displayAddress = address;
  }

  return (
    <HStack spacing="20px">
      <span style={{ verticalAlign: "middle" }}>
        <QRPunkBlockie withQr={false} address={address.toLowerCase()} w={w ?? 12.5} borderRadius="md" />
      </span>
      <span
        style={{
          verticalAlign: "middle",
          fontSize: fontSize ?? 28,
          fontWeight: "bold",
        }}
      >
        {displayAddress}
      </span>
    </HStack>
  );
}

Component = () => {
  const data = { nodes };

  const chakraTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(chakraTheme);

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 2,
    },
    onChange: onPaginationChange,
  });

  function onPaginationChange(action, state) {
    console.log(action, state);
  }

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ];

  return (
    <>
      <Box p={3} borderWidth="1px" borderRadius="lg">
        <CompactTable columns={COLUMNS} data={data} theme={theme} pagination={pagination} />
      </Box>

      <br />
      <HStack justify="flex-end">
        <IconButton
          aria-label="previous page"
          icon={<FaChevronLeft />}
          colorScheme="teal"
          variant="ghost"
          disabled={pagination.state.page === 0}
          onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
        />

        {pagination.state.getPages(data.nodes).map((_, index) => (
          <Button
            key={index}
            colorScheme="teal"
            variant={pagination.state.page === index ? 'solid' : 'ghost'}
            onClick={() => pagination.fns.onSetPage(index)}
          >
            {index + 1}
          </Button>
        ))}
        <IconButton
          aria-label="next page"
          icon={<FaChevronRight />}
          colorScheme="teal"
          variant="ghost"
          disabled={pagination.state.page + 1 === pagination.state.getTotalPages(data.nodes)}
          onClick={() => pagination.fns.onSetPage(pagination.state.page + 1)}
        />
      </HStack>

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}

export function AdBanner() {
  const {t} = useTranslation()

  const router = useRouter()

  const activeAd = useCurrentBannerAd()

  return (
    <Flex
      align="center"
      justify="space-between"
      borderBottomWidth={1}
      borderBottomColor="gray.100"
      p="2"
      pr="4"
      h="14"
    >
      <AdBannerContent ad={activeAd} />
      <HStack spacing="10">
        <AdBannerAuthor ad={activeAd} display={['none', 'flex']} />
        <Menu zIndex="popover">
          {false && (
            <MenuItem
              icon={<AdsIcon boxSize={5} color="blue.500" />}
              onClick={() => {
                router.push(`/adn/list`)
              }}
            >
              {t('My Ads')}
            </MenuItem>
          )}
          <NextLink href="/adn/offers">
            <MenuItem icon={<PicIcon boxSize={5} color="blue.500" />}>
              {t('View all offers')}
            </MenuItem>
          </NextLink>
        </Menu>
      </HStack>
    </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>
    </>
    )
}

function Header(props) {
	const { isOpen, onOpen, onClose } = useDisclosure();
	const web3Context = useContext(Web3Context);
	const { connectWallet, signerAddress, checkIfMemberExists } = web3Context;

	function connect() {
		connectWallet().then(async (data) => {
			console.log(data.provider.networkVersion);
			if (data.provider.networkVersion == "80001") {
				checkIfMemberExists(data).then((value) => {
					if (value === true) {
						props.setIsMember(true);
					}
				});
			} else {
				onOpen();
			}
		});
	}

	return (
		<HStack
			backgroundColor='white'
			zIndex='1'
			position='fixed'
			width='100vw'
			boxShadow='base'
			px='250px'
			py={3}>
			<Modal
				isOpen={isOpen}
				onClose={onClose}
				closeOnOverlayClick={false}>
				<ModalOverlay />
				<ModalContent>
					<ModalHeader>Invalid Network</ModalHeader>
					<ModalBody>Please connect to Mumbai Testnet.</ModalBody>
				</ModalContent>
			</Modal>
			<Link to='/'>
				<Image height='35px' src='../assets/DAOInsure.png' />
			</Link>
			<Spacer />
			<Link to='/profile'>
				<Button colorScheme='whatsapp'>Profile</Button>
			</Link>
			<Link to='/activity'>
				<Button colorScheme='whatsapp'>Activity</Button>
			</Link>

			{signerAddress !== "" && signerAddress !== undefined ? (
				<Button colorScheme='whatsapp' variant='solid'>
					{`${signerAddress.substr(0, 6)}...${signerAddress.substr(
						-6
					)}`}
				</Button>
			) : (
				<Button
					onClick={connect}
					colorScheme='whatsapp'
					variant='solid'>
					Connect Wallet
				</Button>
			)}
		</HStack>
	);
}

export default function NewAdPage() {
  const {t} = useTranslation()

  const router = useRouter()

  const coinbase = useCoinbase()

  const adFormRef = React.useRef()

  const previewAdRef = React.useRef()

  const previewDisclosure = useDisclosure()

  return (
    <Layout>
      <Page px={0} py={0} overflow="hidden">
        <Box flex={1} w="full" px={20} py={6} overflowY="auto">
          <PageHeader>
            <PageTitle mb={0}>{t('New ad')}</PageTitle>
            <PageCloseButton href="/adn/list" />
          </PageHeader>

          <AdForm
            ref={adFormRef}
            id="adForm"
            onSubmit={async ad => {
              await db.table('ads').add({
                ...ad,
                id: nanoid(),
                status: AdStatus.Draft,
                author: coinbase,
              })

              router.push('/adn/list?from=new&save=true')
            }}
          />
        </Box>

        <PageFooter>
          <SecondaryButton
            onClick={() => {
              const ad = Object.fromEntries(
                new FormData(adFormRef.current).entries()
              )

              previewAdRef.current = {
                ...ad,
                author: coinbase,
                thumb: ad.thumb && URL.createObjectURL(ad.thumb),
                media: ad.media && URL.createObjectURL(ad.media),
              }

              previewDisclosure.onOpen()
            }}
          >
            <HStack>
              <TriangleUpIcon boxSize="3" transform="rotate(90deg)" />
              <Text>{t('Show preview')}</Text>
            </HStack>
          </SecondaryButton>
          <PrimaryButton form="adForm" type="submit">
            {t('Save')}
          </PrimaryButton>
        </PageFooter>
      </Page>

      <AdPreview ad={previewAdRef.current} {...previewDisclosure} />
    </Layout>
  )
}

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

CartMenu = () => {
  const cartItems = useSelector(state => state.cart.cartItems) || [];
  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <Menu>
      <VStack position="relative">
        {cartItems.length > 0 && (
          <Box
            position="absolute"
            borderRadius="50%"
            right={-1}
            top={-1}
            p={1}
            zIndex={1}
            bg="red"
            color="white"
            fontSize="10"
          >
            {totalItems}
          </Box>
        )}
        <MenuButton
          as={IconButton}
          variant="ghost"
          size="md"
          fontSize="lg"
          icon={<MdShoppingCart />}
        ></MenuButton>
      </VStack>
      <MenuList p={2}>
        {cartItems.map(item => (
          <Link key={item.id} to={`/product/${item.id}`}>
            <MenuItem>
              <HStack>
                <Image
                  boxSize="2rem"
                  borderRadius="full"
                  src={item.image}
                  alt={item.title}
                  mr="12px"
                />
                <span>{item.title}</span>
              </HStack>
            </MenuItem>
          </Link>
        ))}
        {cartItems.length > 0 && (
          <MenuItem>
            <Box my={2} width="100%">
              <Link to="/cart">
                <Button isFullWidth colorScheme="teal">
                  Go To Cart
                </Button>
              </Link>
            </Box>
          </MenuItem>
        )}
        {cartItems.length === 0 && (
          <Box my={2} width="100%">
            <Text fontSize="xl">Your cart is empty :(</Text>
          </Box>
        )}
      </MenuList>
    </Menu>
  );
}

export default function EditAdPage() {
  const {t} = useTranslation()

  const router = useRouter()

  const {data: ad} = usePersistedAd(router.query.id)

  const coinbase = useCoinbase()

  const adFormRef = React.useRef()

  const previewAdRef = React.useRef()

  const previewDisclosure = useDisclosure()

  return (
    <Layout showHamburger={false}>
      <Page px={0} py={0} overflow="hidden">
        <Box flex={1} w="full" px={20} py={6} overflowY="auto">
          <PageHeader>
            <PageTitle mb={0}>{t('Edit ad')}</PageTitle>
            <PageCloseButton href="/adn/list" />
          </PageHeader>

          <AdForm
            ref={adFormRef}
            id="adForm"
            ad={ad}
            onSubmit={async nextAd => {
              await db.table('ads').update(ad.id, nextAd)
              router.push('/adn/list')
            }}
          />
        </Box>

        <PageFooter>
          <SecondaryButton
            onClick={async () => {
              const currentAd = Object.fromEntries(
                new FormData(adFormRef.current).entries()
              )

              previewAdRef.current = {
                ...ad,
                ...currentAd,
                author: ad.author ?? coinbase,
                thumb: isValidImage(currentAd.thumb)
                  ? URL.createObjectURL(currentAd.thumb)
                  : ad.thumb,
                media: isValidImage(currentAd.media)
                  ? URL.createObjectURL(currentAd.media)
                  : ad.media,
              }

              previewDisclosure.onOpen()
            }}
          >
            <HStack>
              <TriangleUpIcon boxSize="3" transform="rotate(90deg)" />
              <Text>{t('Show preview')}</Text>
            </HStack>
          </SecondaryButton>
          <PrimaryButton form="adForm" type="submit">
            {t('Save')}
          </PrimaryButton>
        </PageFooter>
      </Page>

      <AdPreview ad={previewAdRef.current} {...previewDisclosure} />
    </Layout>
  )
}

ReportVersionModalDialog = ({ projectId, isOpen, onSubmit, onCancel }) => {
    const defaultFormValues = { reportTemplateId: 0, name: "", description: "" };
    const [formValues, setFormValues] = useState(defaultFormValues);
    const [templates] = useFetch('/reports/templates');

    const onFormValueChange = ev => {
        ev.preventDefault();

        setFormValues({ ...formValues, [ev.target.name]: ev.target.value });
    };

    const beforeCancelCallback = ev => {
        setFormValues(defaultFormValues);
        onCancel(ev);
    }

    const onFormSubmit = ev => {
        ev.preventDefault();

        const params = {
            projectId: projectId,
            reportTemplateId: formValues.reportTemplateId,
            name: formValues.name,
            description: formValues.description
        };

        secureApiFetch(`/reports`, { method: 'POST', body: JSON.stringify(params) })
            .then(() => {
                onSubmit();
                actionCompletedToast(`The report version "${formValues.name}" has been added.`);
            })
            .catch(err => {
                console.error(err);
            })
            .finally(() => {
                setFormValues(defaultFormValues)
            })
    }

    useEffect(() => {
        if (templates !== null && templates.length > 0) {
            setFormValues((prev) => ({ ...prev, reportTemplateId: templates[0].id }))
        }
    }, [templates]);

    return <Modal size="xl" isOpen={isOpen} onClose={beforeCancelCallback}>
        <ModalOverlay />
        <ModalContent>
            <ModalHeader><HStack><TargetIcon style={{ width: '24px' }} /> <h4>New report version details</h4></HStack></ModalHeader>
            <ModalCloseButton />
            <ModalBody>
                <form id="reportVersionReportForm" onSubmit={onFormSubmit} className="crud" style={{ marginTop: '20px' }}>
                    <FormControl isRequired>
                        <FormLabel>Template</FormLabel>
                        {templates && <Select name="reportTemplateId" value={formValues.reportTemplateId} onChange={onFormValueChange}>
                            {templates.map(template => <option key={template.id} value={template.id}>{template.version_name}</option>)}
                        </Select>}
                    </FormControl>

                    <FormControl isRequired>
                        <FormLabel>Name</FormLabel>
                        <Input type="text" name="name" value={formValues.name} onChange={onFormValueChange}
                            placeholder="eg 1.0, 202103" autoFocus />
                    </FormControl>

                    <FormControl isRequired>
                        <FormLabel>Description</FormLabel>
                        <Input type="text" name="description" value={formValues.description}
                            onChange={onFormValueChange}
                            placeholder="eg Initial version, Draft"
                        />
                    </FormControl>
                </form>
            </ModalBody>

            <ModalFooter>
                <Button onClick={beforeCancelCallback} mr={3}>Cancel</Button>
                <Button form="reportVersionReportForm" type="submit" colorScheme="blue">Save</Button>
            </ModalFooter>
        </ModalContent>
    </Modal>
}

function InformationCards({
	author,
	loadingClaim,
	dateOfIncident,
	ipfsHash,
	yesVotes,
	noVotes,
	rainData,
	memberData,
}) {
	const voters = [""];

	const [openWeatherStats, setOpenWeatherStats] = useState();

	useEffect(() => {
		async function init() {
			let response = await axios.get(
				"https://api.openweathermap.org/data/2.5/onecall/timemachine?lat=32.21&lon=76.32&exclude=minutely,hourly&appid=162ac7d2a16586444f5b2e968f020e4c&dt=1628319601"
			);
			setOpenWeatherStats(response.data.hourly);
		}
		init();
	}, []);

	return (
		<VStack spacing={5}>
			<Card cardTitle='Information'>
				<HStack width='100%'>
					<Text fontWeight='600'>Author</Text>
					<Spacer />
					{loadingClaim ? (
						<Skeleton isLoaded={!loadingClaim}>Author</Skeleton>
					) : (
						<Text>{`${author.substr(0, 7)}...${author.substr(
							-7
						)}`}</Text>
					)}
				</HStack>
				<HStack width='100%'>
					<Text fontWeight='600'>IPFS</Text>
					<Spacer />
					{loadingClaim ? (
						<Skeleton isLoaded={!loadingClaim}>IPFS hash</Skeleton>
					) : (
						<HStack>
							<a
								href={`https://ipfs.io/ipfs/` + ipfsHash}
								target='_blank'>
								<Text>
									{" "}
									{`${ipfsHash.substr(
										0,
										7
									)}...${ipfsHash.substr(-7)}`}{" "}
								</Text>

								<FaExternalLinkAlt size='10px' />
							</a>
						</HStack>
					)}
				</HStack>
				<HStack width='100%'>
					<Text fontWeight='600'>Member location</Text>
					<Spacer />
					{loadingClaim ? (
						<Skeleton isLoaded={!loadingClaim}>Author</Skeleton>
					) : (
						<a
							target='_blank'
							href={
								`https://www.google.co.in/maps/@` +
								memberData.lat +
								`,` +
								memberData.long
							}>
							Map
						</a>
					)}
				</HStack>
			</Card>
			<Card cardTitle='Time'>
				<VStack width='100%'>
					<HStack width='100%'>
						<Text fontWeight='600'>Date Of Incident</Text>
						<Spacer />
						{loadingClaim ? (
							<Skeleton isLoaded={!loadingClaim}>
								Date Of Incident
							</Skeleton>
						) : (
							<HStack>
								<Text>{dateOfIncident}</Text>
							</HStack>
						)}
					</HStack>
				</VStack>
			</Card>
			<ChainlinkCard cardTitle=''>
				<VStack width='100%'>
					<HStack width='100%'>
						<Text fontWeight='600'>Rain data : </Text>
						<Text fontWeight='600'>{rainData} mm</Text>

						<Spacer />
					</HStack>
				</VStack>
			</ChainlinkCard>
			<Card cardTitle='Current Results'>
				<VStack width='100%'>
					<HStack width='100%'>
						<Text fontWeight='600'>Yes</Text>
						<Spacer />
						{loadingClaim ? (
							<Skeleton>vote percent</Skeleton>
						) : (
							<Text fontWeight='600'>
								{(yesVotes / (yesVotes + noVotes)) * 100
									? (yesVotes / (yesVotes + noVotes)) * 100
									: "0"}
								%
							</Text>
						)}
					</HStack>
					<Progress
						width='100%'
						borderRadius='20px'
						background='gray.300'
						height='10px'
						value={
							loadingClaim
								? 0
								: (yesVotes / (yesVotes + noVotes)) * 100
						}
						colorScheme='green'
						size='lg'
					/>
					<HStack width='100%'>
						<Text fontWeight='600'>No</Text>
						<Spacer />
						{loadingClaim ? (
							<Skeleton>vote percent</Skeleton>
						) : (
							<Text fontWeight='600'>
								{(noVotes / (yesVotes + noVotes)) * 100
									? (noVotes / (yesVotes + noVotes)) * 100
									: "0"}
								%
							</Text>
						)}
					</HStack>
					<Progress
						width='100%'
						borderRadius='20px'
						background='gray.300'
						height='10px'
						value={
							loadingClaim ? 0 : noVotes / (yesVotes + noVotes)
						}
						colorScheme='green'
						size='lg'
					/>
				</VStack>
			</Card>
			<Card cardTitle='OpenWeather Analysis'>
				{openWeatherStats ? (
					<>
						{openWeatherStats.map((stat) => {
							return (
								<HStack width='100%'>
									<Text>
										{new Date(parseInt(stat.dt) * 1000)
											.toTimeString()
											.substr(0, 5)}
									</Text>
									<Text>
										{stat.weather[0].description[0].toUpperCase() +
											stat.weather[0].description.substr(
												1
											)}
									</Text>
									<Spacer />
									<Image
										src={`http://openweathermap.org/img/wn/${stat.weather[0].icon}.png`}
									/>
								</HStack>
							);
						})}
					</>
				) : (
					<Spinner margin='auto' />
				)}
			</Card>

			<Card cardTitle='Votes'>
				<VStack width='100%' alignItems='flex-start'>
					{loadingClaim ? (
						<HStack justifyContent='space-between' width='100%'>
							<HStack>
								<SkeletonCircle />
								<Skeleton>Address that voted</Skeleton>
							</HStack>
							<Skeleton>Vote</Skeleton>
							<Skeleton>Voting Power</Skeleton>
						</HStack>
					) : (
						<>
							{voters.map((voter) => {
								return (
									<HStack
										justifyContent='space-between'
										width='100%'
										key={0}>
										<HStack>
											<Avatar
												size='xs'
												icon={
													<Jazzicon
														diameter='24'
														address='0x8Cf24E66d1DC40345B1bf97219856C8140Ce6c69'
													/>
												}
											/>
											<Tag>{`${"0x8Cf24E66d1DC40345B1bf97219856C8140Ce6c69".substr(
												0,
												6
											)}...${"0x8Cf24E66d1DC40345B1bf97219856C8140Ce6c69".substr(
												-5
											)}`}</Tag>
										</HStack>
										<Tag colorScheme='whatsapp'>Yes</Tag>
										<Text>300 DIx</Text>
									</HStack>
								);
							})}
						</>
					)}
				</VStack>
			</Card>
		</VStack>
	);
}

export default function Header({
  injectedProvider,
  userRole,
  address,
  mainnetProvider,
  userProvider,
  loadWeb3Modal,
  logoutOfWeb3Modal,
  setUserRole,
}) {
  const { secondaryFontColor, borderColor } = useCustomColorModes();
  const primaryColorString = useColorModeValue("var(--chakra-colors-gray-700)", "var(--chakra-colors-gray-200)");
  const isSignerProviderConnected =
    injectedProvider && injectedProvider.getSigner && injectedProvider.getSigner()._isSigner;
  const userIsRegistered = userRole && USER_ROLES.anonymous !== userRole;

  return (
    <Box
      borderBottom="1px"
      borderColor={borderColor}
      mb={10}
      px={{ base: 4, lg: 8 }}
      h={{ base: userIsRegistered ? "120px" : "80px", lg: "80px" }}
    >
      {ENVIRONMENT !== "production" && (
        <Box pos="fixed" p="2px" fontSize={14} w="100%" bgColor="yellow.200" left={0} textAlign="center">
          Working on a {ENVIRONMENT} environment.
        </Box>
      )}
      <Flex
        align={{ base: userIsRegistered ? "start" : "center", lg: "center" }}
        h="full"
        fontWeight="semibold"
        pos="relative"
      >
        <Flex shrink={0} mr={9} mt={{ base: userIsRegistered ? 5 : 0, lg: 0 }}>
          <NavLink to="/" exact>
            <span role="img" aria-label="castle icon">
              ?‍♀️
            </span>{" "}
            <chakra.strong display={{ base: "none", md: "inline-block" }}>SpeedRunEthereum.com</chakra.strong>
            <chakra.strong display={{ base: "inline-block", md: "none" }}>
              {isSignerProviderConnected ? "SRE" : "SpeedRunEthereum.com"}
            </chakra.strong>
          </NavLink>
        </Flex>
        <HStack
          as="ul"
          mr={{ base: 0, lg: 6 }}
          style={{ listStyle: "none" }}
          spacing={{ base: 6, lg: 9 }}
          pos={{ base: "absolute", lg: "static" }}
          justifyContent={{ base: "center", lg: "left" }}
          top="80px"
          left={0}
        >
          {userRole && USER_ROLES.anonymous !== userRole && (
            <chakra.li key="/portfolio" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
              <NavLink
                to="/portfolio"
                isActive={(match, location) => location.pathname.includes("/builders/")}
                activeStyle={{
                  color: primaryColorString,
                }}
              >
                Portfolio
              </NavLink>
            </chakra.li>
          )}
          {/* ToDo. At least Builder */}
          {(USER_ROLES.builder === userRole || USER_ROLES.admin === userRole) && (
            <>
              <chakra.li key="/builders" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
                <NavLink
                  to="/builders"
                  exact
                  activeStyle={{
                    color: primaryColorString,
                  }}
                >
                  Builders
                </NavLink>
              </chakra.li>
            </>
          )}
          {USER_ROLES.admin === userRole && (
            <>
              <chakra.li key="/submission-review" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
                <NavLink
                  to="/submission-review"
                  exact
                  activeStyle={{
                    color: primaryColorString,
                  }}
                >
                  Review Submissions
                </NavLink>
              </chakra.li>
              <chakra.li key="/activity" color={secondaryFontColor} _hover={{ color: primaryColorString }}>
                <NavLink
                  to="/activity"
                  exact
                  activeStyle={{
                    color: primaryColorString,
                  }}
                >
                  Activity
                </NavLink>
              </chakra.li>
            </>
          )}
        </HStack>
        <Spacer />
        <Box mt={{ base: userIsRegistered ? 3 : 0, lg: 0 }}>
          <Account
            address={address}
            connectText="Connect Wallet"
            ensProvider={mainnetProvider}
            isWalletConnected={isSignerProviderConnected}
            loadWeb3Modal={loadWeb3Modal}
            logoutOfWeb3Modal={() => {
              logoutOfWeb3Modal();
              setUserRole(null);
            }}
            setUserRole={setUserRole}
            userProvider={userProvider}
            userRole={userRole}
          />
        </Box>
      </Flex>
    </Box>
  );
}

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 BuilderProfileView({ serverUrl, mainnetProvider, address, userProvider, userRole }) {
  const { builderAddress } = useParams();
  const { primaryFontColor, secondaryFontColor, borderColor, iconBgColor } = useCustomColorModes();
  const [builder, setBuilder] = useState();
  const [challengeEvents, setChallengeEvents] = useState([]);
  const [isLoadingBuilder, setIsLoadingBuilder] = useState(false);
  const [isBuilderOnBg, setIsBuilderOnBg] = useState(false);
  const [isLoadingTimestamps, setIsLoadingTimestamps] = useState(false);
  const toast = useToast({ position: "top", isClosable: true });
  const toastVariant = useColorModeValue("subtle", "solid");
  const challenges = builder?.challenges ? Object.entries(builder.challenges) : undefined;
  const acceptedChallenges = getAcceptedChallenges(builder?.challenges);
  const isMyProfile = builderAddress === address;

  const fetchBuilder = async () => {
    setIsLoadingBuilder(true);
    const fetchedBuilder = await axios.get(serverUrl + `/builders/${builderAddress}`);
    setBuilder(fetchedBuilder.data);

    try {
      await axios.get(bgBackendUrl + `/builders/${builderAddress}`);
    } catch (e) {
      // Builder Not found in BG
      setIsLoadingBuilder(false);
      return;
    }

    setIsBuilderOnBg(true);
    setIsLoadingBuilder(false);
  };

  useEffect(() => {
    fetchBuilder();
    // eslint-disable-next-line
  }, [builderAddress]);

  useEffect(() => {
    if (!builderAddress) {
      return;
    }

    async function fetchChallengeEvents() {
      setIsLoadingTimestamps(true);
      try {
        const fetchedChallengeEvents = await getChallengeEventsForUser(builderAddress);
        setChallengeEvents(fetchedChallengeEvents.sort(byTimestamp).reverse());
        setIsLoadingTimestamps(false);
      } catch (error) {
        toast({
          description: "Can't get challenges metadata. Please try again",
          status: "error",
          variant: toastVariant,
        });
      }
    }
    fetchChallengeEvents();
    // eslint-disable-next-line
  }, [builderAddress]);

  return (
    <Container maxW="container.xl">
      <SimpleGrid gap={14} columns={{ base: 1, xl: 4 }}>
        <GridItem colSpan={1}>
          <BuilderProfileCard
            builder={builder}
            mainnetProvider={mainnetProvider}
            isMyProfile={isMyProfile}
            userProvider={userProvider}
            fetchBuilder={fetchBuilder}
            userRole={userRole}
          />
        </GridItem>
        {isBuilderOnBg ? (
          <GridItem colSpan={{ base: 1, xl: 3 }}>
            <Box borderColor={borderColor} borderWidth={1} p={5}>
              <Flex direction="column" align="center" justify="center">
                <Image src="/assets/bg.png" mb={3} />
                <Text mb={3} fontSize="lg" fontWeight="bold">
                  This builder has upgraded to BuidlGuidl.
                </Text>
                <Button as={Link} href={`${BG_FRONTEND_URL}/builders/${builderAddress}`} isExternal colorScheme="blue">
                  View their profile on Buidlguidl
                </Button>
              </Flex>
            </Box>
          </GridItem>
        ) : (
          <GridItem colSpan={{ base: 1, xl: 3 }}>
            <HStack spacing={4} mb={8}>
              <Flex borderRadius="lg" borderColor={borderColor} borderWidth={1} p={4} w="full" justify="space-between">
                <Flex bg={iconBgColor} borderRadius="lg" w={12} h={12} justify="center" align="center">
                  <InfoOutlineIcon w={5} h={5} />
                </Flex>
                <div>
                  <Text fontSize="xl" fontWeight="medium" textAlign="right">
                    {acceptedChallenges.length}
                  </Text>
                  <Text fontSize="sm" color={secondaryFontColor} textAlign="right">
                    challenges completed
                  </Text>
                </div>
              </Flex>
              <Flex borderRadius="lg" borderColor={borderColor} borderWidth={1} p={4} w="full" justify="space-between">
                <Flex bg={iconBgColor} borderRadius="lg" w={12} h={12} justify="center" align="center">
                  <InfoOutlineIcon w={5} h={5} />
                </Flex>
                <div>
                  <Text fontSize="xl" fontWeight="medium" textAlign="right">
                    {builder?.function ? (
                      <Tag colorScheme={userFunctionDescription[builder?.function].colorScheme} variant="solid">
                        {userFunctionDescription[builder?.function].label}
                      </Tag>
                    ) : (
                      "-"
                    )}
                  </Text>
                  <Text fontSize="sm" color={secondaryFontColor} textAlign="right">
                    Role
                  </Text>
                </div>
              </Flex>
            </HStack>
            <Flex mb={4}>
              <Text fontSize="2xl" fontWeight="bold">
                Challenges
              </Text>
              <Spacer />
            </Flex>
            {isLoadingBuilder && <BuilderProfileChallengesTableSkeleton />}
            {!isLoadingBuilder &&
              (challenges ? (
                <Box overflowX="auto">
                  <Table>
                    {isMyProfile && (
                      <TableCaption>
                        <Button as={RouteLink} colorScheme="blue" to="/">
                          Start a challenge
                        </Button>
                      </TableCaption>
                    )}
                    <Thead>
                      <Tr>
                        <Th>Name</Th>
                        <Th>Contract</Th>
                        <Th>Live Demo</Th>
                        <Th>Updated</Th>
                        <Th>Status</Th>
                      </Tr>
                    </Thead>
                    <Tbody>
                      {challenges.map(([challengeId, lastSubmission]) => {
                        if (!challengeInfo[challengeId]) {
                          return null;
                        }
                        const lastEventForChallenge = challengeEvents.filter(
                          event => event.payload.challengeId === challengeId,
                        )[0];
                        return (
                          <Tr key={challengeId}>
                            <Td>
                              <Link as={RouteLink} to={`/challenge/${challengeId}`} fontWeight="700" color="teal.500">
                                {challengeInfo[challengeId].label}
                              </Link>
                            </Td>
                            <Td>
                              <Link
                                // Legacy branchUrl
                                href={lastSubmission.contractUrl || lastSubmission.branchUrl}
                                color="teal.500"
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                Code
                              </Link>
                            </Td>
                            <Td>
                              <Link
                                href={lastSubmission.deployedUrl}
                                color="teal.500"
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                Demo
                              </Link>
                            </Td>
                            <Td>
                              {isLoadingTimestamps ? (
                                <SkeletonText noOfLines={1} />
                              ) : (
                                <DateWithTooltip timestamp={lastEventForChallenge?.timestamp} />
                              )}
                            </Td>
                            <Td>
                              <ChallengeStatusTag
                                status={lastSubmission.status}
                                comment={lastSubmission.reviewComment}
                                autograding={lastSubmission.autograding}
                              />
                            </Td>
                          </Tr>
                        );
                      })}
                    </Tbody>
                  </Table>
                </Box>
              ) : (
                <Flex
                  justify="center"
                  align="center"
                  borderRadius="lg"
                  borderColor={borderColor}
                  borderWidth={1}
                  py={36}
                  w="full"
                >
                  {isMyProfile ? (
                    <Box maxW="xs" textAlign="center">
                      <Text fontWeight="medium" color={primaryFontColor} mb={2}>
                        Start a new challenge
                      </Text>
                      <Text color={secondaryFontColor} mb={4}>
                        Show off your skills. Learn everything you need to build on Ethereum!
                      </Text>
                      <Button as={RouteLink} colorScheme="blue" to="/">
                        Start a challenge
                      </Button>
                    </Box>
                  ) : (
                    <Box maxW="xs" textAlign="center">
                      <Text color={secondaryFontColor} mb={4}>
                        This builder hasn't completed any challenges.
                      </Text>
                    </Box>
                  )}
                </Flex>
              ))}
          </GridItem>
        )}
      </SimpleGrid>
    </Container>
  );
}

ProjectsList = () => {
    const navigate = useNavigate();
    const query = useQuery();
    let pageNumber = query.get('page');
    pageNumber = pageNumber !== null ? parseInt(pageNumber) : 1;
    const apiPageNumber = pageNumber - 1;

    const [numberPages, setNumberPages] = useState(1);
    const [totalCount, setTotalCount] = useState('?');

    const [projects, setProjects] = useState([]);
    const [statusFilter, setStatusFilter] = useState('active');

    const handleCreateProject = () => {
        navigate('/projects/create')
    }

    const onStatusFilterChange = ev => {
        setStatusFilter(ev.target.value);
    }

    const onPageChange = pageNumber => {
        const queryParams = new URLSearchParams();
        queryParams.set('page', pageNumber + 1);
        const url = `/projects?${queryParams.toString()}`;
        navigate(url);
    }

    const reloadProjects = useCallback(() => {
        setProjects(null);

        const queryParams = new URLSearchParams();
        queryParams.set('page', apiPageNumber);
        if (statusFilter.length) {
            queryParams.set('status', statusFilter);
        }
        const url = `/projects?${queryParams.toString()}`;

        secureApiFetch(url)
            .then(resp => {
                if (resp.headers.has('X-Page-Count')) {
                    setNumberPages(resp.headers.get('X-Page-Count'))
                }
                if (resp.headers.has('X-Total-Count')) {
                    setTotalCount(resp.headers.get('X-Total-Count'))
                }
                return resp.json()
            })
            .then(projects => {
                setProjects(projects);
            });
    }, [apiPageNumber, statusFilter])

    const destroy = useDelete('/projects/', reloadProjects);

    useEffect(() => {
        reloadProjects();
    }, [statusFilter, reloadProjects]);

    return <div>
        <PageTitle value="Projects" />
        <div className='heading'>
            <Breadcrumb />
            <PaginationV2 page={apiPageNumber} total={numberPages} onPageChange={onPageChange} />

            <HStack>
                <RestrictedComponent roles={['administrator', 'superuser', 'user']}>
                    <CreateButton onClick={handleCreateProject}>Create project</CreateButton>
                </RestrictedComponent>
            </HStack>
        </div>
        <Title title={`Projects (${totalCount})`} icon={<IconFolder />} />

        <Flex>
            <details>
                <summary>Filters</summary>
                <div className='space-x-2 mx-auto flex items-center'>
                    <div>
                        <label>Status
                            <Select onChange={onStatusFilterChange} defaultValue="active">
                                <option value="">(any)</option>
                                <option value="active">Active</option>
                                <option value="archived">Archived</option>
                            </Select>
                        </label>
                    </div>
                </div>
            </details>
        </Flex>
        <ProjectsTable projects={projects} destroy={destroy} />
    </div>
}

function Profile() {
	const web3Context = useContext(Web3Context);
	const {
		signerAddress,
		userDaoTokenBalance,
		fetchProposals,
		fetchVotedProposals,
		proposalsArray,
		votedProposalsArray,
	} = web3Context;

	const [daoTokenBalance, setDaoTokenBalance] = useState(0);
	const [stable, setStable] = useState(false);

	useEffect(() => {
		setInterval(async () => {
			setDaoTokenBalance(await userDaoTokenBalance());
		}, 10000);
	}, []);

	useEffect(() => {
		fetchProposals();
		fetchVotedProposals();
	}, [stable]);

	function con() {
		console.log(proposalsArray);
	}

	return (
		<VStack
			alignItems='flex-start'
			height='calc(100vh - 64px)'
			px='250px'
			py='20px'
			width='100%'>
			<HStack width='100%' alignItems='flex-start'>
				<Box
					borderWidth='2px'
					borderRadius='full'
					borderColor='whatsapp.500'
					padding='2px'>
					<Avatar
						size='md'
						icon={
							<Jazzicon
								diameter='48'
								address={`${signerAddress}`}
							/>
						}
					/>
				</Box>
				<VStack alignItems='flex-start'>
					<Heading fontSize='20px'>{signerAddress}</Heading>
					<Tag>10DAIx / month</Tag>
				</VStack>
				<Spacer />
				<VStack>
					<Tag>INSURE Tokens : {daoTokenBalance}</Tag>
				</VStack>
			</HStack>
			<Grid
				width='100%'
				mt='30px !important'
				templateColumns='3fr 2fr'
				gridGap={5}
				alignItems='flex-start'>
				<Tabs
					colorScheme='whatsapp'
					variant='soft-rounded'
					width='100%'>
					<TabList>
						<Tab onClick={con}>
							Claims{" "}
							<Tag ml={2} borderRadius='20px'>
								{proposalsArray.length}
							</Tag>
						</Tab>
						<Tab>
							Voted For
							<Tag ml={2} borderRadius='20px'>
								{votedProposalsArray.length}
							</Tag>
						</Tab>
					</TabList>
					<TabPanels>
						<TabPanel mt={3} padding={0}>
							<Card cardTitle='Claims'>
								<Table>
									<Tbody>
										{proposalsArray.map(function (
											element,
											id
										) {
											return (
												<Tr key={id}>
													<Th>
														{" "}
														{element[0].toNumber()}{" "}
													</Th>
													<Th>{element[2]}</Th>
													<Th>
														{element[7] ? (
															<span>
																{" "}
																Passed{" "}
															</span>
														) : (
															<span>
																{" "}
																Failed{" "}
															</span>
														)}
													</Th>
												</Tr>
											);
										})}
									</Tbody>
								</Table>
							</Card>
						</TabPanel>
						<TabPanel mt={3} padding={0}>
							<Card cardTitle='Claims'>
								<Table>
									<Tbody>
										{votedProposalsArray.map(function (
											element,
											id
										) {
											return (
												<Tr key={id}>
													<Th>
														{" "}
														{element[0].toNumber()}{" "}
													</Th>
													<Th>{element[2]}</Th>
													<Th>
														{element[7] ? (
															<span>
																{" "}
																Passed{" "}
															</span>
														) : (
															<span>
																{" "}
																Failed{" "}
															</span>
														)}
													</Th>
												</Tr>
											);
										})}
									</Tbody>
								</Table>
							</Card>
						</TabPanel>
					</TabPanels>
				</Tabs>
			</Grid>
		</VStack>
	);
}

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

TaskDetails = () => {
    const loggedInUser = Auth.getLoggedInUser();
    const navigate = useNavigate();
    const { taskId } = useParams();
    const [task, fetchTask] = useFetch(`/tasks/${taskId}`)
    const [users] = useFetch(`/users`)
    const [project, setProject] = useState(null);
    const [command, setCommand] = useState(null);

    const parentType = 'task';
    const parentId = taskId;
    const [attachments, reloadAttachments] = useFetch(`/attachments?parentType=${parentType}&parentId=${parentId}`)

    const destroy = useDelete('/tasks/', fetchTask);

    const handleDelete = () => {
        destroy(task.id);
        navigate('/tasks');
    }

    const onAssigneeChange = ev => {
        const assigneeUid = ev.target.value;
        secureApiFetch(`/tasks/${task.id}`, {
            method: 'PATCH',
            body: JSON.stringify({ assignee_uid: '' === assigneeUid ? null : assigneeUid })
        })
            .then(() => {
                actionCompletedToast("The assignee has been updated.");
                fetchTask()
            })
            .catch(err => console.error(err))
    }

    const onStatusChange = ev => {
        const status = ev.target.value;
        secureApiFetch(`/tasks/${task.id}`, {
            method: 'PATCH',
            body: JSON.stringify({ status: status })
        })
            .then(() => {
                actionCompletedToast("The status has been transitioned.");
                fetchTask()
            })
            .catch(err => console.error(err))
    }

    useEffect(() => {
        if (task) {
            if (task.command_id) {
                secureApiFetch(`/commands/${task.command_id}`, { method: 'GET' })
                    .then(resp => resp.json())
                    .then(command => setCommand(command))
                    .catch(err => console.error(err))
            }

            secureApiFetch(`/projects/${task.project_id}`, { method: 'GET' })
                .then(resp => resp.json())
                .then(project => setProject(project))
                .catch(err => console.error(err))
        }
    }, [task])

    return <div>
        <div className="heading">
            <Breadcrumb>
                <Link to="/tasks">Tasks</Link>
                {project && <Link to={`/projects/${project.id}`}>{project.name}</Link>}
            </Breadcrumb>
            {task && users &&
                <HStack alignItems='flex-end'>
                    <RestrictedComponent roles={['administrator', 'superuser', 'user']}>
                        <Link to={`/tasks/${task.id}/edit`}>Edit</Link>
                        <label>Transition to&nbsp;
                            <Select onChange={onStatusChange} value={task.status}>
                                {TaskStatuses.map((status, index) =>
                                    <option key={index} value={status.id}>{status.name}</option>
                                )}
                            </Select>
                        </label>
                        <DeleteButton onClick={() => handleDelete(task.id)} />
                    </RestrictedComponent>
                </HStack>
            }
        </div>
        {!task ? <Loading /> :
            <article>
                <PageTitle value={`${task.summary} task`} />

                <Title title={task.summary} type='Task' icon={<IconClipboard />} />

                <Tabs>
                    <TabList>
                        <Tab>Details</Tab>
                        {null !== command && <Tab>Command instructions</Tab>}
                        <Tab>Attachments</Tab>
                    </TabList>
                    <TabPanels>
                        <TabPanel>
                            <div className="grid grid-two">
                                <div>
                                    <h4>Description</h4>
                                    {task.description ? <ReactMarkdown>{task.description}</ReactMarkdown> : <EmptyField />}
                                    <h4>Priority</h4>
                                    <p>{task.priority}</p>
                                    <h4>Status</h4>
                                    <p style={{ display: 'flex', alignItems: 'center', columnGap: 'var(--margin)' }}>
                                        <TaskStatusFormatter task={task} />
                                    </p>
                                    {task.command_id && <>
                                        <h4>Command</h4>
                                        <CommandBadge command={{ id: task.command_id, name: task.command_name }} />
                                    </>}
                                </div>

                                <div>
                                    <h4>People</h4>
                                    <dl>
                                        <dt>Created by</dt>
                                        <dd><UserLink userId={task.creator_uid}>{task.creator_full_name}</UserLink></dd>

                                        <dt>Assigned to</dt>
                                        <dd>
                                            {users &&
                                                <Select onChange={onAssigneeChange} defaultValue={task.assignee_uid}>
                                                    <option value="">(nobody)</option>
                                                    {users.map((user, index) =>
                                                        <option key={index} value={user.id}>{user.full_name}{user.id === loggedInUser.id ? " (You)" : ""}</option>
                                                    )}
                                                </Select>}
                                        </dd>
                                    </dl>

                                    <TimestampsSection entity={task} />
                                    {task.due_date &&
                                        <dl>
                                            <dt>Due date</dt>
                                            <dd><RelativeDateFormatter date={task.due_date} /></dd>
                                        </dl>
                                    }
                                </div>
                            </div>
                        </TabPanel>
                        {null !== command && <TabPanel>
                            <CommandInstructions command={command} task={task} />
                        </TabPanel>}
                        <TabPanel>
                            <AttachmentsDropzone parentType={parentType} parentId={parentId} onUploadFinished={reloadAttachments} />

                            <h4><IconDocument />Attachment list</h4>
                            <AttachmentsTable attachments={attachments} reloadAttachments={reloadAttachments} />
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </article>
        }
    </div>
}

Component = () => {
  const data = { nodes };

  const chakraTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(chakraTheme);

  const [hiddenColumns, setHiddenColumns] = React.useState(['DEADLINE', 'COMPLETE']);

  const toggleColumn = (column) => {
    if (hiddenColumns.includes(column)) {
      setHiddenColumns(hiddenColumns.filter((v) => v !== column));
    } else {
      setHiddenColumns(hiddenColumns.concat(column));
    }
  };

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name, hide: hiddenColumns.includes('TASK') },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      hide: hiddenColumns.includes('DEADLINE'),
    },
    { label: 'Type', renderCell: (item) => item.type, hide: hiddenColumns.includes('TYPE') },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      hide: hiddenColumns.includes('COMPLETE'),
    },
    {
      label: 'Tasks',
      renderCell: (item) => item.nodes?.length,
      hide: hiddenColumns.includes('TASKS'),
    },
  ];

  return (
    <>
      <HStack spacing={10}>
        <Checkbox
          colorScheme="teal"
          isChecked={!hiddenColumns.includes('NAME')}
          onChange={() => toggleColumn('NAME')}
        >
          Name
        </Checkbox>
        <Checkbox
          colorScheme="teal"
          isChecked={!hiddenColumns.includes('DEADLINE')}
          onChange={() => toggleColumn('DEADLINE')}
        >
          Deadline
        </Checkbox>
        <Checkbox
          colorScheme="teal"
          isChecked={!hiddenColumns.includes('TYPE')}
          onChange={() => toggleColumn('TYPE')}
        >
          Type
        </Checkbox>
        <Checkbox
          colorScheme="teal"
          isChecked={!hiddenColumns.includes('COMPLETE')}
          onChange={() => toggleColumn('COMPLETE')}
        >
          Complete
        </Checkbox>
        <Checkbox
          colorScheme="teal"
          isChecked={!hiddenColumns.includes('TASKS')}
          onChange={() => toggleColumn('TASKS')}
        >
          Tasks
        </Checkbox>
      </HStack>
      <br />

      <Box p={3} borderWidth="1px" borderRadius="lg">
        <CompactTable columns={COLUMNS} data={data} theme={theme} layout={{ hiddenColumns }} />
      </Box>

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}