add app notifications

tauri-wallet/package.json

@@ -18,6 +18,7 @@
     "@types/react-dom": "^17.0.9",
     "bs58": "^4.0.1",
     "clsx": "^1.1.1",
+    "notistack": "^1.0.10",
     "qrcode.react": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

tauri-wallet/src/context/main.tsx

@@ -1,7 +1,10 @@
 import React, { createContext, useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
+import { useSnackbar } from 'notistack'
 import { TClientDetails, TSignInWithMnemonic } from '../types'
 import { TUseGetBalance, useGetBalance } from '../hooks/useGetBalance'
+import { Button } from '@material-ui/core'
+import { theme } from '../theme'
 
 export const ADMIN_ADDRESS = 'punk1h3w4nj7kny5dfyjw2le4vm74z03v9vd4dstpu0'
 
@@ -34,6 +37,7 @@ export const ClientContextProvider = ({
 
   const history = useHistory()
   const getBalance = useGetBalance()
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
   useEffect(() => {
     !clientDetails ? history.push('/signin') : history.push('/balance')
@@ -53,6 +57,24 @@ export const ClientContextProvider = ({
       setBandwidthLimit(0)
       setBandwidthUsed(0)
       setss5IsActive(false)
+      enqueueSnackbar(
+        "You're out of bandwidth. You'll need to purchase more to continue using Socks5",
+        {
+          variant: 'error',
+          anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
+          persist: true,
+          action: (key) => (
+            <Button
+              style={{
+                color: theme.palette.common.white,
+              }}
+              onClick={() => closeSnackbar(key)}
+            >
+              Dismiss
+            </Button>
+          ),
+        }
+      )
       clearTimeout(timer)
     }
   }, [ss5IsActive, bandwidthUsed, bandwidthLimit, handleSetBandwidthLimit])

tauri-wallet/src/index.tsx

@@ -9,12 +9,12 @@ import { ClientContext, ClientContextProvider } from './context/main'
 import { ApplicationLayout } from './layouts'
 import { SignIn } from './routes/sign-in'
 import { Admin, ErrorFallback } from './components'
+import { SnackbarProvider } from 'notistack'
 
-const AppWrapper = () => {
+const Pages = () => {
   const { clientDetails } = useContext(ClientContext)
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
+    <>
       {!clientDetails ? (
         <SignIn />
       ) : (
@@ -25,18 +25,23 @@ const AppWrapper = () => {
           </>
         </ApplicationLayout>
       )}
-    </ThemeProvider>
+    </>
   )
 }
 
 const App = () => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <Router>
-        <ClientContextProvider>
-          <AppWrapper />
-        </ClientContextProvider>
-      </Router>
+      <ThemeProvider theme={theme}>
+        <SnackbarProvider maxSnack={3}>
+          <CssBaseline />
+          <Router>
+            <ClientContextProvider>
+              <Pages />
+            </ClientContextProvider>
+          </Router>
+        </SnackbarProvider>
+      </ThemeProvider>
     </ErrorBoundary>
   )
 }

tauri-wallet/src/routes/SOCKS5/Cards.tsx

@@ -49,9 +49,10 @@ const InactiveChip = () => {
 
 export const TopCard: React.FC<{
   isActive: boolean
+  disabled: boolean
   plan: string
   toggleIsActive: () => void
-}> = ({ isActive, plan, toggleIsActive }) => {
+}> = ({ isActive, disabled, plan, toggleIsActive }) => {
   const theme: Theme = useTheme()
   return (
     <Card style={{ padding: theme.spacing(1.5) }} variant="outlined">
@@ -61,11 +62,16 @@ export const TopCard: React.FC<{
         action={
           <IconButton
             onClick={toggleIsActive}
-            style={{
-              color: isActive
-                ? theme.palette.success.main
-                : theme.palette.error.main,
-            }}
+            disabled={disabled}
+            style={
+              !disabled
+                ? {
+                    color: isActive
+                      ? theme.palette.success.main
+                      : theme.palette.error.main,
+                  }
+                : {}
+            }
           >
             <PowerSettingsNew />
           </IconButton>
@@ -77,8 +83,10 @@ export const TopCard: React.FC<{
 
 export const MainCard: React.FC<{
   isActive: boolean
+  disabled?: boolean
+  buyBandwidth: () => void
   toggleIsActive: () => void
-}> = ({ isActive, toggleIsActive }) => {
+}> = ({ isActive, disabled, buyBandwidth, toggleIsActive }) => {
   const theme: Theme = useTheme()
 
   return (
@@ -104,6 +112,7 @@ export const MainCard: React.FC<{
               }}
               size="large"
               disableElevation
+              onClick={buyBandwidth}
             >
               Puchase bandwidth
             </Button>
@@ -114,6 +123,7 @@ export const MainCard: React.FC<{
               size="large"
               disableElevation
               onClick={toggleIsActive}
+              disabled={disabled}
             >
               {isActive ? 'Disabled' : 'Enable'}
             </Button>

tauri-wallet/src/routes/SOCKS5/Dashboard.tsx

@@ -4,15 +4,20 @@ import { useTheme } from '@material-ui/styles'
 import { NymCard } from '../../components'
 import { ClientContext } from '../../context/main'
 import { MainCard, TopCard } from './Cards'
-import { DownloadCard, LimitCard, UploadCard } from './DataCards'
+import { InboundCard, LimitCard, OutboundCard } from './DataCards'
 import { Info } from './Info'
 
 type TDashboardProps = {
   plan: string
+  buyBandwidth: () => void
 }
 
-export const Dashboard: React.FC<TDashboardProps> = ({ plan }) => {
-  const { ss5IsActive, toggleSs5 } = useContext(ClientContext)
+export const Dashboard: React.FC<TDashboardProps> = ({
+  plan,
+  buyBandwidth,
+}) => {
+  const { ss5IsActive, toggleSs5, bandwidthLimit, bandwidthUsed } =
+    useContext(ClientContext)
   const theme: Theme = useTheme()
   return (
     <NymCard
@@ -27,17 +32,23 @@ export const Dashboard: React.FC<TDashboardProps> = ({ plan }) => {
               isActive={ss5IsActive}
               toggleIsActive={toggleSs5}
               plan={plan}
+              disabled={bandwidthLimit === bandwidthUsed}
             />
           </Grid>
           <Grid item xs={12}>
-            <MainCard isActive={ss5IsActive} toggleIsActive={toggleSs5} />
+            <MainCard
+              isActive={ss5IsActive}
+              toggleIsActive={toggleSs5}
+              disabled={bandwidthLimit === bandwidthUsed}
+              buyBandwidth={buyBandwidth}
+            />
           </Grid>
 
           <Grid item xs={4}>
-            <UploadCard isActive={ss5IsActive} />
+            <OutboundCard isActive={ss5IsActive} />
           </Grid>
           <Grid item xs={4}>
-            <DownloadCard isActive={ss5IsActive} />
+            <InboundCard isActive={ss5IsActive} />
           </Grid>
           <Grid item xs={4}>
             <LimitCard isActive={ss5IsActive} />

tauri-wallet/src/routes/SOCKS5/DataCards.tsx

@@ -31,7 +31,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export const UploadCard: React.FC<{ isActive?: boolean }> = ({ isActive }) => {
+export const OutboundCard: React.FC<{ isActive?: boolean }> = ({
+  isActive,
+}) => {
   const classes = useStyles()
   return (
     <Card className={classes.card} variant="outlined">
@@ -66,10 +68,9 @@ export const UploadCard: React.FC<{ isActive?: boolean }> = ({ isActive }) => {
   )
 }
 
-export const DownloadCard: React.FC<{ isActive?: boolean }> = ({
-  isActive,
-}) => {
+export const InboundCard: React.FC<{ isActive?: boolean }> = ({ isActive }) => {
   const classes = useStyles()
+  const { bandwidthUsed } = useContext(ClientContext)
   return (
     <Card className={classes.card} variant="outlined">
       <CardHeader title="Inbound" action={<ToggleData />} />
@@ -89,7 +90,7 @@ export const DownloadCard: React.FC<{ isActive?: boolean }> = ({
             ) : (
               <>
                 <Typography variant="h3">
-                  102
+                  {bandwidthUsed}
                   <Typography component="span" color="textSecondary">
                     mb
                   </Typography>

tauri-wallet/src/routes/SOCKS5/index.tsx

@@ -31,7 +31,9 @@ export const Socks5 = () => {
           </Box>
         )}
 
-        {!isLoading && !!plan && <Dashboard plan={plan} />}
+        {!isLoading && !!plan && (
+          <Dashboard plan={plan} buyBandwidth={() => setPlan(undefined)} />
+        )}
 
         {!isLoading && !plan && (
           <Setup