@material-ui/icons#ExitToAppOutlined TypeScript Examples

The following examples show how to use @material-ui/icons#ExitToAppOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Toolbar.tsx    From homebase-app with MIT License 4 votes vote down vote up 
Navbar: React.FC<{ mode: "creator" | "explorer", disableMobileMenu?: boolean }> = ({
  mode,
  children,
  disableMobileMenu
}) => {
  const { connect, account, reset, changeNetwork, network } = useTezos();
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );
  const [popperOpen, setPopperOpen] = useState(false);
  const theme = useTheme();
  const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"));
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));

  const [networkAnchorEl, setNetworkAnchorEl] =
    React.useState<HTMLButtonElement | null>(null);
  const [networkPopperOpen, setNetworkPopperOpen] = useState(false);

  const handleNetworkClick = (event: React.MouseEvent<any>) => {
    setNetworkAnchorEl(event.currentTarget);
    setNetworkPopperOpen(!networkPopperOpen);
  };

  const handleNetworkChange = (network: Network) => {
    changeNetwork(network);
    setPopperOpen(!popperOpen);
    setNetworkPopperOpen(!networkPopperOpen);
    history.push("/explorer");
  };

  const handleClick = (event: React.MouseEvent<any>) => {
    setAnchorEl(event.currentTarget);
    setPopperOpen(!popperOpen);
  };

  const handleLogout = () => {
    reset();
    setPopperOpen(false);
  };

  const handleCopy = (address: string) => {
    navigator.clipboard.writeText(address);
    setPopperOpen(false);
  };

  const history = useHistory();

  return (
    <StyledAppBar>
      <StyledToolbar>
        <Header
          container
          direction={isMobileExtraSmall ? "column" : "row"}
          alignItems="center"
          wrap="wrap"
        >
          {mode === "explorer" && (
            <Grid item>
              <Box onClick={() => history.push("/explorer")}>
                <ToolbarContainer container alignItems="center" wrap="nowrap">
                  <Grid item>
                    <LogoItem src={HomeButton} />
                  </Grid>
                  <Grid item>
                    <Box paddingLeft="10px">
                      <LogoText color="textSecondary">Homebase</LogoText>
                    </Box>
                  </Grid>
                </ToolbarContainer>
              </Box>
            </Grid>
          )}

          <Grid item>
            <Grid
              container
              justify={isMobileExtraSmall ? "center" : "flex-end"}
            >
              {account ? (
                <>
                  <Grid
                    container
                    alignItems="center"
                    justify={isMobileExtraSmall ? "center" : "flex-end"}
                  >
                    {children}
                    <AddressBarWrapper item>
                      <AddressContainer
                        container
                        alignItems="center"
                        wrap="nowrap"
                        justify="flex-end"
                        onClick={handleClick}
                        style={{ gap: 8 }}
                      >
                        <Grid item>
                          <ProfileAvatar size={22} address={account} />
                        </Grid>
                        <Grid item>
                          <Typography>
                            <UserProfileName address={account} short={true} />
                          </Typography>
                        </Grid>
                      </AddressContainer>
                    </AddressBarWrapper>
                  </Grid>

                  <StyledPopover
                    id={"wallet-Popper"}
                    open={popperOpen}
                    anchorEl={anchorEl}
                    style={{ zIndex: 1500, borderRadius: 4 }}
                    onClose={() => {
                      setPopperOpen(false);
                    }}
                    PaperProps={{
                      style: {
                        borderRadius: 4,
                        backgroundColor: "transparent",
                      },
                    }}
                  >
                    <AddressMenu>
                      <AddressMenuItem
                        container
                        alignItems="center"
                        onClick={() => handleCopy(account)}
                      >
                        <AddressMenuIcon item>
                          <FileCopyOutlined
                            color="inherit"
                            fontSize="inherit"
                          />
                        </AddressMenuIcon>
                        <Grid item>
                          <Typography variant="subtitle2" color="textSecondary">
                            {toShortAddress(account)}
                          </Typography>
                        </Grid>
                      </AddressMenuItem>
                      <AddressMenuItem
                        container
                        alignItems="center"
                        onClick={handleNetworkClick}
                      >
                        <Grid item>
                          <Typography variant="subtitle2" color="textSecondary">
                            Change network ({network})
                          </Typography>
                        </Grid>
                      </AddressMenuItem>
                      <AddressMenuItem
                        style={{
                          borderTop: "2px solid rgba(255, 255, 255, 0.2)",
                        }}
                        container
                        alignItems="center"
                        onClick={handleLogout}
                      >
                        <AddressMenuIcon item>
                          <ExitToAppOutlined
                            color="inherit"
                            fontSize="inherit"
                          />
                        </AddressMenuIcon>
                        <Grid item>
                          <Typography variant="subtitle2" color="textSecondary">
                            Log out
                          </Typography>
                        </Grid>
                      </AddressMenuItem>
                    </AddressMenu>
                  </StyledPopover>
                </>
              ) : !isMobileSmall ? (
                <Grid container justify="flex-end" wrap="nowrap" style={{ gap: 8 }}>
                  <Grid item>
                    <ChangeNetworkButton />
                  </Grid>
                  <Grid item>
                    <ConnectWalletButton connect={() => connect()} />
                  </Grid>
                </Grid>
              ) : (
                <Grid container>
                  <Grid item>
                    <ViewButton variant="outlined" onClick={() => connect()}>
                      CONNECT
                    </ViewButton>
                  </Grid>
                </Grid>
              )}
            </Grid>
          </Grid>
        </Header>
        <NavigationMenu disableMobileMenu={disableMobileMenu}/>
      </StyledToolbar>
      <NetworkMenu
        open={networkPopperOpen}
        anchorEl={networkAnchorEl}
        onClose={() => {
          setNetworkPopperOpen(false);
        }}
        handleNetworkChange={handleNetworkChange}
      />
    </StyledAppBar>
  );
}