react-icons/fi#FiExternalLink TypeScript Examples

InfoItem: React.FC<InfoItemProps> = ({ title, description, link }) => {
  return (
    <InfoItemWrapper clickable={link}>
      <InfoItemText>
        <InfoItemTitle>{title}</InfoItemTitle>
        <InfoItemDescription>{description}</InfoItemDescription>
      </InfoItemText>
      {link && (
        <InfoItemLink href={link}>
          <FiExternalLink />
        </InfoItemLink>
      )}
    </InfoItemWrapper>
  );
}

License = (props: Props) => {
  if (isUndefined(props.license) || isNull(props.license)) return null;

  return (
    <div className={props.className}>
      {LICENSES_LIST.includes(props.license.toLowerCase()) ? (
        <>
          <span className="visually-hidden">{props.license}</span>

          <ExternalLink
            href={`https://choosealicense.com/licenses/${props.license.toLowerCase()}/`}
            className={props.linkClassName}
            btnType={props.btnType}
            label={`Open ${props.license} documentation`}
            ariaHidden
          >
            <div className="d-flex align-items-center mw-100 text-truncate">
              {props.visibleIcon && <GoLaw className="text-muted me-2 h6 mb-0" />}
              <div className={`mw-100 text-truncate ${props.linkContentClassName}`}>{props.license}</div>
              <span
                className={classnames(styles.smallIcon, {
                  [styles.alignedSmallIcon]: isUndefined(props.visibleIcon) || !props.visibleIcon,
                })}
              >
                <FiExternalLink className="ms-1" />
              </span>
            </div>
          </ExternalLink>
        </>
      ) : (
        <div className="d-flex align-items-center">
          {props.visibleIcon && <GoLaw className="text-muted me-2 h6 mb-0" />}
          <>{props.license}</>
        </div>
      )}
    </div>
  );
}

Link: ElementType = (data: LinkProps) => {
  const linkIcon =
    data.children && isArray(data.children) && data.children[0] === 'iconLink' ? (
      <FiExternalLink className={`position-relative ${styles.linkIcon}`} />
    ) : undefined;

  return (
    <a href={data.href} target={data.target} rel="noopener noreferrer" className="d-inline-block text-dark">
      {linkIcon || data.children}
    </a>
  );
}

SocialCard = ({
  children,
  color,
  link,
}: SocialCardProps): JSX.Element => {
  return (
    <div
      className={`group relative flex h-24 w-36 min-w-max flex-shrink-0 rounded-xl shadow-xl ${color} m-2`}
    >
      {children}
      <a
        className="absolute top-0 left-0 right-0 bottom-0 hidden rounded-xl border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
        href={link}
        rel="noreferrer"
        target="_blank"
      >
        <FiExternalLink className="m-auto" />
      </a>
    </div>
  );
}

CallDetails: React.FC<ActionViewProps> = ({ decodedCall }) => {
  const theme = useTheme();

  function renderByParamType(type: string, value: any) {
    if (!type || !value) return null;

    if (type === 'address') {
      return (
        <UnstyledLink href="#">
          <ParamDetail>
            {value} <FiExternalLink size={16} />
          </ParamDetail>
        </UnstyledLink>
      );
    }

    if (type.startsWith('uint') || type.startsWith('int')) {
      return <ParamDetail>{BigNumber.from(value).toString()}</ParamDetail>;
    }

    return <ParamDetail>{value}</ParamDetail>;
  }

  return (
    <>
      <ActionParamRow>
        <Box>
          {decodedCall?.function?.name} (
          {decodedCall?.function?.inputs.map((param, index, params) => (
            <span key={index}>
              <ParamTag color={theme?.colors?.params?.[index]}>
                {param?.type}
              </ParamTag>
              {index < params.length - 1 && <span> , </span>}
            </span>
          ))}
          )
        </Box>
      </ActionParamRow>

      {decodedCall?.function?.inputs?.map((param, index) => (
        <ActionParamRow key={index}>
          <ParamTitleRow>
            <ParamTitleTag color={theme?.colors?.params?.[index]}>
              {param.name} <em>({param.type})</em>
            </ParamTitleTag>
            {param.type === 'bytes' && (
              <Button variant="secondary">Decode</Button>
            )}
          </ParamTitleRow>

          {renderByParamType(param.type, decodedCall?.args?.[param.name])}
        </ActionParamRow>
      ))}
    </>
  );
}

