@fortawesome/free-brands-svg-icons#faGithub TypeScript Examples

constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }

constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule,
    faIconLibrary: FaIconLibrary
  ) {
    if (parentModule) {
      throw new Error('CoreModule is already loaded. Import only in AppModule');
    }
    faIconLibrary.addIcons(
      faCog,
      faBars,
      faRocket,
      faPowerOff,
      faUserCircle,
      faPlayCircle,
      faGithub,
      faMediumM,
      faTwitter,
      faInstagram,
      faYoutube
    );
  }

RepoItem: React.FC<IRepoItemProps> = ({
  name,
  privateRepo,
  skeleton,
  onClick,
}) => {
  return (
    <div className="deploy-site-item-repo-item" onClick={(e) => onClick()}>
      <div className="deploy-site-item-repo-item-details">
        <div className="deploy-site-item-github-icon">
          <FontAwesomeIcon icon={faGithub} />
        </div>
        <div className="deploy-site-item-github-name">
          {skeleton ? <Skeleton width={220} height={24} duration={2} /> : name}
        </div>
      </div>
      {privateRepo && (
        <span className="deploy-site-item-private">
          <span>
            <FontAwesomeIcon icon={faLock} />
          </span>
          <span>Private</span>
        </span>
      )}
      <span className="deploy-site-item-chevron-right">
        <FontAwesomeIcon icon={faChevronRight} />
      </span>
    </div>
  );
}

LandingAboutButtons = () => {
  return (
    <div className="landing-about-button-container">
      <button
        type="button"
        className="primary-button"
        onClick={(e) =>
          window.open("https://github.com/argoapp-live", "_blank", "noopener")
        }
      >
        <span className="button-icon">
          <FontAwesomeIcon icon={faGithub} />
        </span>
        <span>See code on GitHub</span>
      </button>
      <button
        type="button"
        className="primary-button white-button"
        onClick={(e) => window.open("https://www.arweave.org", "_blank", "noopener")}
      >
        <span className="button-icon">
          <LazyLoadedImage height={20} once>
            <img
              src={require("../../../../../../assets/png/ar_light.png")}
              alt="ar"
              height={20}
              width={20}
              loading="lazy"
            />
          </LazyLoadedImage>
        </span>
        <span>Learn More about Arweave</span>
      </button>
    </div>
  );
}

socialLinks = [
  {
    title: 'Twitter',
    href: `${twitterUrl}/${tweet.handle}`,
    icon: faTwitter,
    color: twitterColor,
  },
  {
    title: 'Facebook',
    href: 'https://fb.me/institute.for.memetic.research.and.development',
    icon: faFacebook,
    color: '#4267B2',
  },
  {
    title: 'GitHub',
    href: 'https://github.com/memetic-institute/Money-printer-go-BRRR',
    icon: faGithub,
    color: black,
  },
]

library.add(
  faDotCircle,
  faCircle,
  faBars,
  faTimes,
  faInfoCircle,
  faTrophy,
  faShareSquare,
  faHeart,
  faInstagram,
  faTwitter,
  faGithub,
  faFacebook,
  faHandPointRight,
  faEdit,
  faSave,
  faCamera,
  faPlus,
  faMinus,
  faRandom,
);

export default function CTABanner() {
    return (
        <div className="CTABanner">
            <CTABannerLink
                to="https://app.excalideck.com"
                openInNewTab={false}
                icon={faPen}
                text="Start New"
            />
            <CTABannerLink
                to="https://github.com/excalideck/excalideck"
                openInNewTab={true}
                icon={faGithub}
                text="Fork Me"
            />
        </div>
    );
}

icons = {
  github: faGithub,
  linkedin: faLinkedin,
  twitter: faTwitter,
}

profile: IProfile.Payload = {
  disable: false,

  // image: 'https://resume.yowu.dev/static/image/profile_2019.png',
  image,
  name: {
    title: 'Lorem ipsum',
    small: '(LI)',
  },
  contact: [
    {
      title: '[email protected]',
      link: '#',
      icon: faEnvelope,
    },
    {
      title: 'Please contact me by email',
      icon: faPhone,
      badge: true,
    },
    {
      title: 'https://github.com',
      link: 'https://github.com/uyu423/resume-nextjs',
      icon: faGithub,
    },
    {
      link: 'https://www.facebook.com/iu.loen',
      icon: faFacebook,
    },
    {
      title: 'YouTube',
      link: 'https://www.youtube.com/channel/UC3SyT4_WLHzN7JmHQwKQZww',
      // icon: faRss,
      icon: faYoutube,
    },
  ],
  notice: {
    title: "This resume is a sample page of 'https://github.com/uyu423/resume-nextjs'.",
    icon: faBell,
  },
}

library.add(faHome, faRss, faTags, faTwitter, faGithub)

function AppBar(props: Props) {
  const { Root, styles, onOpenMobileNav } = useStyles(props);
  const theme = useTheme();

  const isMobile = useMediaQuery(theme.media.down('tablet'));
  const { darkMode, setDarkMode } = useDarkMode();

  return (
    <Root>
      {isMobile && (
        <Tooltip title="Open nav" position="right">
          {(tooltipProps) => (
            <Button
              {...tooltipProps}
              onClick={onOpenMobileNav}
              className={styles.navButton}
              aria-label="Open nav"
              shape="icon"
              color="black"
            >
              <FontAwesomeIcon icon={faBars} size="lg" />
            </Button>
          )}
        </Tooltip>
      )}

      <Tooltip title="Contribute on GitHub" position="left">
        {(tooltipProps) => (
          <Button
            className={styles.githubButton}
            aria-label="Contribute on GitHub"
            shape="icon"
            color="black"
            component="a"
            // @ts-ignore
            href="https://github.com/ricokahler/hacker-ui"
            {...tooltipProps}
          >
            <FontAwesomeIcon icon={faGithub} size="3x" />
          </Button>
        )}
      </Tooltip>

      <Tooltip title="Toggle dark mode" position="left">
        {(tooltipProps) => (
          <Button
            className={styles.darkModeButton}
            aria-label="Dark mode"
            shape="icon"
            color="black"
            onClick={() => setDarkMode((darkMode) => !darkMode)}
            {...tooltipProps}
          >
            <FontAwesomeIcon icon={darkMode ? faSun : faMoon} size="3x" />
          </Button>
        )}
      </Tooltip>
    </Root>
  );
}

fontAwesomeBrandsIcons = {
    faGithub,
    faFacebook,
    faFacebookF,
    faGoogle,
    faTwitter,
}

ProfileSocialMedia: React.FC<Props> = ({ socialMedia }) => {
  return (
    <div className="flex items-center space-x-2">
      {socialMedia.twitter && (
        <Link href={socialMedia.twitter}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4" icon={faTwitter} />
          </a>
        </Link>
      )}
      {socialMedia.web && (
        <Link href={socialMedia.web}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
          </a>
        </Link>
      )}
      {socialMedia.linkedin && (
        <Link href={socialMedia.linkedin}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
          </a>
        </Link>
      )}
      {socialMedia.github && (
        <Link href={socialMedia.github}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
          </a>
        </Link>
      )}
    </div>
  );
}

Footer: React.FC = () => {
  // Needed for the native window.scroll smooth behavior to work on all browsers
  smoothscroll.polyfill();

  const scrollTo = useCallback((element) => {
    window.scroll({
      behavior: 'smooth',
      left: 0,
      top: element.offsetTop,
    });
  }, []);

  return (
    <Container id="Footer">
      <br />
      <a
        href="#!"
        aria-label="Go Up"
        onClick={() => scrollTo(document.getElementById('main'))}
      >
        <FontAwesomeIcon id="up" icon={faChevronUp} size="1x" />
      </a>
      <div>
        <a
          href={FooterData.githubUrl}
          aria-label="GitHub Link"
          rel="noopener noreferrer"
          target="_blank"
        >
          <FontAwesomeIcon icon={faGithub} size="2x" />
        </a>
        <a
          href={FooterData.linkedinUrl}
          aria-label="LinkedIn Link"
          rel="noopener noreferrer"
          target="_blank"
        >
          <FontAwesomeIcon icon={faLinkedinIn} size="2x" />
        </a>
      </div>
      <hr />

      {/* If you enjoyed this template, please leave my credits here! :) */}

      <span className="copyright">
        © {new Date().getFullYear()} - Template developed by
        <a
          href="https://github.com/guvarallo"
          rel="noopener noreferrer"
          target="_blank"
        >
          {' '}
          Gus Varallo
        </a>
      </span>
    </Container>
  );
}

LandingFooter = () => {
  return (
    <div className="landing-footer">
      <div className="landing-footer-container">
        <div>
          © 2020 ArGo • Built on{" "}
          <a
            href="https://www.arweave.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Arweave
          </a>{" "}
          •{" "}
          <a
            href="https://www.arweave.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Privacy Policy
          </a>
        </div>
        <div className="landing-footer-container-right">
          <div
            className="landing-footer-icon"
            onClick={(e) =>
              window.open("https://github.com/argoapp-live", "_blank", "noopener")
            }
          >
            <FontAwesomeIcon icon={faGithub} />
          </div>
          <div
            className="landing-footer-icon"
            onClick={(e) =>
              window.open("https://twitter.com/argoapplive", "_blank", "noopener")
            }
          >
            <FontAwesomeIcon icon={faTwitter} />
          </div>
        </div>
      </div>
    </div>
  );
}

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

faGithub = faGithub;

githubIcon = faGithub;

