notistack#SnackbarProvider JavaScript Examples

CustomSnackbarProvider = ({ children }) => {
  const notistackRef = useRef();
  const classes = useStyles();
  const onClickDismiss = (key) => () => {
    notistackRef.current.closeSnackbar(key);
  };

  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      ref={notistackRef}
      classes={{
        containerRoot: classes.root,
        variantSuccess: classes.success,
        variantError: classes.error,
        variantWarning: classes.warning,
        variantInfo: classes.info
      }}
      hideIconVariant
      action={(key) => (
        <Box width="2rem">
          <IconButton onClick={onClickDismiss(key)} size="small" className={classes.action}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </Box>
      )}
    >
      {children}
    </SnackbarProvider>
  );
}

App = () => {
  return (
    <div className="App">
      <SnackbarProvider maxSnack={3}>
        <ThemeProvider theme={theme}>
          <Web3Provider
            render={(network) => (
              <div>
                <NarBar />
                <Route exact path="/Alternative-Uniswap-Interface/">
                  <CoinSwapper network={network} />
                </Route>

                <Route exact path="/Alternative-Uniswap-Interface/liquidity">
                  <Liquidity network={network} />
                </Route>
              </div>
            )}
          ></Web3Provider>
        </ThemeProvider>
      </SnackbarProvider>
    </div>
  );
}

App = () => (
  <Provider store={store}>
  <MuiThemeProvider theme={theme}>
    <SnackbarProvider maxSnack={1}>
      <Providers />
    </SnackbarProvider>
  </MuiThemeProvider>
  </Provider>
)

clearConsoleErrors().then(() => {
  const theme = createMuiTheme({
    typography: {
      useNextVariants: true,
      fontFamily: ['"Roboto"', 'sans-serif'],
      fontSize: 13,
      htmlFontSize: 16,
    }
  });

  window.addEventListener('contextmenu', (e) => {
    if (e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, true);

  ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <SnackbarProvider
        maxSnack={3}
        action={[
          <IconButton key="actionButton">
            <Close fontSize="small" color="disabled" />
          </IconButton>
        ]}
      >
        <App />
      </SnackbarProvider>
    </MuiThemeProvider>,
    document.getElementById('root')
  );
});

SnackbarTrigger = ({ classes }) => {
  const notistackRef = React.createRef();
  const onClickDismiss = (key) => () => {
    notistackRef.current.closeSnackbar(key);
  };

  return (
    <SnackbarProvider
      ref={notistackRef}
      maxSnack={3}
      autoHideDuration={2000}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      dense
      preventDuplicate
      classes={{
        containerRoot: classes.notistackContainerRoot,
      }}
      action={(key) => (
        <Button color="inherit" onClick={onClickDismiss(key)}>
          Dismiss
        </Button>
      )}
    >
      <Inner />
    </SnackbarProvider>
  );
}

SnackbarTrigger = () => {
  const notistackRef = useRef(null);
  const action = useCallback((key) => {
    const onClickDismiss = () => {
      notistackRef.current.closeSnackbar(key);
    };

    return (
      <Button color="inherit" onClick={onClickDismiss}>
        Dismiss
      </Button>
    );
  }, [notistackRef]);

  return (
    <SnackbarProvider
      ref={notistackRef}
      maxSnack={3}
      autoHideDuration={2000}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      dense
      preventDuplicate
      sx={{ mt: 1 }}
      action={action}
    >
      <Inner />
    </SnackbarProvider>
  );
}

ReactDOM.render(<SnackbarProvider
  maxSnack={3}
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'center'
  }}
                ><App />
</SnackbarProvider>, document.getElementById('root'))

function App() {
  return (
    <SnackbarProvider dense maxSnack={3}>
      <Router>{renderRoutes(routes)}</Router>
    </SnackbarProvider>
  );
}

function App({ Component, classes, pageProps }) {
  const firebase = new Firebase();

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
    async function verifyAuthUser() {
      auth.onAuthStateChanged(async (authUser) => {
        if (authUser && analytics) {
          analytics.setUserId(authUser.uid);
        }
      });
    }
    verifyAuthUser();
  }, []);

  return (
    <>
      <AuthContext.Provider>
        <FirebaseContext.Provider value={firebase}>
          <SnackbarProvider
            preventDuplicate
            elevation={0}
            classes={{
              root: classes.snack,
              variantSuccess: classes.success,
              variantError: classes.error,
              variantWarning: classes.warning,
              variantInfo: classes.info,
            }}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'right',
            }}
            maxSnack={3}
          >
            <ThemeProvider theme={materialUITheme}>
              <Component {...pageProps} />
            </ThemeProvider>
          </SnackbarProvider>
          <style jsx global>
            {nprogressStyles}
          </style>
          <style jsx global>
            {globalTheme}
          </style>
        </FirebaseContext.Provider>
      </AuthContext.Provider>
      <CssBaseline />
    </>
  );
}

