feat: action bars

solana-labs · Oct 3, 2019 · e84f466 · e84f466
1 parent 2e84f86
commit e84f466
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "mobx": "^5.14.0",
     "mobx-react-lite": "^1.4.1",
     "nocache": "^2.1.0",
+    "notistack": "^0.9.2",
     "pem": "^1.14.3",
     "promise.allsettled": "^1.0.1",
     "prop-types": "^15.7.2",

diff --git a/src/AppV2.js b/src/AppV2.js
@@ -1,6 +1,7 @@
 import {CssBaseline, makeStyles} from '@material-ui/core';
 import {MuiThemeProvider} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
+import {SnackbarProvider} from 'notistack';
 import React, {lazy, Suspense} from 'react';
 import {hot} from 'react-hot-loader/root';
 import {Route, Switch} from 'react-router-dom';
@@ -9,6 +10,7 @@ import Footer from 'v2/components/Footer';
 import theme from 'v2/theme';
 import FailedPanel from 'v2/components/UI/FailedPanel';
 import Socket from 'v2/stores/socket';
+import getColor from 'v2/utils/getColor';
 
 try {
   Socket.init();
@@ -33,88 +35,109 @@ const ApplicationDetail = lazy(() =>
 );
 const Favorites = lazy(() => import('v2/components/Favorites'));
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    overflow: 'hidden',
-    minHeight: '100vh',
-  },
-  content: {
-    marginLeft: 50,
-    minWidth: '1px',
-    padding: '50px 24px 0 24px',
-    maxWidth: 'calc(100% - 50px)',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    [theme.breakpoints.down('sm')]: {
-      marginLeft: 0,
-      padding: 0,
-      paddingTop: 80,
-      maxWidth: '100%',
+const useStyles = makeStyles(() => {
+  return {
+    root: {
+      display: 'flex',
+      overflow: 'hidden',
+      minHeight: '100vh',
     },
-  },
-  toolbar: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: '0 8px',
-    ...theme.mixins.toolbar,
-    [theme.breakpoints.down('md')]: {
-      minHeight: 85,
+    content: {
+      marginLeft: 50,
+      minWidth: '1px',
+      padding: '50px 24px 0 24px',
+      maxWidth: 'calc(100% - 50px)',
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      [theme.breakpoints.down('sm')]: {
+        marginLeft: 0,
+        padding: 0,
+        paddingTop: 80,
+        maxWidth: '100%',
+      },
     },
-    [theme.breakpoints.up('md')]: {
-      minHeight: 50,
+    toolbar: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      padding: '0 8px',
+      ...theme.mixins.toolbar,
+      [theme.breakpoints.down('md')]: {
+        minHeight: 85,
+      },
+      [theme.breakpoints.up('md')]: {
+        minHeight: 50,
+      },
     },
-  },
-}));
+    success: {
+      backgroundColor: getColor('grey2')(theme),
+      color: getColor('white')(theme),
+    },
+  };
+});
 
 const App = () => {
   const classes = useStyles();
   const {hasError} = Socket;
 
   return (
     <MuiThemeProvider theme={theme}>
-      <div className={classes.root}>
-        <CssBaseline />
-        <Header />
+      <SnackbarProvider
+        classes={{
+          variantSuccess: classes.success,
+        }}
+        maxSnack={3}
+      >
+        <div className={classes.root}>
+          <CssBaseline />
+          <Header />
 
-        <div className={classes.content}>
-          <div className={classes.toolbar} />
-          {hasError && <FailedPanel />}
-          <Suspense fallback={<div>Loading...</div>}>
-            <Switch>
-              <Route exact path="/" component={Dashboard} />
-              <Route exact path="/validators" component={Validators} />
-              <Route exact path="/validators/all" component={ValidatorsAll} />
-              <Route exact path="/validators/:id" component={ValidatorDetail} />
-              <Route exact path="/tour-de-sol" component={TourDeSol} />
-              <Route exact path="/blocks" component={Blocks} />
-              <Route exact path="/blocks/timeline/:start" component={Blocks} />
-              <Route exact path="/blocks/:id" component={BlockDetail} />
-              <Route exact path="/transactions" component={Transactions} />
-              <Route
-                exact
-                path="/transactions/timeline/:start"
-                component={Transactions}
-              />
-              <Route
-                exact
-                path="/transactions/:id"
-                component={TransactionDetail}
-              />
-              <Route exact path="/applications" component={Applications} />
-              <Route
-                exact
-                path="/applications/:id"
-                component={ApplicationDetail}
-              />
-              <Route exact path="/favorites" component={Favorites} />
-            </Switch>
-          </Suspense>
-          <Footer />
+          <div className={classes.content}>
+            <div className={classes.toolbar} />
+            {hasError && <FailedPanel />}
+            <Suspense fallback={<div>Loading...</div>}>
+              <Switch>
+                <Route exact path="/" component={Dashboard} />
+                <Route exact path="/validators" component={Validators} />
+                <Route exact path="/validators/all" component={ValidatorsAll} />
+                <Route
+                  exact
+                  path="/validators/:id"
+                  component={ValidatorDetail}
+                />
+                <Route exact path="/tour-de-sol" component={TourDeSol} />
+                <Route exact path="/blocks" component={Blocks} />
+                <Route
+                  exact
+                  path="/blocks/timeline/:start"
+                  component={Blocks}
+                />
+                <Route exact path="/blocks/:id" component={BlockDetail} />
+                <Route exact path="/transactions" component={Transactions} />
+                <Route
+                  exact
+                  path="/transactions/timeline/:start"
+                  component={Transactions}
+                />
+                <Route
+                  exact
+                  path="/transactions/:id"
+                  component={TransactionDetail}
+                />
+                <Route exact path="/applications" component={Applications} />
+                <Route
+                  exact
+                  path="/applications/:id"
+                  component={ApplicationDetail}
+                />
+                <Route exact path="/favorites" component={Favorites} />
+              </Switch>
+            </Suspense>
+            <Footer />
+          </div>
         </div>
-      </div>
+      </SnackbarProvider>
     </MuiThemeProvider>
   );
 };