export default function PageHome() {
  const { t } = useTranslation("page_home")
  ReactGA.send({ hitType: "pageview", page: '/home' })
  return <Box my={1} display="flex" flexDirection="column" gap={1}>
    <CardDark>
      <CardContent>
        <Trans i18nKey="intro" t={t}>
          <Typography variant="h5" gutterBottom >
            What is Genshin Optimizer?
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            Genshin Optimizer (GO) is an open-source fan-made website for the action-RPG gacha game <Link href="https://genshin.mihoyo.com/" target="_blank" rel="noreferrer"><strong>Genshin Impact</strong></Link>.
            It is mainly intended to help players with the complex aspect of the game: Artifact Optimization.
            Since artifacts are heavily RNG-based elements that directly contribute to how effective your characters are in the game, GO will try to find the best artifacts for your characters based on your current artifact inventory.
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom>
            GO can keep track of your artifacts, and allows more ease in filtering/comparing artifacts, it serves as a tool to help user find good artifacts in their inventory to level up, and bad artifacts to use as fodder.
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Since GO can replicate the exact stats of any character, along with calculate all their damage numbers to up 1% accuracy, it can also serve as a Damage calculator, and a tool for theory crafting.
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
    <CardDark>
      <CardContent>
        <Trans i18nKey="notGO" t={t}>
          <Typography variant="h5" gutterBottom >
            What Genshin Optimizer is NOT:
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            GO does NOT tell you how to play the game. The information/calculations are intended to be un-opinionated as possible.
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom>
            GO does NOT supplement your lack of in-game knowledge, inappropriate configuration of the optimizer can provide misleading results. Please research your characters, and figure out how you want to use them before configuring them on GO. Think of GO as more of a calculator.
          </Typography>
          <Typography variant="body1" color="text.secondary">
            GO does NOT generally take consideration of Energy Recharge, or team rotations. Please keep those mechanics in mind when you use this tool.
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
    <CardDark sx={{ width: "100%" }}  >
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Trans i18nKey="quickLinks.title" t={t}>
            Quick Links
          </Trans>
        </Typography>
        <CardLight sx={{ mb: 1, }}>
          <CardContent>
            <Typography variant="h6" gutterBottom>
              <Trans i18nKey="quickLinks.scannerTitle" t={t}>
                Do you want to automate some of the artifact input process?
              </Trans>
            </Typography>
            <Typography color="text.secondary" gutterBottom>
              <Trans i18nKey="quickLinks.scannerText" t={t}>
                Here is a list of compatible automatic scanners that can feed data into GO. These programs will automatically scan artifacts from your game, and exporting that data into a file. This file can then be imported to GO.
              </Trans>
            </Typography>
            <Button component={RouterLink} size="small" to="/scanner" variant="contained" startIcon={<Scanner />}>
              <Trans i18nKey="quickLinks.scannerBtn" t={t}>
                Scanner List
              </Trans>
            </Button>
          </CardContent>
        </CardLight>
        <CardLight>
          <CardContent>
            <Typography variant="body1" color="text.secondary" gutterBottom >
              <Trans i18nKey="quickLinks.goGithubText" t={t}>
                GO is completely open-source, written in TypeScript, with the <FontAwesomeIcon icon={faReact} />React framework.
              </Trans>
            </Typography>
            <Button size="small" variant="contained" component="a" href={process.env.REACT_APP_GITHUB_LINK} target="_blank" rel="noreferrer" startIcon={<FontAwesomeIcon icon={faGithub} />}>
              <Trans i18nKey="quickLinks.goGithubBtn" t={t}>
                Genshin Optimizer Github
              </Trans>
            </Button>
          </CardContent>
        </CardLight>
      </CardContent>
    </CardDark>
    <CardDark>
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Trans i18nKey="features.title" t={t}>
            Features
          </Trans>
        </Typography>
        <Grid container spacing={2}>
          {features.map((feature, i) => <Grid item xs={12} md={4} key={i}>
            <FeatureCard {...feature} t={t} />
          </Grid>)}
        </Grid>
      </CardContent>
    </CardDark>
    <CardDark>
      <Grid container>
        <Grid item xs={12} md={6}>
          <CardContent >
            <Trans i18nKey="helpDev" t={t}>
              <Typography variant="h5" gutterBottom >
                Want to help the developer?
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                If you want to financially support the developer, please consider donating via <ABtn href={process.env.REACT_APP_PAYPAL_LINK} icon={<FontAwesomeIcon icon={faPaypal} />}>Paypal</ABtn> or <ABtn href={process.env.REACT_APP_PATREON_LINK} icon={<FontAwesomeIcon icon={faPatreon} />}>Patreon</ABtn>
                . GO does not host ads, and will not lock any features behind a paywall.
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                If you want to help with localization/translation of GO to your native language, request a feature or report a bug, join our <ABtn href={process.env.REACT_APP_DISCORD_LINK} icon={<FontAwesomeIcon icon={faDiscord} />}>discord</ABtn>. This is where you will find more GO-related information, and checkout what is being actively worked on.
              </Typography>
              <Typography variant="body1" color="text.secondary" gutterBottom >
                You can also join the <ABtn href={process.env.REACT_APP_DEVDISCORD_LINK} icon={<FontAwesomeIcon icon={faDiscord} />}>Genshin Dev discord</ABtn> if you are interested in creating Genshin apps.
              </Typography>
            </Trans>
          </CardContent>
        </Grid>
        <Grid item xs={12} md={6}>
          <CardContent sx={{ width: "100%", height: "100%", minHeight: 300 }}>
            <iframe src={process.env.REACT_APP_DISCORD_EMBED_LINK} width="100%" height="100%" frameBorder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" title="discordFrame"></iframe>
          </CardContent>
        </Grid>
      </Grid>
    </CardDark>
    <CardDark>
      <CardContent>
        <Trans i18nKey="credits" t={t}>
          <Typography variant="h5" gutterBottom >
            Credit where credit is due
          </Typography>
          <Typography variant="body1" color="text.secondary" gutterBottom >
            GO is the culmination of hundreds of hours of programming/designing by two maintainers, <ABtn href={process.env.REACT_APP_FRZYC_LINK} icon={<FontAwesomeIcon icon={faUser} />}><strong> frzyc</strong></ABtn> and <ABtn href={process.env.REACT_APP_LANTUA_LINK} icon={<FontAwesomeIcon icon={faUser} />}><strong> lantua</strong></ABtn>. There are also a ton of other resources that aid in the creation of this website. Time to take a bow and thank them.
          </Typography>
          <Typography component="div" variant="body1" color="text.secondary" >
            <ul>
              <li>Thanks to everyone in the community, and especially people on our <Link href={process.env.REACT_APP_DISCORD_LINK} target="_blank" rel="noreferrer">discord</Link> for providing feedback and helping us improve this tool.</li>
              <li>Thanks to <Link href="https://github.com/Dimbreath" target="_blank" rel="noreferrer">Dimbreath</Link>, for giving us a reliable, consistent source for Genshin data and numbers. All our calculations would be moot without them.</li>
              <li>Special thanks to members of our community who has gone the extra mile, and has been helping us with localization/translation of GO to other languages, help us test formulas by recording in-game data, and programmers who has helped us with source code contributions.</li>
              <li>Thanks for everyone else, for sharing this tool, and getting more people to use this tool.</li>
              <li>Lastly, and most importantly, thank <strong>YOU</strong>, for using GO right now.</li>
            </ul>
          </Typography>
        </Trans>
      </CardContent>
    </CardDark>
  </Box>
}

render() {
        return (
            <>
                <Navbar id={"navigation"} bg={"dark"} variant={"dark"} expand={"lg"}>
                    <Container fluid>
                        <Navbar.Brand as={Link} to="/" title="Atlas Academy Database">
                            Atlas Academy DB
                        </Navbar.Brand>
                        <Navbar.Toggle />

                        <Navbar.Collapse>
                            <Nav activeKey={this.props.location.pathname}>
                                <NavPage path="servants" description="Servants" />
                                <NavPage path="craft-essences" description="Craft Essences" />
                                <NavPage path="wars" description="Wars" />
                                <NavDropdown title="Other" id="dropdown-other">
                                    <NavDropdownPage path="command-codes" description="Command Codes" />
                                    <NavDropdownPage path="mystic-codes" description="Mystic Codes" />
                                    <NavDropdownPage path="items" description="Materials" />
                                    <NavDropdownPage path="events" description="Events" />
                                    <NavDropdownPage path="bgms" description="BGMs" />
                                    <NavDropdownPage path="master-missions" description="Master Missions" />
                                </NavDropdown>
                                <NavDropdown title="Search" id="dropdown-search">
                                    <NavDropdownPage path="entities" description="Entities" />
                                    <NavDropdownPage path="skills" description="Skills" />
                                    <NavDropdownPage path="noble-phantasms" description="Noble Phantasms" />
                                    <NavDropdownPage path="funcs" description="Functions" />
                                    <NavDropdownPage path="buffs" description="Buffs" />
                                    <NavDropdownPage path="quests" description="Quests" />
                                    <NavDropdownPage path="scripts" description="Scripts" />
                                </NavDropdown>
                                <NavDropdown title="Changelog" id="dropdown-search">
                                    <NavDropdownPage path="changes" description="Master Data" />
                                    <NavDropdownPage path="enemy-changes" description="Enemy Data" />
                                </NavDropdown>
                            </Nav>
                            <Nav className={"ml-auto icons"} activeKey="">
                                <Row>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.JP)}
                                            className={`nav-link ${this.regionClass(Region.JP)}`}
                                        >
                                            <JPFlag title="View data from the JP version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.NA)}
                                            className={`nav-link ${this.regionClass(Region.NA)}`}
                                        >
                                            <USFlag title="View data from the NA version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.CN)}
                                            className={`nav-link ${this.regionClass(Region.CN)}`}
                                        >
                                            <CNFlag title="View data from the CN version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.KR)}
                                            className={`nav-link ${this.regionClass(Region.KR)}`}
                                        >
                                            <KRFlag title="View data from the KR version" />
                                        </Link>
                                    </Col>
                                    <Col>
                                        <Link
                                            to={this.regionLink(Region.TW)}
                                            className={`nav-link ${this.regionClass(Region.TW)}`}
                                        >
                                            <TWFlag title="View data from the TW version" />
                                        </Link>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <Nav.Link
                                            href="https://atlasacademy.io/discord"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faDiscord} title="Atlas Academy Discord" />
                                        </Nav.Link>
                                    </Col>
                                    <Col>
                                        <Nav.Link
                                            href="https://twitter.com/aacademy_fgo"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faTwitter} title="Atlas Academy Twitter" />
                                        </Nav.Link>
                                    </Col>
                                    <Col>
                                        <Nav.Link
                                            href="https://github.com/atlasacademy/apps"
                                            target="_blank"
                                            rel="noreferrer"
                                        >
                                            <FontAwesomeIcon icon={faGithub} title="Atlas Academy DB Github" />
                                        </Nav.Link>
                                    </Col>
                                </Row>
                                <Button variant={"primary"} onClick={() => this.showSettings()}>
                                    <FontAwesomeIcon icon={faCog} title="Settings" />
                                </Button>
                            </Nav>
                        </Navbar.Collapse>
                    </Container>
                </Navbar>

                <Modal show={this.state.showSettings} onHide={() => this.hideSettings()}>
                    <Modal.Header>
                        <Modal.Title>Settings</Modal.Title>
                        <button className="modal-close" onClick={() => this.hideSettings()}>
                            <FontAwesomeIcon icon={faXmark} title="Close Settings" />
                        </button>
                    </Modal.Header>
                    <Modal.Body>
                        <SettingForm language={this.props.language} theme={this.props.theme} />
                    </Modal.Body>
                </Modal>
            </>
        );
    }

