@chakra-ui/react#LinkOverlay JavaScript Examples

function AdBannerContent({ad}) {
  return (
    <LinkBox as={HStack} spacing={2}>
      <AdImage src={ad?.thumb} w={10} />
      <Stack spacing="0.5" fontWeight={500} maxW={['2xs', 'lg']}>
        <LinkOverlay href={ad?.url} target="_blank">
          <Text lineHeight={4} isTruncated>
            {ad?.title}
          </Text>
        </LinkOverlay>
        <Text fontSize="sm" color="muted" lineHeight={4} isTruncated>
          {ad?.desc}
        </Text>
      </Stack>
    </LinkBox>
  )
}

SourceCode = () => {
  const links = [
    {
      name: 'blobs.app',
      icon: GithubIcon,
      link: 'https://github.com/lokesh-coder/blobs.app',
      desc: "Blobs application's source",
    },
    {
      name: 'Blob generator',
      desc: 'Create fixed blob shape using seed',
      icon: GithubIcon,
      link: 'https://github.com/lokesh-coder/blobshape',
    },
    {
      name: 'Flutter blobs',
      desc: 'Generate blobs for Flutter apps',
      icon: GithubIcon,
      link: 'https://github.com/lokesh-coder/flutter_blobs',
    },
    {
      name: 'blobshape',
      desc: 'Node package of blob generator',
      icon: NpmIcon,
      link: 'https://www.npmjs.com/package/blobshape',
    },
    {
      name: 'blobs',
      desc: 'Dart package for blob generator',
      icon: FlutterIcon,
      link: 'https://pub.dev/packages/blobs',
    },
  ];
  return (
    <Box>
      {links.map((link, index) => (
        <>
          <Box
            py="3"
            px="2"
            rounded="lg"
            _hover={{
              transform: 'scale(1.05)',
              transition: 'all 0.5s ease',
              bg: 'rgba(0,0,0,0.1)',
            }}
          >
            <LinkBox as="article">
              <Flex alignItems="center">
                <Box>
                  <link.icon fontSize="25px" color="gray.500" mr="5" />
                </Box>
                <Box flex="1" pr="2">
                  <LinkOverlay href={link.link} isExternal>
                    <Heading color="primary" fontSize="md">
                      {link.name}
                    </Heading>
                  </LinkOverlay>
                  <Text fontSize="sm">{link.desc}</Text>
                </Box>
                <Box>
                  <RightArrowIcon fontSize="20px" color="gray.400" />
                </Box>
              </Flex>
            </LinkBox>
          </Box>
          {index !== 4 && <Divider borderStyle="dashed" />}
        </>
      ))}
    </Box>
  );
}

SavedBlobs = ({ savedBlobs = [], deleteBlob, loadBlobs }) => {
  const cardHoverBg = useColorModeValue('gray.100', 'gray.700');
  useEffect(() => {
    if (!savedBlobs) loadBlobs();
  }, [savedBlobs]);
  return (
    <Box>
      {savedBlobs?.length === 0 && (
        <Box textAlign="center">
          <Text my="20" fontSize="2xl">
            No saved blobs found!
          </Text>
        </Box>
      )}
      <SimpleGrid
        columns={{ sm: 2, md: 4 }}
        spacing="40px"
        mb="20"
        justifyContent="center"
      >
        {savedBlobs?.map((blob) => (
          <LinkBox
            // h="200"
            rounded="2xl"
            p="5"
            borderWidth="1px"
            _hover={{ boxShadow: '2xl', background: cardHoverBg }}
            role="group"
          >
            <Text
              fontSize="sm"
              display="flex"
              alignItems="center"
              justifyContent="space-between"
            >
              <LinkOverlay
                style={{ textTransform: 'uppercase', fontWeight: 600 }}
                href={blob.url}
              >
                {blob.name}
              </LinkOverlay>
              <Button
                variant="unstyled"
                visibility="hidden"
                h="auto"
                _groupHover={{ visibility: 'visible' }}
                onClick={() => {
                  deleteBlob(blob.id);
                }}
              >
                <TrashIcon color="tomato" />
              </Button>
            </Text>
            <Divider mt="4" />

            <Blob {...blob} />
          </LinkBox>
        ))}
      </SimpleGrid>
    </Box>
  );
}