diff --git a/src/v2/components/TourDeSol/index.jsx b/src/v2/components/TourDeSol/index.jsx
@@ -16,7 +16,13 @@ import Table from './Table';
 import Cards from './Cards';
 import useStyles from './styles';
 
-const TourDeSol = ({history, location}: {history: RouterHistory, location: Location}) => {
+const TourDeSol = ({
+  history,
+  location,
+}: {
+  history: RouterHistory,
+  location: Location,
+}) => {
   const {endpointName} = socketActions;
   const queryParams = queryParse(location.search);
   useEffect(() => {

diff --git a/src/v2/components/UI/CopyBtn/index.jsx b/src/v2/components/UI/CopyBtn/index.jsx
@@ -1,19 +1,29 @@
 // @flow
 import React from 'react';
+import {withSnackbar, WithSnackbarProps} from 'notistack';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {ReactComponent as CopyIcon} from 'v2/assets/icons/copy.svg';
 
 import useStyles from './styles';
 
-const CopyBtn = ({text}: {text: string | number}) => {
+const CopyBtn = ({
+  text,
+  enqueueSnackbar,
+}: {text: string | number} & WithSnackbarProps) => {
   const classes = useStyles();
+  const onCopy = () => {
+    enqueueSnackbar('Successfully copied to clipboard', {
+      variant: 'success',
+      autoHideDuration: 2000,
+    });
+  };
   return (
-    <CopyToClipboard text={text}>
+    <CopyToClipboard text={text} onCopy={onCopy}>
       <div className={classes.root}>
         <CopyIcon />
       </div>
     </CopyToClipboard>
   );
 };
 
-export default CopyBtn;
+export default withSnackbar(CopyBtn);
diff --git a/yarn.lock b/yarn.lock
@@ -11207,6 +11207,16 @@ normalize-url@^4.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.1.0.tgz#307e74c87473efa81969ad1b4bb91f1990178904"
   integrity sha512-X781mkWeK6PDMAZJfGn/wnwil4dV6pIdF9euiNqtA89uJvZuNDJO2YyJxiwpPhTQcF5pYUU1v+kcOxzYV6rZlA==
 
+notistack@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.9.2.tgz#333ca7e08e85ae10867b1e8be5d82b149676aad6"
+  integrity sha512-Z2zi3ankqvwmrQvUx7SHM2X3P8llbPA/O1nM1hqn2fGuffn40Fi8isw701pdxczxA6S7huSyfOE/ZPgeTpWmrQ==
+  dependencies:
+    classnames "^2.2.6"
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+
 npm-audit-report@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-1.3.2.tgz#303bc78cd9e4c226415076a4f7e528c89fc77018"