text: import React, { Component } from "react";
  import Wrapper from "../wrapper";
  import Menu from "./menu";
  import MobileButton from "./mobile-button";
  import Logo from "./logo";
  import StyledUl from "./ul";
  import StyledLi from "./li";
  import HeaderContainer from "./header";
  import logo from "../../utils/images/pokt-logo.png";
  import PocketService from "../../core/services/pocket-service";
  import { Link, withRouter } from "react-router-dom";
  import { Config } from "../../config/config";
  import IconLogOut from "../../icons/iconLogout";
  import { ROUTES } from "../../utils/routes";
  
  class Header extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isMenuHidden: true,
        isLoggedIn: false,
      };
      this.props = props;
    }
  
    onToggleMenu() {
      this.setState((prevState) => {
        return { isMenuHidden: !prevState.isMenuHidden };
      });
    }
  
    onLogOut() {
      // Remove any information related to the account
      PocketService.removeUserFromCached();
      // Remove any tx information from cached
      PocketService.removeTxFromCached();
      // Clear the local storage
      localStorage.clear();
      // Refresh the page
      window.location.reload();
    }
  
    pushToDetails() {
      this.props.history.push(ROUTES.account);
    }
  
    loggedInCheck() {
      const { addressHex, publicKeyHex, ppk } = PocketService.getUserInfo();
      const userInfo = addressHex && publicKeyHex && ppk;
  
      if (userInfo && !this.state.isLoggedIn) {
        this.setState({
          isLoggedIn: true,
        });
      } else if (!userInfo && this.state.isLoggedIn) {
        this.setState({
          isLoggedIn: false,
        });
      }
    }
  
    componentDidUpdate() {
      this.loggedInCheck();
    }
  
    componentDidMount() {
      this.loggedInCheck();
    }
  
    render() {
      const { isMenuHidden, isLoggedIn } = this.state;
      const {
        location: { pathname },
      } = this.props;
  
      return (
        <HeaderContainer isHidden={isMenuHidden}>
          <Wrapper className="header">
            <Logo href={ROUTES.home}>
              <img src={logo} alt="Pocket Network logo" />
            </Logo>
            <Menu isHidden={isMenuHidden}>
              <StyledUl>
                <div className="separator" />
                {isLoggedIn ? (
                  <StyledLi>
                    <Link
                      to={ROUTES.account}
                      className={
                        pathname === ROUTES.account ? "active" : undefined
                      }
                    >
                      Account Detail
                    </Link>
                  </StyledLi>
                ) : null}
                <StyledLi>
                  <a tartget="_target" href={Config.BUY_POKT_BASE_URL}>
                    Buy POKT
                  </a>
                </StyledLi>
                {isLoggedIn ? (
                  <StyledLi>
                    <button
                      className="nav-button"
                      id="log-out-nav"
                      onClick={this.onLogOut}
                    >
                      Log out
                      <IconLogOut className="log-out-icon" />
                    </button>
                  </StyledLi>
                ) : null}
              </StyledUl>
            </Menu>
            <MobileButton
              onClick={() => this.onToggleMenu()}
              isOpen={!isMenuHidden}
            />
          </Wrapper>
        </HeaderContainer>
      );
    }
  }
  
  export default withRouter(Header);
  