export default function WalletInfoBox({ openOptions }: Props) {
  const { account, connector, chainId } = useWeb3React();
  const { ensName, imageUrl } = useENSAvatar(account, MAINNET_ID);
  const [isCopied, copyAddress] = useClipboard(account, 3000);

  const networkName = NETWORK_NAMES[chainId];

  return (
    <Wrapper>
      <ConnectionStatusRow>
        <ConnectionStatusText>
          <LiveIndicator />
          Connected to {findWalletType(connector)}
        </ConnectionStatusText>
        {isDesktop && (
          <div>
            <Button onClick={openOptions}>Change</Button>
          </div>
        )}
      </ConnectionStatusRow>

      <WalletAddressRow>
        <IconHolder>
          <Avatar src={imageUrl} defaultSeed={account} size={24} />
        </IconHolder>
        <AddressText>{ensName || shortenAddress(account)}</AddressText>
      </WalletAddressRow>

      <Row>
        <ConnectionActionButton
          variant="minimal"
          onClick={copyAddress}
          iconLeft
        >
          {isCopied ? <FiCheckCircle /> : <FiCopy />}
          {isCopied ? 'Copied Address!' : 'Copy Address'}
        </ConnectionActionButton>

        <ExternalLink
          href={getBlockchainLink(account, networkName, 'address')}
          target="_blank"
        >
          <ConnectionActionButton variant="minimal" iconLeft>
            <FiExternalLink />
            View on Explorer
          </ConnectionActionButton>
        </ExternalLink>
      </Row>
      {isMobile && (
        <CenteredButton onClick={openOptions}>Change Connection</CenteredButton>
      )}
    </Wrapper>
  );
}

BlockchainLink = ({
  text,
  size = 'default',
  type = 'default',
  toCopy = false,
  onlyIcon = false,
  onlyText = false,
}) => {
  const {
    context: { configStore, ensService },
  } = useContext();

  const rpcUrls = useRpcUrls();

  const networkName = configStore.getActiveChainName();
  const [ensName, setENSName] = useState('');
  const erc20Token = getERC20Token(text);
  const dxVoteContract = getDxVoteContract(text);

  useEffect(() => {
    async function getENS() {
      const response = await ensService.resolveENSName(text);
      setENSName(response);
    }
    getENS();
  }, [text, rpcUrls]);

  let formatedAddress;
  if (!ensName && !dxVoteContract && !erc20Token) {
    if (onlyIcon) formatedAddress = <FiExternalLink />;
    else formatedAddress = toAddressStub(text, size);
  }

  /*
  If the address is an ens domain show the ens domain name with a link to the blockchain explorer address and option to copy the address.
  If the address is an ERC20 token registered in the config show the token symbol instead with links to the token explorer, and the option to copy the token address.
  If the address is an known dxvote contract (avatar,controller, etc) domain show the contract name with a link to the blockchain explorer address and option to copy the address.
  else show formatted address
  */
  const Address = () => (
    <>
      {ensName}
      {!ensName && erc20Token && <Icon src={erc20Token.logoURI} />}
      {!ensName && dxVoteContract && dxVoteContract?.contract}
      {formatedAddress}
    </>
  );

  return (
    <AddressLink>
      {!onlyText ? (
        <a
          href={getBlockchainLink(
            text,
            networkName,
            isAddress(text) ? 'address' : type
          )}
          target="_blank"
          rel="noreferrer"
        >
          <Address />
        </a>
      ) : (
        <div>
          <Address />
        </div>
      )}
      {toCopy ? <Copy toCopy={text} /> : null}
    </AddressLink>
  );
}