Footer: React.FC<FooterProps> = ({ mainClasses }) => {
  const { socialnetworks, footerNavItems } = useSettings();
  const currentYear = new Date().getFullYear();

  return (
    <footer className={` ${mainClasses} mt-40 border-t border-zinc-500 w-full`}>
      <div className="container flex justify-center w-full py-16 mx-auto text-primary md:justify-between">
        <div className="flex flex-col justify-center w-full text-center">
          <div className="flex flex-col justify-between w-full md:flex-row">
            <div className="flex flex-col gap-1 pb-8 font-medium md:pb-3">
              {footerNavItems?.map(({ link, title }) => (
                <Link href={link.value} key={link.value}>
                  <a className="md:mr-10 md:text-left">{title}</a>
                </Link>
              ))}
            </div>
            <div className="flex flex-col gap-3">
              <p className="font-medium text-center md:text-left">
                Encuéntranos en
              </p>
              <div className="flex justify-center gap-3 md:justify-start">
                {socialnetworks?.twitter && (
                  <Link href={socialnetworks?.twitter}>
                    <a
                      target="_blank"
                      className="grid w-6 h-6 rounded-full place-items-center"
                    >
                      <FontAwesomeIcon icon={faTwitter} size="lg" />
                    </a>
                  </Link>
                )}

                {socialnetworks?.instagram && (
                  <Link href={socialnetworks?.instagram}>
                    <a
                      target="_blank"
                      className="grid w-6 h-6 rounded-full place-items-center"
                    >
                      <FontAwesomeIcon icon={faInstagram} size="lg" />
                    </a>
                  </Link>
                )}

                {socialnetworks?.github && (
                  <Link href={socialnetworks?.github}>
                    <a
                      target="_blank"
                      className="grid w-6 h-6 rounded-full place-items-center"
                    >
                      <FontAwesomeIcon icon={faGithub} size="lg" />
                    </a>
                  </Link>
                )}

                {socialnetworks?.youtube && (
                  <Link href={socialnetworks?.youtube}>
                    <a
                      target="_blank"
                      className="grid w-6 h-6 rounded-full place-items-center"
                    >
                      <FontAwesomeIcon icon={faYoutube} size="lg" />
                    </a>
                  </Link>
                )}

                {socialnetworks?.linkedin && (
                  <Link href={socialnetworks?.linkedin}>
                    <a
                      target="_blank"
                      className="grid w-6 h-6 rounded-full place-items-center "
                    >
                      <FontAwesomeIcon icon={faLinkedin} size="lg" />
                    </a>
                  </Link>
                )}

                {socialnetworks?.twitch && (
                  <Link href={socialnetworks?.twitch}>
                    <a
                      target="_blank"
                      className="grid w-6 h-6 rounded-full place-items-center"
                    >
                      <FontAwesomeIcon icon={faTwitch} size="lg" />
                    </a>
                  </Link>
                )}
              </div>
            </div>
          </div>

          <div className="flex flex-col items-center mt-16 md:flex-row">
            <div>
              <p className="mb-2 font-light md:mr-4">
                © FrontendCafé {currentYear}
              </p>
            </div>
            <div>
              <Link href="https://vercel.com/?utm_source=hifrontendcafe&utm_campaign=oss">
                <a target="_blank" rel="noopener noreferrer">
                  <Image
                    src={logo_vercel}
                    alt="Powered by Vercel"
                    placeholder="blur"
                    blurDataURL={logo_vercel}
                  />
                </a>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

MentorCard: React.FC<MentorCardProps> = ({
  mentor,
  topics,
  isLogged,
  openModal,
}) => {
  const isActive = mentor.status === 'ACTIVE';
  const isUnavailable = mentor.status === 'NOT_AVAILABLE';

  const findTopicsName = (id: string) => {
    const topic = topics.find((e) => e._id == id);
    return topic.title;
  };

  return (
    <motion.div
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: isActive ? 1 : 0.66 }}
      exit={{ y: -100, opacity: 0 }}
      className="flex flex-col w-full p-6 rounded-lg bg-zinc-800 space-between "
    >
      <div>
        <div className="flex justify-between w-full">
          <div>
            <Image
              className="object-cover w-24 h-24 mr-4 rounded-full bg-zinc-300"
              src={`${mentor.photo.src}?h=200`}
              alt={`Foto de ${mentor.name} `}
              height={96}
              width={96}
              placeholder="blur"
              blurDataURL={`${mentor.photo.src}?h=50`}
            />
          </div>

          <div>
            <div className="mb-4">
              {isUnavailable ? (
                <button
                  type="button"
                  className="capitalize cursor-not-allowed text-md btn btn-secondary"
                >
                  No disponible
                </button>
              ) : isActive && mentor.calendly && isLogged ? (
                <Link href={mentor.calendly}>
                  <a
                    target="_blank"
                    className="capitalize border text-md text-primary border-zinc-50 btn hover:text-zinc-800 hover:bg-zinc-50 hover:border-zinc-50"
                  >
                    <span>Solicitar mentoría</span>
                  </a>
                </Link>
              ) : (
                <button
                  type="button"
                  onClick={() => openModal()}
                  className=" border text-md text-primary border-zinc-50 btn hover:text-zinc-800 hover:bg-zinc-50 hover:border-zinc-50"
                >
                  Solicitar mentoría
                </button>
              )}
            </div>
            <div className="flex mt-2 place-content-end">
              {mentor.web && (
                <Link href={mentor.web}>
                  <a
                    target="_blank"
                    className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
                  >
                    <FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
                  </a>
                </Link>
              )}
              {mentor.linkedin && (
                <Link href={mentor.linkedin}>
                  <a
                    target="_blank"
                    className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
                  >
                    <FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
                  </a>
                </Link>
              )}
              {mentor.github && (
                <Link href={mentor.github}>
                  <a
                    target="_blank"
                    className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
                  >
                    <FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
                  </a>
                </Link>
              )}
            </div>
          </div>
        </div>
      </div>
      <div>
        <h2 className="mb-2 text-xl font-bold text-primary">{mentor.name}</h2>
      </div>
      <div className="flex flex-col justify-between h-full">
        <div className="flex">
          <div>
            <p className="leading-relaxed text-md text-tertiary md:min-h-64">
              {mentor.description ? mentor.description : '---'}
            </p>
          </div>
        </div>
        <div className="flex flex-wrap mt-4 md:justify-start">
          {mentor.topics &&
            mentor.topics?.map((topic) => (
              <TopicBadge key={topic._key} topic={findTopicsName(topic._ref)} />
            ))}
        </div>
      </div>
    </motion.div>
  );
}