export default function App() {
  // TODO: add toggle for dark mode
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
          primary: blue,
        },
        // TODO consolidate popup dimensions
        ext: '450',
      }),
    [prefersDarkMode],
  );

  // Disallow rendering inside an iframe to prevent clickjacking.
  if (window.self !== window.top) {
    return null;
  }

  let appElement = (
    <NavigationFrame>
      <Suspense fallback={<LoadingIndicator />}>
        <PageContents />
      </Suspense>
    </NavigationFrame>
  );

  if (isExtension) {
    appElement = (
      <ConnectedWalletsProvider>
        <PageProvider>{appElement}</PageProvider>
      </ConnectedWalletsProvider>
    );
  }

  return (
    <Suspense fallback={<LoadingIndicator />}>
      <ThemeProvider theme={theme}>
        <CssBaseline />

        <ConnectionProvider>
          <TokenRegistryProvider>
            <SnackbarProvider maxSnack={5} autoHideDuration={8000}>
              <WalletProvider>{appElement}</WalletProvider>
            </SnackbarProvider>
          </TokenRegistryProvider>
        </ConnectionProvider>
      </ThemeProvider>
    </Suspense>
  );
}

export default function IntegrationNotistack() {
  return (
    <SnackbarProvider maxSnack={3}>
      <StackedSnackbar />
    </SnackbarProvider>
  );
}