LogsLayout = (): JSX.Element => {
    const dispatch = useAppDispatch();
    const [requiresConfirmation, confirm] = useState((): string | null => {
        return null;
    });
    const alertRef = useRef(null);
    let logs = useAppSelector(state => state.logStore.logs);
    const showDebug = useAppSelector(state => state.logStore.debug);

    // If we don't want to show debug logs, filter them out
    if (!showDebug) {
        logs = logs.filter(e => e.type !== 'debug');
    }

    const toggleDebugMode = (e: React.ChangeEvent<HTMLInputElement>) => {
        dispatch(setDebug(e.target.checked));
    };

    return (
        <Box p={3} borderRadius={10}>
            <Flex flexDirection="column">
                <Stack direction='column' p={5}>
                    <Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
                        <Text fontSize='2xl'>Controls</Text>
                        <Popover trigger='hover'>
                            <PopoverTrigger>
                                <Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
                                    <AiOutlineInfoCircle />
                                </Box>
                            </PopoverTrigger>
                            <PopoverContent>
                                <PopoverArrow />
                                <PopoverCloseButton />
                                <PopoverHeader>Information</PopoverHeader>
                                <PopoverBody>
                                    <Text>
                                        This page will allow you to perform debugging actions on your BlueBubbles server.
                                        As many of you know, software is not perfect, and there will always be edge cases
                                        depending on the environment. These controls allow us to get the information needed, or
                                        take the required actions to solve an issue. It also allows you to "see" into what
                                        the server is doing in the background.
                                    </Text>
                                </PopoverBody>
                            </PopoverContent>
                        </Popover>
                    </Flex>
                    <Divider orientation='horizontal' />
                    <Flex flexDirection="row" justifyContent="flex-start">
                        <Menu>
                            <MenuButton
                                as={Button}
                                rightIcon={<BsChevronDown />}
                                width="12em"
                                mr={5}
                            >
                                Manage
                            </MenuButton>
                            <MenuList>
                                <MenuItem icon={<VscDebugRestart />} onClick={() => confirm('restartServices')}>
                                    Restart Services
                                </MenuItem>
                                <MenuItem icon={<BsBootstrapReboot />} onClick={() => confirm('fullRestart')}>
                                    Full Restart
                                </MenuItem>
                                <MenuItem icon={<FiExternalLink />} onClick={() => openLogLocation()}>
                                    Open Log Location
                                </MenuItem>
                                <MenuItem icon={<GoFileSubmodule />} onClick={() => openAppLocation()}>
                                    Open App Location
                                </MenuItem>
                                <MenuItem icon={<AiOutlineClear />} onClick={() => clearLogs()}>
                                    Clear Logs
                                </MenuItem>
                            </MenuList>
                        </Menu>
                        <Menu>
                            <MenuButton
                                as={Button}
                                rightIcon={<BsChevronDown />}
                                width="12em"
                                mr={5}
                            >
                                Debug Actions
                            </MenuButton>
                            <MenuList>
                                <MenuItem icon={<BsTerminal />} onClick={() => confirm('restartViaTerminal')}>
                                    Restart via Terminal
                                </MenuItem>
                                <MenuItem icon={<AiOutlineClear />} onClick={() => confirm('clearEventCache')}>
                                    Clear Event Cache
                                </MenuItem>
                            </MenuList>
                        </Menu>
                        
                    </Flex>
                </Stack>
                <Stack direction='column' p={5}>
                    <Text fontSize='2xl'>Debug Logs</Text>
                    <Divider orientation='horizontal' />
                    <Spacer />
                    <Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
                        <Checkbox onChange={(e) => toggleDebugMode(e)} isChecked={showDebug}>Show Debug Logs</Checkbox>
                        <Popover trigger='hover'>
                            <PopoverTrigger>
                                <Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
                                    <AiOutlineInfoCircle />
                                </Box>
                            </PopoverTrigger>
                            <PopoverContent>
                                <PopoverArrow />
                                <PopoverCloseButton />
                                <PopoverHeader>Inforamation</PopoverHeader>
                                <PopoverBody>
                                    <Text>
                                        Enabling this option will show DEBUG level logs. Leaving
                                        this disabled will only INFO, WARN, and ERROR level logs.
                                    </Text>
                                </PopoverBody>
                            </PopoverContent>
                        </Popover>
                    </Flex>
                    <Spacer />
                    <LogsTable logs={logs} />
                </Stack>
            </Flex>

            <ConfirmationDialog
                modalRef={alertRef}
                onClose={() => confirm(null)}
                body={confirmationActions[requiresConfirmation as string]?.message}
                onAccept={() => {
                    if (hasKey(confirmationActions, requiresConfirmation as string)) {
                        if (confirmationActions[requiresConfirmation as string].shouldDispatch ?? false) {
                            dispatch(confirmationActions[requiresConfirmation as string].func() as AnyAction);
                        } else {
                            confirmationActions[requiresConfirmation as string].func();
                        }
                    }
                }}
                isOpen={requiresConfirmation !== null}
            />
        </Box>
    );
}