function AdPromotion({cid, title, desc, url, media, author}) {
  const {t, i18n} = useTranslation()

  const {data: burntCoins} = useBurntCoins()

  const orderedBurntCoins =
    burntCoins
      ?.sort((a, b) => b.amount - a.amount)
      .map(burn => ({...burn, ...AdBurnKey.fromHex(burn?.key)})) ?? []

  const maybeBurn = orderedBurntCoins.find(burn => burn.cid === cid)

  const formatDna = useFormatDna()

  return (
    <Stack
      spacing="10"
      bg="white"
      rounded="lg"
      px={10}
      pt={37}
      pb={44}
      w={400}
      h={660}
    >
      <Stack spacing="4">
        <Stack spacing="2">
          <Skeleton
            isLoaded={Boolean(title)}
            minH={5}
            w={title ? 'full' : 3 / 4}
          >
            <Heading
              as="h4"
              fontWeight="semibold"
              fontSize="md"
              lineHeight="5"
              isTruncated
            >
              {title}
            </Heading>
          </Skeleton>

          <Stack spacing="1.5" minH={62}>
            <Skeleton isLoaded={Boolean(desc)} minH={5}>
              <Text color="muted" fontSize="md" lineHeight="5">
                {desc}
              </Text>
            </Skeleton>
            <Skeleton isLoaded={Boolean(url)} w={1 / 4} h={4}>
              <ExternalLink
                href={url}
                fontWeight="semibold"
                display="flex"
                maxW="80"
                textProps={{h: '4', lineHeight: '4'}}
              >
                {url}
              </ExternalLink>
            </Skeleton>
          </Stack>
        </Stack>

        <LinkBox>
          <LinkOverlay href={url} isExternal>
            <AdImage src={media} w={320} />
          </LinkOverlay>
        </LinkBox>
      </Stack>
      <Stack spacing="6">
        <HStack spacing="10">
          <Stat>
            <AdStatLabel color="gray.500" fontWeight={500} lineHeight={4}>
              {t('Sponsored by')}
            </AdStatLabel>
            <AdStatNumber color="muted" fontSize="sm" mt="1.5" h="4">
              <HStack spacing="1" align="center">
                <Avatar address={author} boxSize={4} />
                <Text as="span" maxW="36" isTruncated>
                  {author}
                </Text>
              </HStack>
            </AdStatNumber>
          </Stat>
          <Stat>
            <AdStatLabel color="gray.500" fontWeight={500} lineHeight={4}>
              {t('Burnt, {{time}}', {
                time: new Intl.RelativeTimeFormat(i18n.language, {
                  style: 'short',
                }).format(24, 'hour'),
              })}
            </AdStatLabel>
            <AdStatNumber color="muted" fontSize="sm" mt="1.5" h="4">
              {formatDna(maybeBurn?.amount ?? 0)}
            </AdStatNumber>
          </Stat>
        </HStack>
        <SuccessAlert
          icon={<InfoIcon color="green.500" boxSize={5} mr={3} />}
          fontSize="md"
        >
          {t('Watching ads makes your coin valuable!')}
        </SuccessAlert>
      </Stack>
    </Stack>
  )
}

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

  const {lng} = useLanguage()

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

  const currentAd = ads[currentIndex]

  const {data: burntCoins} = useBurntCoins()

  const orderedBurntCoins =
    burntCoins
      ?.sort((a, b) => b.amount - a.amount)
      .map(burn => ({...burn, ...AdBurnKey.fromHex(burn?.key)})) ?? []

  const maybeBurn = orderedBurntCoins.find(burn => burn.cid === currentAd?.cid)

  const formatDna = useFormatDna()

  const swipeProps = useSwipeable({
    onSwipedLeft: next,
    onSwipedRight: prev,
    preventDefaultTouchmoveEvent: true,
    trackMouse: true,
  })

  return (
    <Stack>
      <Box
        bg="white"
        borderRadius="lg"
        boxShadow="0 3px 12px 0 rgba(83, 86, 92, 0.1), 0 2px 3px 0 rgba(83, 86, 92, 0.2)"
        pt="6"
        px="28px"
        pb="4"
        {...swipeProps}
      >
        <Heading as="h3" fontSize="lg" fontWeight={500} isTruncated>
          {currentAd?.title}
        </Heading>
        <Text color="muted" fontSize="mdx" mt="2">
          {currentAd?.desc}
        </Text>
        <Box mt="3">
          <ExternalLink
            href={currentAd?.url}
            fontSize="base"
            fontWeight={500}
            justifyContent="start"
            maxW="64"
          >
            {currentAd?.url}
          </ExternalLink>
        </Box>
        <LinkBox mt="5">
          <LinkOverlay href={currentAd?.url} isExternal>
            <AdImage src={currentAd?.media} w="full" />
          </LinkOverlay>
        </LinkBox>
        <Stack spacing="1" mt="4" fontSize="base" divider={<HDivider />}>
          <Stack spacing="1" pt="2" pb="2.5">
            <Text fontWeight={500}>{t('Sponsored by')}</Text>
            <HStack spacing="1" align="center">
              <Avatar
                address={currentAd?.author}
                boxSize="6"
                borderRadius="lg"
              />
              <Text as="span" color="muted" isTruncated lineHeight="22px">
                {currentAd?.author}
              </Text>
            </HStack>
          </Stack>
          <Stack spacing="1" pt="2" pb="2.5">
            <Text fontWeight={500}>
              {t('Burnt, {{time}}', {
                time: new Intl.RelativeTimeFormat(lng, {
                  style: 'short',
                }).format(24, 'hour'),
              })}
            </Text>
            <Text color="muted">{formatDna(maybeBurn?.amount ?? 0)}</Text>
          </Stack>
        </Stack>
      </Box>
      <Center as={HStack} spacing="0.5" h="6">
        {ads.map((_, idx) => (
          <Box
            w="6"
            h="0.5"
            bg={idx === currentIndex ? 'gray.500' : 'gray.030'}
            borderRadius={1}
            onClick={() => {
              setCurrentIndex(idx)
            }}
          />
        ))}
      </Center>
      <Box>
        <SuccessAlert
          icon={<InfoIcon color="green.500" boxSize={5} mr={3} />}
          fontSize="md"
        >
          {t('Watching ads makes your coin valuable!')}
        </SuccessAlert>
      </Box>
    </Stack>
  )
}