export default function App(props) {
	// const { window } = props;
	const classes = useStyles();
	const theme = useTheme();
	const [open, setOpen] = React.useState(false);
	const [showTour, setShowTour] = React.useState(false);
	const [value, setValue] = React.useState('recents');
	const [darkMode, setDarkMode] = useLocalStorage('cedalo.managementcenter.darkMode');

	const [response, loading, hasError] = useFetch(`${process.env.PUBLIC_URL}/api/theme`);
	const [responseConfig, loadingConfig, hasErrorConfig] = useFetch(`${process.env.PUBLIC_URL}/api/config`);

	if ((hasError || response) && (hasErrorConfig || responseConfig)) {
		let appliedTheme = darkMode === 'true' ? darkTheme : customTheme;
		let hideConnections = (typeof responseConfig?.hideConnections === 'boolean') ? responseConfig?.hideConnections : false;
		let hideInfoPage = (typeof responseConfig?.hideInfoPage === 'boolean') ? responseConfig?.hideInfoPage : false;
		let hideLogoutButton = (typeof responseConfig?.hideLogoutButton === 'boolean') ? responseConfig?.hideLogoutButton : false;
		let hideProfileButton = (typeof responseConfig?.hideProfileButton === 'boolean') ? responseConfig?.hideProfileButton : false;
		const onChangeTheme = () => {
			setDarkMode(darkMode === 'true' ? 'false' : 'true');
		};

		const handleStartTour = () => {
			setOpen(true);
			setShowTour(true);
		};

		if (response) {
			customTheme.palette.primary.main = response?.light?.palette?.primary?.main;
			customTheme.palette.secondary.main = response?.light?.palette?.secondary?.main;
			darkTheme.palette.primary.main = response?.dark?.palette?.primary?.main;
			darkTheme.palette.secondary.main = response?.dark?.palette?.secondary?.main;
			if (response?.dark?.palette?.background?.default) {
				darkTheme.palette.background.default = response?.dark?.palette?.background?.default;
			}
			if (response?.dark?.palette?.background?.paper) {
				darkTheme.palette.background.paper = response?.dark?.palette?.background?.paper;
			}
			if (response?.dark?.palette?.text) {
				darkTheme.palette.text.primary = response?.dark?.palette?.text?.primary;
			}
			if (response?.dark?.palette?.tables) {
				darkTheme.palette.tables = response?.dark?.palette?.tables;
			}
			if (response?.dark?.palette?.dashboard) {
				darkTheme.palette.dashboard = response?.dark?.palette?.dashboard;
			}
			if (response?.light?.palette?.dashboardIcons) {
				customTheme.palette.dashboard = response?.light?.palette?.dashboard;
			}
			if (response?.dark?.palette?.drawer) {
				darkTheme.palette.drawer = response?.dark?.palette?.drawer;
			}
		}

		const onTourStateChange = (event) => {
			if (event.action === 'close' || event.action === 'reset') {
				// TODO: this is a hack to prevent the
				// strange main menu behavior when the
				// in app tour selects the menu items
				window.location.reload();
			}
		};

		const handleChange = (event, newValue) => {
			setValue(newValue);
		};

		const handleDrawerOpen = () => {
			setOpen(true);
		};

		const handleDrawerClose = () => {
			setOpen(false);
		};

		//   const container = window !== undefined ? () => window().document.body : undefined;

		return (
			<ThemeProvider theme={appliedTheme}>
				<SnackbarProvider>
				<Joyride
					run={showTour}
					continuous={true}
					//   getHelpers={this.getHelpers}
					scrollToFirstStep={true}
					showProgress={true}
					showSkipButton={true}
					steps={steps}
					callback={onTourStateChange}
					styles={{
						options: {
							zIndex: 5000
						}
					}}
				/>
				<ConfirmProvider>
					<CssBaseline />
					<Router basename={process.env.PUBLIC_URL}>
						<Provider store={store}>
							<WebSocketProvider>
								<div className={classes.root}>
									<NewsletterPopup />
									<OnBoardingDialog />
									<Switch>
										<Route path="/login">
											<AppBar
												position="fixed"
												className={clsx(classes.appBar, {
													[classes.appBarShift]: open
												})}
											>
												<Toolbar>
													<Typography variant="h6" noWrap></Typography>
												</Toolbar>
											</AppBar>
											{/* <Container className={classes.container}>
					<Login />
				  </Container> */}
										</Route>
										<Route path="/">
											<AppBar
												position="fixed"
												className={clsx(classes.appBar, {
													[classes.appBarShift]: open
												})}
											>
												<Toolbar>
													<IconButton
														color="inherit"
														aria-label="open drawer"
														onClick={handleDrawerOpen}
														edge="start"
														className={clsx(classes.menuButton, {
															[classes.hide]: open
														})}
													>
														<MenuIcon />
													</IconButton>
													<Typography noWrap>
														<img
															className={clsx(classes.logo)}
															src={
																darkMode === 'true'
																	? response?.dark?.logo?.path || file
																	: response?.light?.logo?.path || file
															}
															style={
																response?.light?.logo?.height &&
																response?.light?.logo?.width && {
																	height: response?.light?.logo?.height,
																	width: response?.light?.logo?.width
																}
															}
														/>
													</Typography>
													<section className={classes.rightToolbar}>
														<BrokerSelect />
														<Tooltip title="Switch mode">
															<IconButton
																edge="end"
																aria-label="Theme Mode"
																aria-controls="theme-mode"
																aria-haspopup="true"
																onClick={() => onChangeTheme()}
																color="inherit"
																className={classes.toolbarButton}
															>
																<ThemeModeIcon fontSize="small" />
															</IconButton>
														</Tooltip>
														{ !hideInfoPage ? <InfoButton /> : null }
														<Tooltip title="Start tour">
															<IconButton
																edge="end"
																aria-label="Tour"
																aria-controls="tour"
																aria-haspopup="true"
																onClick={() => handleStartTour()}
																color="inherit"
																className={classes.toolbarButton}
															>
																<TourIcon fontSize="small" />
															</IconButton>
														</Tooltip>

														{ !hideProfileButton ? <ProfileButton /> : null }
														{ !hideLogoutButton ? <LogoutButton /> : null }

														{/* <IconButton
						  edge="end"
						  aria-label="Notifications"
						  aria-controls="notifications"
						  aria-haspopup="true"
						  // onClick={() => setDarkMode(!darkMode)}
						  color="inherit"
						  className={classes.toolbarButton}
						  >
							  <NotificationsIcon />
						  </IconButton> */}
													</section>
												</Toolbar>
											</AppBar>
											{/* <NewsDrawer /> */}

											<nav>
												{/* <Hidden xsDown implementation="css"> */}
												<CustomDrawer hideConnections={hideConnections} open={open} handleDrawerOpen={handleDrawerOpen} handleDrawerClose={handleDrawerClose} />
											</nav>
											<LicenseErrorDialog />
											<DisconnectedDialog />

											<Container className={classes.container}>											
												<AppRoutes />
											</Container>
										</Route>
									</Switch>
								</div>
							</WebSocketProvider>
						</Provider>
					</Router>
				</ConfirmProvider>
				</SnackbarProvider>
			</ThemeProvider>
		);
	} else {
		return null;
	}
}