use react-toastify to ismplify toasts, and add promise based updates

workbenchapp · Apr 2, 2022 · 3715350 · 3715350
1 parent e28868e
commit 3715350
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 128 deletions.
diff --git a/package.json b/package.json
@@ -257,6 +257,7 @@
     "react-redux": "^7.2.6",
     "react-router": "^6.2.2",
     "react-router-dom": "^6.2.2",
+    "react-toastify": "^8.2.0",
     "regenerator-runtime": "^0.13.9",
     "styled-components": "^5.3.3",
     "typescript-lru-cache": "^1.2.3",

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -10,6 +10,9 @@ import { Form } from 'react-bootstrap';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import {
   faBook,
   // faFile,
@@ -192,6 +195,7 @@ function App() {
         </Route>
       </Routes>
       <Navbar fixed="bottom">Nothing</Navbar>
+      <ToastContainer />
     </div>
   );
 }

diff --git a/src/renderer/components/ProgramChangeView.tsx b/src/renderer/components/ProgramChangeView.tsx
@@ -5,6 +5,7 @@ import { Dropdown, DropdownButton, Button } from 'react-bootstrap';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
 import Table from 'react-bootstrap/Table';
+import { toast } from 'react-toastify';
 
 import OutsideClickHandler from 'react-outside-click-handler';
 
@@ -185,12 +186,7 @@ function ProgramChangeView(props: {
                       placeholder="Paste Program ID"
                       onKeyDown={(e) => {
                         if (!(e.code === 'MetaRight' || e.code === 'KeyV')) {
-                          // dispatch(
-                          //   toastActions.push({
-                          //     msg: 'Must paste in valid program ID',
-                          //     variant: 'warning',
-                          //   })
-                          // );
+                          toast.warn('Must paste in valid program ID');
                           filterProgramIDRef.current.value = 'Custom';
                           filterProgramIDRef.current.blur();
                           setFilterDropdownShow(false);
@@ -207,13 +203,7 @@ function ProgramChangeView(props: {
                           );
                           setProgramID(pastedID);
                         } else {
-                          // dispatch(
-                          //   toastActions.push({
-                          //     // todo: full jsx access would be better (code)
-                          //     msg: `Invalid program ID: ${pastedID}`,
-                          //     variant: 'warning',
-                          //   })
-                          // );
+                          toast.warn(`Invalid program ID: ${pastedID}`);
                         }
                         filterProgramIDRef.current.value = 'Custom';
                         filterProgramIDRef.current.blur();
@@ -230,7 +220,15 @@ function ProgramChangeView(props: {
             <Button size="sm" disabled>
               Import account
             </Button>
-            <Button onClick={() => createNewAccount(net)}>
+            <Button
+              onClick={() => {
+                toast.promise(createNewAccount(net), {
+                  pending: 'Account being created',
+                  success: 'Account created 👌',
+                  error: 'Account creation failed 🤯',
+                });
+              }}
+            >
               Create Account
             </Button>
           </ButtonGroup>

diff --git a/src/renderer/components/Toast.tsx b/src/renderer/components/Toast.tsx
diff --git a/src/types/types.tsx b/src/types/types.tsx
@@ -16,11 +16,6 @@ export enum NetStatus {
 
 export const RANDOMART_W_CH = 17;
 export const RANDOMART_H_CH = 10;
-export const TOAST_HEIGHT = 270;
-export const TOAST_WIDTH = TOAST_HEIGHT * (1.61 * 0.61);
-export const TOAST_BOTTOM_OFFSET = TOAST_HEIGHT / 3.8; // kinda random but looks good
-export const TOAST_HIDE_MS = 1200;
-export const TOAST_PAUSE_MS = 1000;
 export const BASE58_PUBKEY_REGEX = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/;
 export const MAX_PROGRAM_CHANGES_DISPLAYED = 20;
 
@@ -116,18 +111,6 @@ export interface ImportedAccountMap {
   [pubKey: string]: boolean;
 }
 
-export interface ToastProps {
-  msg: string;
-  variant?: string;
-  hideAfter?: number;
-  bottom?: number;
-  toastKey?: string;
-}
-
-export interface ToastState {
-  toasts: ToastProps[];
-}
-
 export interface ConfigMap {
   [key: string]: string | undefined;
 }