Add react-toast package && refresh the canvas after sending painting …

…msgs

package.json

@@ -62,6 +62,7 @@
     "react-dom": "^16.13.0",
     "react-hook-form": "^5.7.2",
     "react-responsive-pinch-zoom-pan": "^0.3.0",
+    "react-toastify": "^6.0.4",
     "reactstrap": "^8.4.1",
     "webextension-polyfill": "^0.6.0"
   }

src/index.tsx

@@ -4,5 +4,6 @@ import ReactDOM from "react-dom";
 import { App } from "./app";
 
 import "./styles/custom.scss";
+import "react-toastify/dist/ReactToastify.css";
 
 ReactDOM.render(<App />, document.getElementById("app"));

src/pages/home/canvas.tsx

@@ -18,6 +18,8 @@ import { AccAddress } from "@everett-protocol/cosmosjs/common/address";
 import { Coin } from "@everett-protocol/cosmosjs/common/coin";
 import { useCanvasPoints } from "../../hooks/use-canvas-points";
 
+import { ToastContainer, toast } from "react-toastify";
+
 // Doesn't have a definition.
 const PinchZoomPan = require("react-responsive-pinch-zoom-pan").default;
 
@@ -74,9 +76,7 @@ export const Canvas: FunctionComponent<{
 
   const [colorToFill, setColorToFill] = useState<Color | undefined>(undefined);
 
-  const cosmosJS = useCosmosJS(AstroZoneInfo, useWalletProvider(), {
-    useBackgroundTx: true
-  });
+  const cosmosJS = useCosmosJS(AstroZoneInfo, useWalletProvider());
 
   const backLayer = useRef<HTMLCanvasElement>(null);
   const frontLayer = useRef<HTMLCanvasElement>(null);
@@ -223,11 +223,30 @@ export const Canvas: FunctionComponent<{
 
       if (msgs.length > 0) {
         const gas = 50000 + msgs.length * 30000;
-        cosmosJS.sendMsgs(msgs, {
-          gas: gas,
-          memo: "",
-          fee: new Coin("uastro", gas * 0.025)
-        });
+        cosmosJS.sendMsgs(
+          msgs,
+          {
+            gas: gas,
+            memo: "",
+            fee: new Coin("uastro", gas * 0.025)
+          },
+          () => {
+            toast.success("Success!");
+            if (canvasPoints.refresh) {
+              const promise = canvasPoints.refresh();
+              if (promise) {
+                promise.then(() => {
+                  setPointsToFill([]);
+                });
+              }
+            } else {
+              setPointsToFill([]);
+            }
+          },
+          e => {
+            toast.error(`Failed to send tx: ${e.message}`);
+          }
+        );
       }
     }
   }, [cosmosJS, pointsToFill]);
@@ -279,6 +298,7 @@ export const Canvas: FunctionComponent<{
       <div style={{ position: "absolute", right: 0 }}>
         <CanvasTools onColorChange={setColorToFill} onPaint={onPaint} />
       </div>
+      <ToastContainer hideProgressBar={false} draggable />
     </div>
   );
 };

src/pages/home/info.tsx

@@ -39,6 +39,8 @@ import { DecUtils } from "../../common/dec-utils";
 import { useForm } from "react-hook-form";
 import InputGroup from "reactstrap/lib/InputGroup";
 
+import { ToastContainer, toast } from "react-toastify";
+
 import style from "./info.module.scss";
 
 const Buffer = require("buffer/").Buffer;
@@ -48,9 +50,7 @@ export const DelegateModal: FunctionComponent<{
   balance?: Coin;
   closeModal: () => void;
 }> = ({ validator, balance, closeModal }) => {
-  const cosmosJS = useCosmosJS(AstroZoneInfo, useWalletProvider(), {
-    useBackgroundTx: true
-  });
+  const cosmosJS = useCosmosJS(AstroZoneInfo, useWalletProvider());
 
   const form = useForm<{
     amount: string;
@@ -97,7 +97,13 @@ export const DelegateModal: FunctionComponent<{
                 memo: "",
                 fee: new Coin(AstroZoneInfo.nativeCurrency.coinMinimalDenom, 1)
               },
-              closeModal
+              () => {
+                toast.success("Success!");
+                closeModal();
+              },
+              e => {
+                toast.error(`Failed to send tx: ${e.message}`);
+              }
             );
           }
         })}
@@ -142,14 +148,13 @@ export const DelegateModal: FunctionComponent<{
           Delegate
         </Button>
       </Form>
+      <ToastContainer hideProgressBar={false} draggable />
     </div>
   );
 };
 
 export const InfoView: FunctionComponent = () => {
-  const zoneCosmosJS = useCosmosJS(AstroZoneInfo, useWalletProvider(), {
-    useBackgroundTx: true
-  });
+  const zoneCosmosJS = useCosmosJS(AstroZoneInfo, useWalletProvider());
   const zoneInterstaking = useInterstaking(
     AstroZoneInfo.rest,
     ZoneToHub.interchainAccount.portId,
@@ -190,11 +195,23 @@ export const InfoView: FunctionComponent = () => {
         AccAddress.fromBech32(zoneCosmosJS.addresses[0])
       );
 
-      zoneCosmosJS.sendMsgs([msg], {
-        gas: 200000,
-        memo: "",
-        fee: [new Coin(AstroZoneInfo.nativeCurrency.coinMinimalDenom, 1)]
-      });
+      zoneCosmosJS.sendMsgs(
+        [msg],
+        {
+          gas: 200000,
+          memo: "",
+          fee: [new Coin(AstroZoneInfo.nativeCurrency.coinMinimalDenom, 1)]
+        },
+        () => {
+          toast.success("Success!");
+          if (zoneInterstaking.refresh) {
+            zoneInterstaking.refresh();
+          }
+        },
+        e => {
+          toast.error(`Failed to send tx: ${e.message}`);
+        }
+      );
     }
   }, [zoneCosmosJS.addresses, zoneCosmosJS.sendMsgs]);
 
@@ -249,6 +266,7 @@ export const InfoView: FunctionComponent = () => {
         validators={hubValidators.validators}
         delegateFn={openDelegateModal}
       />
+      <ToastContainer hideProgressBar={false} draggable />
     </div>
   );
 };