Footer = (props: Props) => {
  const whiteLabel = isWhiteLabel();

  return (
    <footer
      role="contentinfo"
      className={classnames('position-relative text-white', styles.footer, {
        [styles.invisibleFooter]: props.isHidden,
      })}
    >
      <div className={styles.mainFooter}>
        <div className={classnames('container-lg px-4', { invisible: props.isHidden })}>
          {!whiteLabel ? (
            <>
              <div
                className={`d-flex flex-row flex-wrap align-items-stretch justify-content-between ${styles.footerContent}`}
              >
                <div>
                  <div className="h6 fw-bold text-uppercase">Project</div>
                  <div className="d-flex flex-column text-start">
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="/docs"
                      label="Open documentation"
                      target="_self"
                    >
                      Documentation
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://blog.artifacthub.io/blog/"
                      label="Open blog"
                    >
                      Blog
                    </ExternalLink>
                    <Link
                      className={`mb-1 ${styles.link}`}
                      to={{
                        pathname: '/stats',
                      }}
                    >
                      Statistics
                    </Link>
                  </div>
                </div>

                <div>
                  <div className="h6 fw-bold text-uppercase">Community</div>
                  <div className="d-flex flex-column text-start">
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://github.com/artifacthub/hub"
                      label="Open GitHub"
                    >
                      <div className="d-flex align-items-center">
                        <FaGithub className="me-2" />
                        GitHub
                      </div>
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://cloud-native.slack.com/channels/artifact-hub"
                      label="Open Slack channel"
                    >
                      <div className="d-flex align-items-center">
                        <FaSlack className="me-2" />
                        Slack
                      </div>
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://twitter.com/cncfartifacthub"
                      label="Open Twitter"
                    >
                      <div className="d-flex align-items-center">
                        <FaTwitter className="me-2" />
                        Twitter
                      </div>
                    </ExternalLink>
                  </div>
                </div>

                <div className={styles.fullMobileSection}>
                  <div className="h6 fw-bold text-uppercase">About</div>
                  <div className={styles.copyrightContent}>
                    Artifact Hub is an <b className="d-inline-block">Open Source</b> project licensed under the{' '}
                    <ExternalLink
                      className={`d-inline-block mb-1 ${styles.linkInText}`}
                      href="https://www.apache.org/licenses/LICENSE-2.0"
                      label="Open Apache License 2.0 documentation"
                    >
                      <div className="d-flex align-items-center">
                        Apache License 2.0
                        <span className={styles.smallIcon}>
                          <FiExternalLink className="ms-1" />
                        </span>
                      </div>
                    </ExternalLink>
                  </div>
                </div>

                <div className={`ms-0 ms-lg-auto mt-3 mt-lg-0 text-center ${styles.fullMobileSection}`}>
                  <div className="d-flex flex-column align-items-center h-100">
                    <div className={styles.hexagon}>
                      <FiHexagon />
                    </div>
                    <div className="mt-2 mt-lg-4">
                      <small>
                        <span className="d-none d-sm-inline me-1">Copyright</span>© The Artifact Hub Authors
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <ExternalLink href="https://artifacthub.io" label="Artifact Hub site">
              <div className="d-flex flex-column align-items-center">
                <small className="mb-2 text-light">Powered by</small>
                <img
                  className={styles.AHlogo}
                  src="https://artifacthub.io/static/media/logo/artifacthub-brand-white.svg"
                  alt="Logo Artifact Hub"
                />
              </div>
            </ExternalLink>
          )}
        </div>
      </div>
      {!whiteLabel && (
        <div className={`text-center py-2 px-3 px-md-4 ${styles.trademark} trademark`}>
          <small className="opacity-75">
            © 2022{' '}
            <ExternalLink className="opacity-100 text-white" href="https://linuxfoundation.org/">
              The Linux Foundation
            </ExternalLink>
            . All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of
            trademarks of The Linux Foundation, please see our{' '}
            <ExternalLink className="opacity-100 text-white" href="https://linuxfoundation.org/trademark-usage">
              Trademark Usage
            </ExternalLink>{' '}
            page.
          </small>
        </div>
      )}
    </footer>
  );
}