ProjectTopCard = () => {
  const history = useHistory();

  const { projectLoading, selectedProject } = useContext<IStateModel>(StateContext);
  const { setRepoForTriggerDeployment } = useContext<IActionModel>(ActionContext);

  const sortedDeployments = projectLoading
    ? []
    : selectedProject?.deployments
        .filter((d) => d.status.toLowerCase() === "deployed")
        .sort((a, b) => moment(b.createdAt).diff(moment(a.createdAt)));
  let latestDeployment: any = {};
  if (sortedDeployments) {
    latestDeployment = sortedDeployments[0];
  }

  const showProtocolImage = (protocol: string) => {
    switch (protocol) {
      case "arweave":
        return (
          <img
            src={require("../../../../../assets/png/ar_light.png")}
            alt="github"
            className="project-top-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "skynet":
        return (
          <img
            src={require("../../../../../assets/png/skynet.png")}
            alt="github"
            className="project-top-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "neofs":
        return (
          <img
            src={require("../../../../../assets/png/neo-light.png")}
            alt="github"
            className="project-top-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "ipfs-filecoin":
        return (
          <img
            src={require("../../../../../assets/png/filecoin.png")}
            alt="github"
            className="project-top-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "ipfs-pinata":
        return (
          <img
            src={require("../../../../../assets/svg/pinata.svg")}
            alt="github"
            className="project-top-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );

      default:
        return (
          <img
            src={require("../../../../../assets/png/question_mark.png")}
            alt="github"
            className="project-top-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
    }
  };

  const lastPublishedDate = moment(selectedProject?.updatedAt).format(
    "MMM DD, YYYY hh:mm A",
  );
  const imageUrl = (imageUrl: string | undefined) => {
    if (imageUrl) {
      return imageUrl;
    }
    return config.urls.IMAGE_NOT_FOUND;
  };

  let displayGithubRepo = "";
  let githubBranchLink = "";
  if (selectedProject) {
    displayGithubRepo = selectedProject.githubUrl.substring(
      19,
      selectedProject.githubUrl.length - 4,
    );

    githubBranchLink = `${selectedProject.githubUrl.substring(
      0,
      selectedProject.githubUrl.length - 4,
    )}/tree/${selectedProject?.latestDeployment?.configuration.branch}`;
  }

  const domains = selectedProject ? selectedProject.domains : [];
  const subdomains = selectedProject ? selectedProject.subdomains : [];
  const hnsDomains = selectedProject ? selectedProject.handshakeDomains : [];
  const hnsSubdomains = selectedProject ? selectedProject.handshakeSubdomains : [];
  const ensDomains = selectedProject ? selectedProject.ensDomains : [];

  const isDomainOrSubPresent =
    [...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains].length > 0;

  const triggerDeployment = () => {
    const latest = selectedProject?.latestDeployment;
    setRepoForTriggerDeployment({
      github_url: selectedProject?.githubUrl,
      branch: latest?.configuration.branch,
      framework: latest?.configuration.framework,
      publish_dir: latest?.configuration.publishDir,
      package_manager: latest?.configuration.packageManager,
      build_command: latest?.configuration.buildCommand,
      workspace: latest?.configuration.workspace,
      protocol: latest?.configuration.protocol,
    });
    history.push("/deploy/new");
  };

  return (
    <div className="ProjectTopCard">
      <div className="project-top-card-container max-width-set">
        <div className="deployment-top-card-container">
          <div className="deployment-screenshot-container">
            {!projectLoading ? (
              <a
                href={latestDeployment?.sitePreview}
                target="_blank"
                rel="noopener noreferrer"
              >
                <img
                  className="deployment-screenshot"
                  src={imageUrl(selectedProject?.latestDeployment?.screenshot?.url)}
                  // onClick={latestDeployment?.sitePreview}
                  alt={"Preview not Available"}
                />
              </a>
            ) : (
              <Skeleton height={200} width={320} duration={2} />
            )}
          </div>
          <div className="deployment-right">
            <div className="project-top-card-header">
              <div className="project-top-card-header-title-container">
                <h2 className="project-top-card-header-title">
                  {!projectLoading ? (
                    selectedProject?.name
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </h2>
                <div className="archive-tag-container">
                  {!projectLoading ? (
                    selectedProject?.state === "ARCHIVED" ? (
                      <span className="archive-tag">{selectedProject?.state}</span>
                    ) : null
                  ) : null}
                </div>
              </div>
              <p className="project-top-card-header-description">
                {!projectLoading ? (
                  <>
                    <u>Production</u>:{" "}
                    {selectedProject?.latestDeployment?.configuration.branch} - Last
                    published at {lastPublishedDate}
                  </>
                ) : (
                  <Skeleton width={400} duration={2} />
                )}
              </p>
            </div>
            <div className="project-top-card-content">
              {isDomainOrSubPresent && (
                <div className="project-top-card-fields">
                  <div className="project-top-github-icon">
                    <FontAwesomeIcon icon={faGlobe} />
                  </div>
                  <div className="domain-overview-container">
                    {!projectLoading ? (
                      <>
                        {domains.map((d: IDomain, i: number, a: IDomain[]) => (
                          <>
                            <a
                              href={`https://${d.name}`}
                              className="project-top-link"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {d.name}
                            </a>
                            {(i !== a.length - 1 ||
                              subdomains.length > 0 ||
                              hnsDomains.length > 0 ||
                              hnsSubdomains.length > 0 ||
                              ensDomains.length > 0) && (
                              <span className="comma-sep">,</span>
                            )}
                          </>
                        ))}
                        {subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                          <>
                            <a
                              href={`https://${s.name}`}
                              className="project-top-link"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {s.name}
                            </a>
                            {(i !== a.length - 1 ||
                              hnsDomains.length > 0 ||
                              hnsSubdomains.length > 0 ||
                              ensDomains.length > 0) && (
                              <span className="comma-sep">,</span>
                            )}
                          </>
                        ))}
                        {hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                          <>
                            <a
                              href={`http://${s.name}`}
                              className="project-top-link"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {s.name}
                            </a>
                            {(i !== a.length - 1 ||
                              hnsSubdomains.length > 0 ||
                              ensDomains.length > 0) && (
                              <span className="comma-sep">,</span>
                            )}
                          </>
                        ))}
                        {hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                          <>
                            <a
                              href={`http://${s.name}`}
                              className="project-top-link"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {s.name}
                            </a>
                            {(i !== a.length - 1 || ensDomains.length > 0) && (
                              <span className="comma-sep">,</span>
                            )}
                          </>
                        ))}
                        {ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                          <>
                            <a
                              href={`https://${s.name}.link`}
                              className="project-top-link"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              {s.name}
                            </a>
                            {i !== a.length - 1 && (
                              <span className="comma-sep">,</span>
                            )}
                          </>
                        ))}
                      </>
                    ) : (
                      <Skeleton width={300} duration={2} />
                    )}
                  </div>
                </div>
              )}
              <div className="project-top-card-fields">
                <span className="project-top-github-icon">
                  <FontAwesomeIcon icon={faGithub} />
                </span>
                <a
                  href={githubBranchLink}
                  className="project-top-link"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {!projectLoading ? (
                    <>
                      {displayGithubRepo} (branch:{" "}
                      {selectedProject?.latestDeployment?.configuration.branch})
                    </>
                  ) : (
                    <Skeleton width={300} duration={2} />
                  )}
                </a>
              </div>
              <div className="project-top-card-fields">
                {showProtocolImage(
                  selectedProject?.latestDeployment?.configuration.protocol!,
                )}

                {latestDeployment?.sitePreview ? (
                  <a
                    href={latestDeployment?.sitePreview}
                    className="project-top-link"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {!projectLoading ? (
                      "Latest Successful Site Preview"
                    ) : (
                      <Skeleton width={300} duration={2} />
                    )}
                  </a>
                ) : !projectLoading ? (
                  <span>Site preview not available</span>
                ) : (
                  <Skeleton width={300} duration={2} />
                )}
              </div>
              {!projectLoading && (
                <div className="project-top-card-fields">
                  <button
                    className="trigger-deploy-button"
                    onClick={triggerDeployment}
                  >
                    Redeploy Latest
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Menu = (): JSX.Element => {
  const dispatch = useDispatch();

  const state: RootStateType = useSelector((state) => state) as RootStateType;

  const [handle, setHandle] = useState(
    state.userList.handles.length ? state.userList.handles.toString() : ""
  );
  console.log(state.userList.handles.toString());
  useEffect(() => {
    fetchProblemList(dispatch);
    fetchContestList(dispatch);
    fetchSharedProblemList(dispatch);
  }, []);

  // useEffect(() => {
  //   if (!state.contestList.loading && !state.problemList.loading) sync(true);
  // }, [state.userList]);

  useEffect(() => {
    if (!state.contestList.loading && !state.problemList.loading)
      sync(state.userList.handles.length > 2 ? true : false);
    // console.log(state.contestList.loading);
    // console.log(state.problemList.loading);
  }, [state.userList, state.contestList.loading, state.problemList.loading]);

  const sync = (wait = false) => {
    fetchUserSubmissions(dispatch, state.userList.handles, wait);
  };

  const submitUser = () => {
    // Notification.info({
    //   title: "User submitted!",
    //   duration: 200,
    //   description: "hh",
    // });
    // toast.error("? Wow so easy!", {
    //   position: "bottom-right",
    //   autoClose: 2001,
    //   hideProgressBar: false,
    //   closeOnClick: true,
    //   pauseOnHover: true,
    //   draggable: true,
    //   progress: undefined,
    // }); 
    fetchUsers(dispatch, handle);
  };

  return (
    <Navbar
      className={
        "navbar navbar-expand-lg p-2 ps-4 pe-4 " + state.appState.theme.navbar
      }
      expand="md"
    >
      <div className="container p-0">
        <Link to="/" className="navbar-brand" href="#">
          CFTracker
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />

        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ms-auto mt-2 mt-lg-0">
            <li className="nav-item active">
              <Link to={Path.Issues} className="nav-link" href="#">
                {/* <span className="p-1">{<FontAwesomeIcon icon={faBars} />}</span> */}
                <span>Issues</span>
              </Link>
            </li>
            <li className="nav-item active">
              <Link to={Path.PROBLEMS} className="nav-link" href="#">
                {/* <span className="p-1">{<FontAwesomeIcon icon={faBars} />}</span> */}
                <span>Problems</span>
              </Link>
            </li>
            <li className="nav-item">
              <Link to={Path.CONTESTS} className="nav-link" href="#">
                {/*  <span className="p-1">  {<FontAwesomeIcon icon={faListAlt} />}  </span>*/}
                <span>Contests</span>
              </Link>
            </li>

            <li className="nav-item">
              <OverlayTrigger
                trigger="click"
                placement="bottom"
                key="bottom"
                overlay={
                  <Popover
                    id="popover-basic"
                    className={state.appState.theme.bgText}
                  >
                    <Popover.Header
                      as="h3"
                      className={state.appState.theme.bgText}
                    >
                      <div className="d-flex align-items-center">
                        <span className={state.appState.theme.bgText}>
                          CFTracker (Created by{" "}
                          <a
                            href="https://codeforces.com/profile/bashem"
                            className={" " + state.appState.theme.text}
                            target="__blank"
                          >
                            bashem
                          </a>
                          )
                        </span>
                      </div>
                    </Popover.Header>
                    <Popover.Body className={state.appState.theme.bgText}>
                      <ul className="list-group list-group-flush">
                        <li
                          className={
                            "list-group-item " + state.appState.theme.bgText
                          }
                        >
                          <span className="pe-2">Source Code</span>
                          <a
                            href="https://github.com/mbashem/cftracker"
                            className="text-secondary pt-1 fs-5"
                            target="__blank"
                          >
                            {<FontAwesomeIcon icon={faGithub} />}
                          </a>
                        </li>
                      </ul>
                    </Popover.Body>
                  </Popover>
                }
              >
                <a
                  href="#"
                  onClick={(e) => e.preventDefault()}
                  className="nav-link"
                  title="Created by Bashem"
                >
                  <FontAwesomeIcon icon={faInfo} />
                </a>
              </OverlayTrigger>
            </li>

            <li className="nav-item">
              <a
                className={"nav-link"}
                href="#"
                title="Change Theme"
                onClick={(e) => {
                  e.preventDefault();
                  if (state.appState.themeMod === ThemesType.DARK)
                    changeAppState(
                      dispatch,
                      AppReducerType.CHANGE_THEME,
                      ThemesType.LIGHT
                    );
                  else
                    changeAppState(
                      dispatch,
                      AppReducerType.CHANGE_THEME,
                      ThemesType.DARK
                    );
                }}
              >
                <FontAwesomeIcon
                  icon={
                    state.appState.themeMod === ThemesType.DARK ? faMoon : faSun
                  }
                />
              </a>
            </li>

            <li className="nav-item">
              <a
                className="nav-link"
                onClick={(e) => {
                  e.preventDefault();
                  sync();
                }}
                title="Refresh Submissions"
                href="#"
              >
                <FontAwesomeIcon icon={faSync} />
              </a>
            </li>

            <li className="nav-item">
              <form
                className="form-inline d-flex my-2 my-lg-0 nav-item"
                onSubmit={(e) => {
                  e.preventDefault();
                  submitUser();
                }}
              >
                <input
                  name="handle"
                  className={"form-control " + state.appState.theme.bgText}
                  type="text"
                  placeholder="handle1,handle2,.."
                  aria-label="handles"
                  value={handle}
                  onChange={(e) => setHandle(e.target.value)}
                />
              </form>
            </li>
          </Nav>
        </Navbar.Collapse>
      </div>
    </Navbar>
  );
}

Deployment = () => {
  const timeAgo = new TimeAgo("en-US");

  const history = useHistory();
  const params = useParams<any>();

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid",
    },
  };

  const { currentSiteDeployConfig, currentSiteDeployLogs, selectedProject } =
    useContext<IStateModel>(StateContext);
  const { setLatestDeploymentLogs, setLatestDeploymentConfig, fetchProject } =
    useContext<IActionModel>(ActionContext);

  const [deploymentStatus, setDeploymentStatus] = useState<string>("pending");
  const [buildTime, setBuildTime] = useState<{ min: number; sec: number }>({
    min: 0,
    sec: 0,
  });
  const [paymentStatus, setPaymentStatus] = useState<string>("waiting");
  const [livePaymentStatus, setlivePaymentStatus] = useState<string>("waiting");
  const [paymentMessage, setPaymentMessage] = useState<string>("");
  const [paymentDetails, setPaymentDetails] = useState<{
    providerFee: number;
    argoFee: number;
    discount: number;
    finalArgoFee: number;
    token: string;
  }>({ providerFee: 0, argoFee: 0, discount: 0, finalArgoFee: 0, token: "ARGO" });
  const [deployedLink, setDeployedLink] = useState<string>("");
  const [deploymentLoading, setDeploymentLoading] = useState<boolean>(true);
  const [confettiStart, setConfettiStart] = useState<boolean>(false);
  const [pinDetailLoading, setPinDetailLoading] = useState<boolean>(true);
  const [pinDetail, setPinDetail] = useState<any>({ cid: "N.A", isPinned: false });
  const componentIsMounted = useRef(true);

  let socket: any = null;
  let deploymentSvc: any = null;

  useEffect(() => {
    fetchProject(params.siteid);
    deploymentStartup();
    return () => {
      if (socket) {
        socket.disconnect();
      }
      if (deploymentSvc) {
        deploymentSvc.unsubscribe();
      }
      componentIsMounted.current = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const deploymentStartup = async () => {
    setDeploymentLoading(true);
    setLatestDeploymentLogs([]);
    setDeploymentStatus("pending");
    setPaymentStatus("waiting");
    setPaymentDetails({
      providerFee: 0,
      argoFee: 0,
      discount: 0,
      finalArgoFee: 0,
      token: "ARGO",
    });
    setBuildTime({
      min: 0,
      sec: 0,
    });
    socket = socketIOClient(config.urls.API_URL);
    deploymentSvc = ApiService.getDeployment(params.deploymentid).subscribe(
      (result) => {
        if (componentIsMounted.current) {
          const deployment = {
            githubUrl: result.deployment.project.githubUrl,
            branch: result.deployment.configuration.branch,
            createdAt: result.deployment.createdAt,
            updatedAt: result.deployment.updatedAt,
            protocol: result.deployment.configuration.protocol,
            commitHash: result.deployment.commitId,
            commitMessage: result.deployment.commitMessage,
          };
          setLatestDeploymentConfig(deployment);
          currentSiteDeployLogs.splice(0, currentSiteDeployLogs.length);
          result.deployment.logs.forEach((logItem: any) => {
            logItem.log.split("\n").forEach((line: string) => {
              if (line.trim()) {
                currentSiteDeployLogs.push({
                  log: line,
                  time: moment(logItem.time).format("hh:mm:ss A MM-DD-YYYY"),
                });
              }
            });
            setLatestDeploymentLogs(currentSiteDeployLogs);
            scrollToWithContainer(currentSiteDeployLogs.length - 1);
          });
          if (result.deployment.status.toLowerCase() === "pending") {
            socket.on(`deployment.${result.deployment.topic}`, (stream: any) => {
              if (stream.type === 1) {
                stream.data.split("\n").forEach((line: string) => {
                  if (line.trim()) {
                    if (
                      currentSiteDeployLogs
                        .map((l) => l.log)
                        .indexOf(line.trim()) === -1
                    ) {
                      currentSiteDeployLogs.push({
                        log: line,
                        time: moment().format("hh:mm:ss A MM-DD-YYYY"),
                      });
                    }
                  }
                });
                setDeploymentStatus("pending");
                setLatestDeploymentLogs(currentSiteDeployLogs);
                scrollToWithContainer(currentSiteDeployLogs.length - 1);
              } else if (stream.type === 2) {
                const protocolLink = stream.data.logsToCapture.sitePreview;
                setDeployedLink(protocolLink);
                setDeploymentStatus(protocolLink ? "deployed" : "failed");
                const buildMins = Number.parseInt(`${stream.data.buildTime / 60}`);
                const buildSecs = Number.parseInt(`${stream.data.buildTime % 60}`);
                setBuildTime({ min: buildMins, sec: buildSecs });
              } else if (stream.type === 3) {
                setDeployedLink("");
                setDeploymentStatus("failed");
                setBuildTime({ min: 0, sec: 0 });
              }
            });
          } else {
            setDeployedLink(result.deployment.sitePreview);
            setDeploymentStatus(result.deployment.status.toLowerCase());
            const buildMins = Number.parseInt(`${result.deployment.buildTime / 60}`);
            const buildSecs = Number.parseInt(`${result.deployment.buildTime % 60}`);
            setBuildTime({ min: buildMins, sec: buildSecs });
          }
          const paymentSocketOpeningCondition = result.deployment.payment
            ? result.deployment.payment.status !== "success" &&
              result.deployment.payment.status !== "failed"
            : true;
          if (paymentSocketOpeningCondition) {
            if (result.deployment.payment) {
              setPaymentStatus(result.deployment.payment.status);
            }
            socket.on(`payment.${result.deployment.topic}`, (stream: any) => {
              if (stream.type === 1) {
                setPaymentStatus("started");
              } else if (stream.type === 2) {
                const paymentDetails = stream.payload;
                if (paymentDetails.status === "success") {
                  setPaymentDetails(paymentDetails);
                  setlivePaymentStatus("success");
                } else {
                  setPaymentMessage(paymentDetails.failedMessage);
                }
                setPaymentStatus(paymentDetails.status);
              }
            });
          } else {
            if (result.deployment.payment.status === "success") {
              const paymentDetails = {
                providerFee: result.deployment.payment.providerFee,
                argoFee: result.deployment.payment.argoFee,
                discount: result.deployment.payment.discount,
                finalArgoFee: result.deployment.payment.finalArgoFee,
                token: result.deployment.payment.token,
              };
              setPaymentDetails(paymentDetails);
              setPaymentStatus("success");
            } else {
              setPaymentStatus("failed");
              setPaymentMessage(result.deployment.payment.failedMessage);
            }
          }
          setDeploymentLoading(false);
        }
      },
    );
  };

  useEffect(() => {
    if (deploymentStatus === "deployed" && livePaymentStatus === "success") {
      setConfettiStart(true);
    }
  }, [deploymentStatus, livePaymentStatus]);

  let displayGithubRepo = "";
  let githubBranchLink = "";
  let githubCommitLink = "";
  if (currentSiteDeployConfig) {
    displayGithubRepo = currentSiteDeployConfig.githubUrl.substring(
      19,
      currentSiteDeployConfig.githubUrl.length - 4,
    );

    githubBranchLink = `${currentSiteDeployConfig.githubUrl.substring(
      0,
      currentSiteDeployConfig.githubUrl.length - 4,
    )}/tree/${currentSiteDeployConfig.branch}`;

    githubCommitLink = `${currentSiteDeployConfig.githubUrl.substring(
      0,
      currentSiteDeployConfig.githubUrl.length - 4,
    )}/commit/${currentSiteDeployConfig.commitHash}`;
  }

  const domains =
    selectedProject && deployedLink
      ? selectedProject.domains.filter((d) => deployedLink.indexOf(d.link) !== -1)
      : [];

  const subdomains =
    selectedProject && deployedLink
      ? selectedProject.subdomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
      : [];

  const hnsDomains =
    selectedProject && deployedLink
      ? selectedProject.handshakeDomains.filter(
          (d) => deployedLink.indexOf(d.link) !== -1,
        )
      : [];

  const hnsSubdomains =
    selectedProject && deployedLink
      ? selectedProject.handshakeSubdomains.filter(
          (d) => deployedLink.indexOf(d.link) !== -1,
        )
      : [];

  const ensDomains =
    selectedProject && deployedLink
      ? selectedProject.ensDomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
      : [];

  const isDomainOrSubPresent =
    [...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains, ...ensDomains]
      .length > 0;

  const scrollToWithContainer = (index: number) => {
    window.scrollTo({
      top: document.getElementById("deploy-logs-container")?.scrollHeight,
      left: 0,
      behavior: "smooth",
    });
    var myElement = document.getElementById(`deploy-logs-items-${index}`);
    var topPos = myElement?.offsetTop;
    if (document && document.getElementById("deploy-logs-list")) {
      (document as any).getElementById("deploy-logs-list").scrollTop = topPos
        ? topPos
        : 0;
    }
  };

  const showProtocolImage = (protocol: string) => {
    switch (protocol) {
      case "arweave":
        return (
          <img
            src={require("../../../../assets/png/ar_light.png")}
            alt="arweave"
            className="site-deployment-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "skynet":
        return (
          <img
            src={require("../../../../assets/png/skynet.png")}
            alt="skynet"
            className="site-deployment-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "ipfs-filecoin":
        return (
          <img
            src={require("../../../../assets/png/filecoin.png")}
            alt="skynet"
            className="site-deployment-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "ipfs-pinata":
        return (
          <img
            src={require("../../../../assets/svg/pinata.svg")}
            alt="skynet"
            className="site-deployment-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
      case "neofs":
        return (
          <img
            src={require("../../../../assets/png/neo-light.png")}
            alt="neofs"
            className="site-deployment-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );

      default:
        return (
          <img
            src={require("../../../../assets/png/question_mark.png")}
            alt="?"
            className="site-deployment-logo"
            height={24}
            width={24}
            loading="lazy"
          />
        );
    }
  };

  const showProtocolText = (protocol: string) => {
    switch (protocol) {
      case "arweave":
        return (
          <span className="site-deployment-link">
            Deploying on Arweave, Preview in a minute
          </span>
        );
      case "skynet":
        return (
          <span className="site-deployment-link">
            Deploying on Skynet, Preview in a minute
          </span>
        );
      case "ipfs-filecoin":
        return (
          <span className="site-deployment-link">
            Deploying on IPFS with Filecoin, Preview in a minute
          </span>
        );
      case "ipfs-pinata":
        return (
          <span className="site-deployment-link">
            Deploying on IPFS with Pinata, Preview in a minute
          </span>
        );
      case "neofs":
        return (
          <span className="site-deployment-link">
            Deploying on NeoFS, Preview in a minute
          </span>
        );

      default:
        return (
          <span className="site-deployment-link">
            Cannot find Protocol to Deploy
          </span>
        );
    }
  };

  const showProtocolPrice = (protocol: string) => {
    switch (protocol) {
      case "arweave":
        return <span>{paymentDetails?.providerFee || 0} AR</span>;
      case "skynet":
        return <span>N.A</span>;
      case "neofs":
        return <span>{paymentDetails?.providerFee || 0} NEO</span>;
      case "ipfs-filecoin":
        return <span>{paymentDetails?.providerFee || 0} FIL</span>;
      case "ipfs-pinata":
        return <span>N.A</span>;
      default:
        return <span>{paymentDetails?.providerFee || 0} ?</span>;
    }
  };

  useEffect(() => {
    if (deploymentStatus === "deployed") {
      if (currentSiteDeployConfig?.protocol === "ipfs-filecoin") {
        getFilecoinPinDetais();
      } else if (currentSiteDeployConfig?.protocol === "ipfs-pinata") {
        getPinataPinDetais();
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [deploymentStatus, currentSiteDeployConfig?.protocol]);

  const getFilecoinPinDetais = async () => {
    setPinDetailLoading(true);
    if (deployedLink) {
      const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
      ApiService.getFilecoinPinDetails(cid).subscribe((data) => {
        if (componentIsMounted.current) {
          setPinDetail(data);
          setPinDetailLoading(false);
        }
      });
    } else {
      setPinDetailLoading(false);
    }
  };
  const getPinataPinDetais = async () => {
    setPinDetailLoading(true);
    if (deployedLink) {
      const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
      ApiService.getPinataPinDetails(cid).subscribe((data) => {
        if (componentIsMounted.current) {
          setPinDetail(data);
          setPinDetailLoading(false);
        }
      });
    } else {
      setPinDetailLoading(false);
    }
  };

  const [width, height] = useWindowSize();

  const confettiStyles = {
    zIndex: 2,
    position: "fixed" as "fixed",
    pointerEvents: "none" as "none",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  };

  return (
    <div className="SiteDeployment">
      {confettiStart && (
        <div className="confetti-container">
          <Confetti
            width={width}
            height={height}
            style={confettiStyles}
            numberOfPieces={700}
            recycle={false}
          />
        </div>
      )}
      <div
        className="site-deployment-back"
        onClick={(e) => {
          fetchProject(params.siteid);
          history.push(`/org/${params.orgid}/sites/${params.siteid}/deployments/`);
        }}
      >
        <span>
          <FontAwesomeIcon icon={faChevronLeft} />
        </span>
        <span>All Deploys</span>
      </div>
      <div className="site-deployment-card-container max-width-set">
        <div className="site-deployment-card-header">
          <h2 className="site-deployment-card-header-title">
            {!deploymentLoading ? (
              <>
                <span>
                  {deploymentStatus === "pending" ? (
                    "Deploy in Progress"
                  ) : deploymentStatus === "deployed" ? (
                    <div>Deployment successful</div>
                  ) : (
                    "Deployment failed"
                  )}
                </span>
                {deploymentStatus === "pending" ? (
                  <Lottie options={defaultOptions} height={54} width={76} />
                ) : deploymentStatus === "deployed" ? (
                  <LazyLoadedImage height={24} once>
                    <img
                      src={require("../../../../assets/svg/rocket_background.svg")}
                      alt="rocket"
                      className="rocket-icon"
                      height={24}
                      width={24}
                      loading="lazy"
                    />
                  </LazyLoadedImage>
                ) : deploymentStatus === "failed" ? (
                  <LazyLoadedImage height={24} once>
                    <img
                      src={require("../../../../assets/svg/error.svg")}
                      alt="rocket"
                      className="rocket-icon"
                      height={24}
                      width={24}
                      loading="lazy"
                    />
                  </LazyLoadedImage>
                ) : null}
              </>
            ) : (
              <Skeleton width={200} duration={2} />
            )}
          </h2>
          <p className="site-deployment-card-header-description">
            {!deploymentLoading ? (
              <>
                <u>Production</u>: {currentSiteDeployConfig?.branch}
                {currentSiteDeployConfig.commitHash ? (
                  <>
                    @
                    <a
                      href={githubCommitLink}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="commit-link"
                    >
                      {currentSiteDeployConfig.commitHash.substr(0, 7)}{" "}
                      {currentSiteDeployConfig.commitMessage
                        ? `- ${currentSiteDeployConfig.commitMessage.substr(
                            0,
                            84,
                          )}...`
                        : ""}
                    </a>
                  </>
                ) : null}
              </>
            ) : (
              <Skeleton width={400} duration={2} />
            )}
          </p>
          <p className="site-deployment-card-header-description">
            {!deploymentLoading ? (
              <>
                {deploymentStatus === "pending"
                  ? currentSiteDeployLogs[0]?.time
                    ? `Deployment started ${timeAgo.format(
                        moment(`${currentSiteDeployConfig.createdAt}`).toDate(),
                      )}`
                    : null
                  : `Deployment done at ${moment(
                      currentSiteDeployConfig.updatedAt,
                    ).format("MMM DD, YYYY hh:mm a")}`}
              </>
            ) : (
              <Skeleton width={400} duration={2} />
            )}
          </p>
        </div>
        <div className="site-deployment-card-content">
          {isDomainOrSubPresent && (
            <div className="site-deployment-card-fields">
              <span className="site-deployment-github-icon">
                <FontAwesomeIcon icon={faGlobe} />
              </span>
              {!deploymentLoading ? (
                <>
                  {domains.map((d: IDomain, i: number, a: IDomain[]) => (
                    <>
                      <a
                        href={`https://${d.name}`}
                        className="site-deployment-link"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {d.name}
                      </a>
                      {(i !== a.length - 1 ||
                        subdomains.length > 0 ||
                        hnsDomains.length > 0 ||
                        hnsSubdomains.length > 0 ||
                        ensDomains.length > 0) && (
                        <span className="comma-sep">,</span>
                      )}
                    </>
                  ))}
                  {subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                    <>
                      <a
                        href={`https://${s.name}`}
                        className="site-deployment-link"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {s.name}
                      </a>
                      {(i !== a.length - 1 ||
                        hnsDomains.length > 0 ||
                        hnsSubdomains.length > 0 ||
                        ensDomains.length > 0) && (
                        <span className="comma-sep">,</span>
                      )}
                    </>
                  ))}
                  {hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                    <>
                      <a
                        href={`http://${s.name}`}
                        className="site-deployment-link"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {s.name}
                      </a>
                      {(i !== a.length - 1 ||
                        hnsSubdomains.length > 0 ||
                        ensDomains.length > 0) && (
                        <span className="comma-sep">,</span>
                      )}
                    </>
                  ))}
                  {hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                    <>
                      <a
                        href={`http://${s.name}`}
                        className="site-deployment-link"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {s.name}
                      </a>
                      {(i !== a.length - 1 || ensDomains.length > 0) && (
                        <span className="comma-sep">,</span>
                      )}
                    </>
                  ))}
                  {ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                    <>
                      <a
                        href={`http://${s.name}`}
                        className="site-deployment-link"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {s.name}
                      </a>
                      {i !== a.length - 1 && <span className="comma-sep">,</span>}
                    </>
                  ))}
                </>
              ) : (
                <Skeleton width={300} duration={2} />
              )}
            </div>
          )}
          <div className="site-deployment-card-fields">
            <span className="site-deployment-github-icon">
              <FontAwesomeIcon icon={faGithub} />
            </span>
            {!deploymentLoading ? (
              <a
                href={githubBranchLink}
                className="site-deployment-link"
                target="_blank"
                rel="noopener noreferrer"
              >
                {displayGithubRepo} (branch: {currentSiteDeployConfig?.branch})
              </a>
            ) : (
              <Skeleton width={300} duration={2} />
            )}
          </div>
          <div className="site-deployment-card-fields">
            <LazyLoadedImage height={24} once>
              {showProtocolImage(currentSiteDeployConfig?.protocol)}
            </LazyLoadedImage>
            {!deploymentLoading ? (
              deploymentStatus === "deployed" ? (
                <a
                  href={deployedLink}
                  className="site-deployment-link"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Preview deploy
                </a>
              ) : deploymentStatus === "pending" ? (
                showProtocolText(currentSiteDeployConfig?.protocol)
              ) : (
                <span className="site-deployment-link">
                  Deploying failed, no link available
                </span>
              )
            ) : (
              <Skeleton width={200} duration={2} />
            )}
          </div>
          {paymentStatus === "success" && deploymentStatus === "deployed" && (
            <div className="site-deployment-card-fields">
              <div className="button-container">
                <SharePopup
                  isOpen={confettiStart}
                  link={deployedLink}
                  protocol={currentSiteDeployConfig.protocol}
                  paymentStatus={paymentStatus}
                />
              </div>
            </div>
          )}
        </div>
      </div>
      {deploymentStatus !== "pending" && (
        <div className="site-deployment-card-container deploy-container">
          <div className="site-deployment-header-title">Deploy Summary</div>
          <div className="deploy-summary-item">
            <div className="deploy-summary-item-info-icon">
              <FontAwesomeIcon icon={faInfoCircle} />
            </div>
            <div className="deploy-summary-item-info-container">
              <div className="deploy-summary-item-info-title">
                Total time to Build & Deploy: {buildTime?.min}m {buildTime?.sec}s
              </div>
              {(buildTime?.min !== 0 || buildTime?.sec !== 0) && (
                <div className="deploy-summary-item-info-description">
                  Build started at {currentSiteDeployLogs[0]?.time} and ended at{" "}
                  {currentSiteDeployLogs[currentSiteDeployLogs.length - 1]?.time}.
                </div>
              )}
            </div>
          </div>
        </div>
      )}
      {deploymentStatus !== "pending" && (
        <div className="site-deployment-card-container deploy-container">
          <div className="site-deployment-header-title">Payment Summary</div>
          <div className="site-deployment-body">
            {paymentStatus === "waiting" && (
              <div className="payment-loading">
                <span>
                  <PulseLoader size={20} color={"#3664ae"} />
                </span>
                <span>Waiting for the payment to be processed...</span>
              </div>
            )}
            {paymentStatus === "started" && (
              <div className="payment-loading">
                <span>
                  <PulseLoader size={20} color={"#3664ae"} />
                </span>
                <span>Processing Payment...</span>
              </div>
            )}
            {paymentStatus === "failed" && (
              <div className="payment-failed">
                <span>
                  <LazyLoadedImage height={24} once>
                    <img
                      src={require("../../../../assets/svg/error.svg")}
                      alt="rocket"
                      className="rocket-icon"
                      height={36}
                      width={36}
                      loading="lazy"
                    />
                  </LazyLoadedImage>
                </span>
                <span>{paymentMessage}</span>
                {paymentMessage ===
                  "Payment failed due to insufficient allowance." && (
                  <button
                    className="set-allowance"
                    onClick={() => history.push("/wallet/recharge")}
                  >
                    Set Allowance
                  </button>
                )}
              </div>
            )}
            {paymentStatus === "success" && (
              <>
                <div className="site-deployment-body-item">
                  <label>Build Time:</label>
                  <span>
                    {buildTime?.min}m {buildTime?.sec}s
                  </span>
                </div>
                <div className="site-deployment-body-item">
                  <label>Provider Fee:</label>
                  {showProtocolPrice(currentSiteDeployConfig?.protocol)}
                </div>
                <div className="site-deployment-body-item">
                  <label>Total Fee:</label>
                  <span>
                    {paymentDetails?.argoFee || 0} ${paymentDetails?.token || "ARGO"}
                  </span>
                </div>
                <div className="site-deployment-body-item">
                  <label>Discount:</label>
                  <span>
                    {paymentDetails?.discount || 0} $
                    {paymentDetails?.token || "ARGO"}
                  </span>
                </div>
                <div className="site-deployment-body-item">
                  <label>Final Payment:</label>
                  <span>
                    {paymentDetails?.finalArgoFee || 0} $
                    {paymentDetails?.token || "ARGO"}
                  </span>
                </div>
              </>
            )}
          </div>
        </div>
      )}
      {deploymentStatus === "deployed" &&
        currentSiteDeployConfig?.protocol === "ipfs-filecoin" && (
          <div className="site-deployment-card-container deploy-container">
            <div className="site-deployment-header-title">
              Filecoin Pinning Details
            </div>
            <div className="site-deployment-body">
              <div className="site-deployment-body-item">
                <label>Filecoin CID:</label>
                <span>
                  {!pinDetailLoading ? (
                    pinDetail.cid
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </span>
              </div>
              <div className="site-deployment-body-item">
                <label>Filecoin Pinning Status:</label>
                <span>
                  {!pinDetailLoading ? (
                    pinDetail.isPinned ? (
                      "Pinned"
                    ) : (
                      "Not Pinned"
                    )
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </span>
              </div>
              {!pinDetailLoading && pinDetail.isPinned && (
                <div className="site-deployment-body-item">
                  <label>Filecoin Pinned Date:</label>
                  <span>
                    {!pinDetailLoading ? (
                      moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
                    ) : (
                      <Skeleton width={200} duration={2} />
                    )}
                  </span>
                </div>
              )}
            </div>
          </div>
        )}
      {deploymentStatus === "deployed" &&
        currentSiteDeployConfig?.protocol === "ipfs-pinata" && (
          <div className="site-deployment-card-container deploy-container">
            <div className="site-deployment-header-title">
              Pinata Pinning Details
            </div>
            <div className="site-deployment-body">
              <div className="site-deployment-body-item">
                <label>IPFS CID:</label>
                <span>
                  {!pinDetailLoading ? (
                    pinDetail.cid
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </span>
              </div>
              <div className="site-deployment-body-item">
                <label>IPFS Pinning Status:</label>
                <span>
                  {!pinDetailLoading ? (
                    pinDetail.isPinned ? (
                      "Pinned"
                    ) : (
                      "Not Pinned"
                    )
                  ) : (
                    <Skeleton width={200} duration={2} />
                  )}
                </span>
              </div>
              {!pinDetailLoading && pinDetail.isPinned && (
                <div className="site-deployment-body-item">
                  <label>IPFS Pinned Date:</label>
                  <span>
                    {!pinDetailLoading ? (
                      moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
                    ) : (
                      <Skeleton width={200} duration={2} />
                    )}
                  </span>
                </div>
              )}
            </div>
          </div>
        )}
      <div
        className="site-deployment-card-container deploy-container"
        id="deploy-logs-container"
      >
        <div className="card-header-title deploy-logs-card-title">
          <div className="card-header-deploy-title-container">
            <div className="card-header-deploy-title">Deploy Logs</div>
            <div className="card-header-deploy-subtitle">
              Please note that the realtime log streaming may not show all the logs
              based on your connection bandwidth. Please refresh if you don't see
              some logs
            </div>
          </div>
          {/* <button className="copy-to-clipboard-button">Copy to clipboard</button> */}
          <div className="refresh-control" onClick={deploymentStartup}>
            <FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
          </div>
        </div>
        <div className="deploy-logs-container" id="deploy-logs-list">
          {
            <div className="deploy-logs-items" id={`deploy-logs-items-${1}`} key={1}>
              {currentSiteDeployLogs?.map((currLog, i) => (
                <div
                  className="deploy-logs-items"
                  id={`deploy-logs-items-${i}`}
                  key={i}
                >
                  {currLog.time}:{" "}
                  {currLog.log.indexOf("https://arweave.net/") !== -1 ||
                  currLog.log.indexOf("https://siasky.net/") !== -1 ||
                  currLog.log.indexOf("https://http.fs.neo.org/") !== -1 ||
                  currLog.log.indexOf("https://ipfs.infura.io/ipfs/") !== -1 ? (
                    <a
                      href={currLog.log.trim()}
                      className="log-site-link"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {currLog.log}
                    </a>
                  ) : (
                    currLog.log
                  )}
                </div>
              ))}
            </div>
          }
        </div>
      </div>
    </div>
  );
}

ProjectItem: React.FC<IProjectItemProps> = ({
  type,
  projectName,
  latestDeployment,
  domains,
  subdomains,
  hnsDomains,
  hnsSubdomains,
  ensDomains,
  githubUrl,
  updateTime,
  repo,
  index,
}) => {
  const history = useHistory();

  const { setSelectedProject } = useContext<IActionModel>(ActionContext);
  const { selectedOrg } = useContext<IStateModel>(StateContext);

  let displayGithubRepo = "";
  if (githubUrl) {
    displayGithubRepo = githubUrl.substring(19, githubUrl.length - 4);
  }

  const isDomainOrSubPresent =
    (domains && domains.length > 0) ||
    (subdomains && subdomains.length > 0) ||
    (hnsDomains && hnsDomains.length > 0) ||
    (hnsSubdomains && hnsSubdomains.length > 0) ||
    (ensDomains && ensDomains.length > 0);

  const domainsAttached = [
    ...(domains || []),
    ...(subdomains || []),
    ...(hnsDomains || []),
    ...(hnsSubdomains || []),
    ...(ensDomains || []),
  ];

  return (
    <div className="project-item" key={index}>
      {type === "filled" && (
        <>
          <div className="project-item-header">
            <h3
              className="project-item-title"
              onClick={(e) => {
                setSelectedProject(null);
                history.push(`/org/${selectedOrg?._id}/sites/${repo?._id}/overview`);
              }}
            >
              {projectName}
            </h3>
            {(latestDeployment || isDomainOrSubPresent) && (
              <button
                type="button"
                className="project-item-visit-button"
                onClick={(e) =>
                  window.open(
                    `${
                      domainsAttached.length > 0
                        ? `${
                            domainsAttached[0].type.indexOf("handshake") !== -1
                              ? "http"
                              : "https"
                          }://${domainsAttached[0].name}`
                        : latestDeployment
                    }`,
                    "_blank",
                    "noopener",
                  )
                }
              >
                Visit
              </button>
            )}
          </div>
          {isDomainOrSubPresent && (
            <div className="project-item-body less-bottom-margin">
              <span className="project-item-live-key">Site live at</span>
              {domains &&
                domains.map((d: IDomain, i: number, a: IDomain[]) => (
                  <>
                    <a
                      href={`https://${d.name}`}
                      className="project-item-live-value"
                      target="_blank"
                      rel="noopener noreferrer"
                      key={i}
                    >
                      {d.name}
                    </a>
                    {(i !== a.length - 1 ||
                      (subdomains && subdomains.length > 0) ||
                      (hnsDomains && hnsDomains.length > 0) ||
                      (hnsSubdomains && hnsSubdomains.length > 0) ||
                      (ensDomains && ensDomains.length > 0)) && (
                      <span className="comma-sep">,</span>
                    )}
                  </>
                ))}
              {subdomains &&
                subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                  <>
                    <a
                      href={`https://${s.name}`}
                      className="project-item-live-value"
                      target="_blank"
                      rel="noopener noreferrer"
                      key={i}
                    >
                      {s.name}
                    </a>
                    {(i !== a.length - 1 ||
                      (hnsDomains && hnsDomains.length > 0) ||
                      (hnsSubdomains && hnsSubdomains.length > 0) ||
                      (ensDomains && ensDomains.length > 0)) && (
                      <span className="comma-sep">,</span>
                    )}
                  </>
                ))}
              {hnsDomains &&
                hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                  <>
                    <a
                      href={`http://${s.name}`}
                      className="project-item-live-value"
                      target="_blank"
                      rel="noopener noreferrer"
                      key={i}
                    >
                      {s.name}
                    </a>
                    {(i !== a.length - 1 ||
                      (hnsSubdomains && hnsSubdomains.length > 0) ||
                      (ensDomains && ensDomains.length > 0)) && (
                      <span className="comma-sep">,</span>
                    )}
                  </>
                ))}
              {hnsSubdomains &&
                hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                  <>
                    <a
                      href={`http://${s.name}`}
                      className="project-item-live-value"
                      target="_blank"
                      rel="noopener noreferrer"
                      key={i}
                    >
                      {s.name}
                    </a>
                    {(i !== a.length - 1 ||
                      (ensDomains && ensDomains.length > 0)) && (
                      <span className="comma-sep">,</span>
                    )}
                  </>
                ))}
              {ensDomains &&
                ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                  <>
                    <a
                      href={`http://${s.name}`}
                      className="project-item-live-value"
                      target="_blank"
                      rel="noopener noreferrer"
                      key={i}
                    >
                      {s.name}
                    </a>
                    {i !== a.length - 1 && <span className="comma-sep">,</span>}
                  </>
                ))}
            </div>
          )}
          <div className="project-item-body">
            <span className="project-item-live-key">
              {latestDeployment ? "Latest deployed at" : ""}
            </span>
            <a
              href={`${latestDeployment}`}
              target="_blank"
              rel="noopener noreferrer"
              className="project-item-live-value"
            >
              {latestDeployment}
            </a>
          </div>
          <div className="project-item-footer">
            <div className="project-item-git-integration">
              <FontAwesomeIcon icon={faGithub}></FontAwesomeIcon>
              <a
                href={`${githubUrl}`}
                target="_blank"
                rel="noopener noreferrer"
                className="git-name"
              >
                {displayGithubRepo}
              </a>
            </div>
            <div className="project-item-updated-time">Updated {updateTime}</div>
          </div>
        </>
      )}
      {type === "skeleton" && (
        <>
          <div className="project-item-header">
            <h3 className="project-item-title">
              <Skeleton width={180} duration={2} />
            </h3>
          </div>
          <div className="project-item-body">
            <span className="project-item-live-key">
              <Skeleton width={200} duration={2} />
            </span>
            <span className="project-item-live-value">
              <Skeleton width={300} duration={2} />
            </span>
          </div>
          <div className="project-item-footer">
            <div className="project-item-git-integration">
              <Skeleton width={150} duration={2} />
            </div>
            <div className="project-item-updated-time">
              <Skeleton width={120} duration={2} />
            </div>
          </div>
        </>
      )}
      {type === "empty" && (
        <div
          className="project-item-empty"
          onClick={(e) => history.push("/deploy/new")}
        >
          <div className="project-item-content">
            <div className="project-item-icon">
              <FontAwesomeIcon icon={faFolderPlus}></FontAwesomeIcon>
            </div>
            <div className="project-item-icon-title">Import Project</div>
          </div>
        </div>
      )}
    </div>
  );
}

function NavBar({ classes }: NavBarProps) {
  const { t } = useSafeTranslation();

  const rightSideLinks = [
    {
      title: t('about'),
      icon: faInfoCircle,
      href: 'https://innovation.wfp.org/project/prism',
    },
    {
      title: 'GitHub',
      icon: faGithub,
      href: 'https://github.com/oviohub/prism-frontend',
    },
  ];

  const [openMobileMenu, setOpenMobileMenu] = useState(false);
  const menu = menuList.map(({ title, ...category }) => (
    <MenuItem key={title} title={title} {...category} />
  ));

  // menu for mobile, 1 active accordion at a time so I put the state in here
  const [expanded, setExpanded] = useState('');
  const selectAccordion = (title: string) => {
    setExpanded(title);
  };
  const menuMobile = menuList.map(({ title, ...category }) => (
    <MenuItemMobile
      expanded={expanded}
      selectAccordion={selectAccordion}
      key={title}
      title={title}
      {...category}
    />
  ));

  const buttons = rightSideLinks.map(({ title, icon, href }) => (
    <Grid item key={title}>
      <Typography
        variant="body2"
        component="a"
        target="_blank"
        href={href}
        onClick={() => setOpenMobileMenu(false)}
      >
        <FontAwesomeIcon icon={icon} /> {title}
      </Typography>
    </Grid>
  ));

  return (
    <AppBar position="static" className={classes.appBar}>
      <Toolbar variant="dense">
        <Grid container>
          <Grid item xs={3} className={classes.logoContainer}>
            <Typography
              variant="h6"
              className={classes.logo}
              component={Link}
              to="/"
            >
              {t('Prism')}
            </Typography>
          </Grid>

          <Hidden smDown>
            <Grid className={classes.menuContainer} item xs={6}>
              {menu}
            </Grid>

            <Grid
              spacing={3}
              container
              justify="flex-end"
              alignItems="center"
              item
              xs={3}
            >
              {buttons}
              <LanguageSelector />
            </Grid>
          </Hidden>

          <Hidden mdUp>
            <Grid item xs={9} className={classes.mobileMenuContainer}>
              <Button
                onClick={() => setOpenMobileMenu(prevOpen => !prevOpen)}
                aria-controls={openMobileMenu ? 'mobile-menu-list' : undefined}
                aria-haspopup="true"
                className={classes.menuBars}
              >
                <FontAwesomeIcon icon={faBars} />
              </Button>

              <Drawer
                anchor="right"
                open={openMobileMenu}
                onClose={() => setOpenMobileMenu(false)}
              >
                <div className={classes.mobileDrawerContent}>
                  <Grid container spacing={3}>
                    <Grid container justify="space-around" item>
                      {buttons}
                    </Grid>
                    <Grid container direction="column" item>
                      {menuMobile}
                    </Grid>
                  </Grid>
                </div>
              </Drawer>
            </Grid>
          </Hidden>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

theme: ThemeConfig = {
  Popover: {
    Title: {
      styles: {
        base: {
          paddingRight: 'major-1'
        }
      }
    }
  },
  Tooltip: {
    Content: {
      styles: {
        base: css`
          z-index: 999;
        `
      }
    }
  },
  PageWithSidebar: {
    styles: {
      base: css`
        z-index: 10;
        position: relative;
      `
    }
  },
  PageWithHeader: {
    styles: {
      base: css`
        display: flex;
        flex-direction: column;
        .bb-PageWithHeaderContent {
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .bb-PageContentWrapper {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 0%;
        }
      `
    }
  },
  Container: {
    styles: {
      fluid: {
        maxWidth: '100%'
      }
    }
  },
  Icon: {
    styles: {
      base: {
        color: 'text300'
      }
    },
    iconSets: [
      {
        icons: [
          faComment,
          faThumbsUp,
          faBookmark,
          faTrashAlt,
          faPlusSquare,
          faFileCode,
          faArrowAltCircleLeft,
          faArrowAltCircleRight,
          faShareSquare,
          faImage
        ],
        prefix: 'r-',
        type: 'font-awesome'
      },
      {
        icons: [faMarkdown, faJs, faGithub, faReddit, faGoogle],
        prefix: 'b-',
        type: 'font-awesome'
      }
    ]
  },
  global: {
    fontSize: 16,
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  fonts: {
    // default: 'Comic Sans MS'
  },
  palette: {
    primary: '#d504f8'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  SelectMenu: {
    styles: {
      base: {
        backgroundColor: 'white'
      }
    }
  },
  Button: {
    styles: {
      base: {
        color: 'white'
      },
      ghost: {
        color: 'primary',
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      },
      outlined: {
        borderColor: 'primary',
        borderWidth: '1px',
        borderStyle: 'solid'
      }
    },

    defaultProps: {
      palette: 'primary'
    }
  },
  Text: {
    styles: {
      base: {
        color: 'text300'
      }
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'text300'
      }
    },

    h3: {
      styles: {
        base: {
          color: 'text300',
          fontSize: '1.25rem'
        }
      }
    }
  }
}