/*
  ~ What it does? ~

  Displays an Address, Balance, and Wallet as one Account component,
  also allows users to log in to existing accounts and log out

  ~ How can I use? ~

  <Account
    address={address}
    localProvider={localProvider}
    userProvider={userProvider}
    mainnetProvider={mainnetProvider}
    price={price}
    web3Modal={web3Modal}
    loadWeb3Modal={loadWeb3Modal}
    logoutOfWeb3Modal={logoutOfWeb3Modal}
    blockExplorer={blockExplorer}
  />

  ~ Features ~

  - Provide address={address} and get balance corresponding to the given address
  - Provide localProvider={localProvider} to access balance on local network
  - Provide userProvider={userProvider} to display a wallet
  - Provide mainnetProvider={mainnetProvider} and your address will be replaced by ENS name
              (ex. "0xa870" => "user.eth")
  - Provide price={price} of ether and get your balance converted to dollars
  - Provide web3Modal={web3Modal}, loadWeb3Modal={loadWeb3Modal}, logoutOfWeb3Modal={logoutOfWeb3Modal}
              to be able to log in/log out to/from existing accounts
  - Provide blockExplorer={blockExplorer}, click on address and get the link
              (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")
*/

export default function Account({
  address,
  connectText,
  ensProvider,
  isWalletConnected,
  loadWeb3Modal,
  logoutOfWeb3Modal,
  setUserRole,
  userProvider,
  userRole,
}) {
  const ens = useDisplayAddress(ensProvider, address);
  const shortAddress = ellipsizedAddress(address);
  const toast = useToast({ position: "top", isClosable: true });
  const [isPopoverOpen, setIsPopoverOpen] = useState(true);
  const registerButtonRef = useRef();
  const openPopover = () => setIsPopoverOpen(true);
  const closePopover = () => setIsPopoverOpen(false);
  const { primaryFontColor, secondaryFontColor, dividerColor } = useCustomColorModes();

  if (!userRole && isWalletConnected) {
    return <Spinner />;
  }

  const hasEns = ens !== shortAddress;
  const isAdmin = userRole === USER_ROLES.admin;
  const isBuilder = userRole === USER_ROLES.builder;
  const isAnonymous = userRole === USER_ROLES.anonymous;

  const connectWallet = (
    <Button colorScheme="blue" key="loginbutton" onClick={loadWeb3Modal}>
      {connectText || "connect"}
    </Button>
  );

  const UserDisplayName = ({ mb, textAlign }) =>
    hasEns ? (
      <>
        <Text fontSize="md" fontWeight="bold" textAlign={textAlign} color={primaryFontColor}>
          {ens}
        </Text>
        <Text color={secondaryFontColor} fontSize="sm" fontWeight="normal" textAlign={textAlign} mb={mb}>
          {shortAddress}
        </Text>
      </>
    ) : (
      <Text fontSize="md" fontWeight="semibold" textAlign={textAlign} color={primaryFontColor} mb={mb}>
        {shortAddress}
      </Text>
    );

  const accountMenu = address && (
    <LinkBox>
      <Flex align="center">
        <LinkOverlay as={NavLink} to="/portfolio">
          <QRPunkBlockie withQr={false} address={address.toLowerCase()} w={9} borderRadius={6} />
        </LinkOverlay>
        <Box ml={4}>
          {/* ToDo. Move to Utils */}
          <UserDisplayName textAlign="left" />
        </Box>
        <Tooltip label="Disconnect wallet">
          <Button ml={4} onClick={logoutOfWeb3Modal} variant="outline" size="sm">
            X
          </Button>
        </Tooltip>
      </Flex>
    </LinkBox>
  );

  const handleSignUpSuccess = () => {
    closePopover();
    toast({
      title: "You are now registered!",
      description: (
        <>
          Visit{" "}
          <Link href="/portfolio" textDecoration="underline">
            your portfolio
          </Link>{" "}
          to start building
        </>
      ),
      status: "success",
    });
  };

  const anonymousMenu = address && (
    <Popover placement="bottom-end" initialFocusRef={registerButtonRef} isOpen={isPopoverOpen} onClose={closePopover}>
      <PopoverTrigger>
        <Button variant="ghost" _hover={{ backgroundColor: "gray.50" }} w={9} p={0} onClick={openPopover}>
          <Box>
            <Icon as={HeroIconUser} w={6} h={6} color={secondaryFontColor} />
            <AvatarBadge boxSize={2} bg="red.500" borderRadius="full" top="4px" right="4px" />
          </Box>
        </Button>
      </PopoverTrigger>
      <Tooltip label="Disconnect wallet">
        <Button ml={4} onClick={logoutOfWeb3Modal} variant="outline" size="sm">
          X
        </Button>
      </Tooltip>
      <PopoverContent w={72}>
        <PopoverBody
          as={Flex}
          direction="column"
          px={9}
          py={10}
          _focus={{ background: "none" }}
          _active={{ background: "none" }}
        >
          <Text color={primaryFontColor} fontWeight="bold" textAlign="center" mb={1}>
            Register as a builder
          </Text>
          <Text color={secondaryFontColor} fontSize="sm" fontWeight="normal" textAlign="center" mb={6}>
            Sign a message with your wallet to create a builder profile.
          </Text>
          <Box m="auto" p="px" borderWidth="1px" borderColor={dividerColor} borderRadius={8}>
            <QRPunkBlockie address={address} w={19} borderRadius={6} />
          </Box>
          <UserDisplayName textAlign="center" mb={6} />
          <SignatureSignUp
            ref={registerButtonRef}
            userProvider={userProvider}
            address={address}
            onSuccess={handleSignUpSuccess}
            setUserRole={setUserRole}
          />
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );

  const userMenu = isAnonymous ? anonymousMenu : accountMenu;

  return (
    <Flex align="center">
      {isAdmin && (
        <Badge colorScheme="red" mr={4}>
          admin
        </Badge>
      )}
      {isBuilder && (
        <Badge colorScheme="green" mr={4}>
          builder
        </Badge>
      )}
      {isWalletConnected ? userMenu : connectWallet}
    </Flex>
  );
}