AppDomains = ({ appId }: AppDomainProps) => {
  const toast = useToast();
  const { data, loading /* error */ } = useAppByIdQuery({
    variables: {
      appId,
    },
    ssr: false,
    skip: !appId,
  });

  const {
    data: domainsData,
    loading: domainsDataLoading,
    refetch: appDomainsRefetch,
  } = useDomainsQuery({
    variables: {
      appId,
    },
  });

  const [
    removeDomainMutation,
    { loading: removeDomainMutationLoading },
  ] = useRemoveDomainMutation();

  const handleRemoveDomain = async (domain: string) => {
    try {
      await removeDomainMutation({
        variables: {
          input: {
            appId,
            domainName: domain,
          },
        },
        refetchQueries: [{ query: DomainsDocument, variables: { appId } }],
      });
      toast.success('Domain removed successfully');
    } catch (error) {
      toast.error(error.message);
    }
  };

  if (!data) {
    return null;
  }

  // // TODO display error

  if (loading) {
    // TODO nice loading
    return <p>Loading...</p>;
  }

  const { app } = data;

  if (!app) {
    // TODO nice 404
    return <p>App not found.</p>;
  }

  return (
    <>
      <Box py="5">
        <Heading as="h2" size="md">
          Domain management
        </Heading>
        <Text fontSize="sm" color="gray.400">
          List of domains you have added to {app.name} app
        </Text>
      </Box>

      <Grid templateColumns={{ sm: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }}>
        <GridItem colSpan={2}>
          <Box mb="8">
            {domainsDataLoading ? <Spinner /> : null}
            {domainsData?.domains.domains.length === 0 ? (
              <Text fontSize="sm" color="gray.400">
                Currently you haven't added any custom domains to your app
              </Text>
            ) : null}
            {domainsData?.domains.domains.map((domain: any) => (
              <Flex
                key={domain}
                justifyContent="space-between"
                alignItems="center"
              >
                <Link
                  href={`http://${domain}`}
                  isExternal
                  display="flex"
                  alignItems="center"
                >
                  {domain} <Icon as={FiExternalLink} mx="2" />
                </Link>

                <IconButton
                  aria-label="Delete"
                  variant="ghost"
                  colorScheme="red"
                  icon={<FiTrash2 />}
                  disabled={removeDomainMutationLoading}
                  onClick={() => handleRemoveDomain(domain)}
                />
              </Flex>
            ))}
          </Box>

          <AddAppDomain appId={appId} appDomainsRefetch={appDomainsRefetch} />
        </GridItem>
      </Grid>
    </>
  );
}