feat: await transaction to be confirmed.

backed-fi · Dec 1, 2023 · 9112bfb · 9112bfb
1 parent 6d9b2cc
commit 9112bfb
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/frontend/src/pages/account/pages/LoginPage.tsx b/frontend/src/pages/account/pages/LoginPage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { z } from "zod";
 import { useSnackbar } from "notistack";
 import { useForm } from "react-hook-form";
@@ -7,6 +7,7 @@ import { Box, Button, TextField, Typography } from "@mui/material";
 import { useApiContext } from "../../../context/ApiContext";
 import { useAuthContext } from "../../../context/AuthContext";
 import { useNavigate } from "react-router-dom";
+import { LoadingButton } from "@mui/lab";
 
 const Schema = z.object({
   login: z.string().nonempty("The login is required!"),
@@ -17,17 +18,21 @@ type SchemaType = z.infer<typeof Schema>;
 
 export const LoginPage: React.FC = () => {
   const navigate = useNavigate();
+  const snackbar = useSnackbar();
 
   const { client } = useApiContext();
   const { authenticate } = useAuthContext();
-  const snackbar = useSnackbar();
+
+  const [loading, setLoading] = useState(false);
 
   const form = useForm<SchemaType>({
     resolver: zodResolver(Schema),
   });
 
   const onLogin = async (data: SchemaType) => {
     try {
+      setLoading(true);
+
       const { data: response } = await client.post("/public/auth/login", {
         username: data.login,
         password: data.password,
@@ -37,6 +42,8 @@ export const LoginPage: React.FC = () => {
 
       const auth = await authenticate(accessToken);
 
+      setLoading(false);
+
       if (auth.isAdmin) {
         navigate("/admin/orders");
       } else {
@@ -47,6 +54,8 @@ export const LoginPage: React.FC = () => {
         variant: "success",
       });
     } catch (e) {
+      setLoading(false);
+
       snackbar.enqueueSnackbar("Login failed", {
         variant: "error",
       });
@@ -71,9 +80,13 @@ export const LoginPage: React.FC = () => {
 
       <TextField type="password" {...form.register("password")} />
 
-      <Button variant="contained" onClick={form.handleSubmit(onLogin)}>
+      <LoadingButton
+        loading={loading}
+        variant="contained"
+        onClick={form.handleSubmit(onLogin)}
+      >
         Login
-      </Button>
+      </LoadingButton>
       <Button onClick={() => navigate("/accounts/register")}>Register</Button>
     </Box>
   );

diff --git a/frontend/src/pages/account/pages/RegisterPage.tsx b/frontend/src/pages/account/pages/RegisterPage.tsx
@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import { z } from "zod";
 import { useSnackbar } from "notistack";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Box, Button, TextField, Typography } from "@mui/material";
 import { useApiContext } from "../../../context/ApiContext";
 import { useNavigate } from "react-router-dom";
+import { LoadingButton } from "@mui/lab";
 
 const Schema = z.object({
   login: z.string().nonempty("The login is required!"),
@@ -16,29 +17,35 @@ type SchemaType = z.infer<typeof Schema>;
 
 export const RegisterPage: React.FC = () => {
   const navigate = useNavigate();
+  const snackbar = useSnackbar();
 
   const { client } = useApiContext();
-  const snackbar = useSnackbar();
+
+  const [loading, setLoading] = useState(false);
 
   const form = useForm<SchemaType>({
     resolver: zodResolver(Schema),
   });
 
   const onRegister = async (data: SchemaType) => {
     try {
+      setLoading(true);
+
       const { data: response } = await client.post("/public/user/register", {
         username: data.login,
         password: data.password,
       });
 
-      const { user } = response;
-
       snackbar.enqueueSnackbar("Register success", {
         variant: "success",
       });
 
+      setLoading(false);
+
       navigate("/accounts/login");
     } catch (e) {
+      setLoading(false);
+
       snackbar.enqueueSnackbar("Register failed", {
         variant: "error",
       });
@@ -64,9 +71,13 @@ export const RegisterPage: React.FC = () => {
       <Typography variant="subtitle1">Password</Typography>
       <TextField type="password" {...form.register("password")} />
 
-      <Button variant="contained" onClick={form.handleSubmit(onRegister)}>
+      <LoadingButton
+        loading={loading}
+        variant="contained"
+        onClick={form.handleSubmit(onRegister)}
+      >
         Register
-      </Button>
+      </LoadingButton>
     </Box>
   );
 };
diff --git a/frontend/src/pages/client/pages/components/InteractionsWidget.tsx b/frontend/src/pages/client/pages/components/InteractionsWidget.tsx
@@ -22,6 +22,7 @@ import { ASSETS } from "../../../../constants/Assets";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSnackbar } from "notistack";
+import { LoadingButton } from "@mui/lab";
 
 const Schema = z.object({
   amount: z.number().nonnegative().int(),
@@ -34,6 +35,7 @@ export const InteractionsWidget: React.FC = () => {
 
   const [value, setValue] = React.useState(0);
   const [asset, setAsset] = React.useState<"LFT" | "LFN" | "NTN-F">("LFT");
+  const [loading, setLoading] = React.useState(false);
 
   const form = useForm<SchemaType>({
     resolver: zodResolver(Schema),
@@ -64,6 +66,7 @@ export const InteractionsWidget: React.FC = () => {
   }, [signer]);
   const confirm = async (data: SchemaType) => {
     if (contract && stableContract) {
+      setLoading(true);
       try {
         if (!value) {
           await stableContract.approve(
@@ -81,16 +84,20 @@ export const InteractionsWidget: React.FC = () => {
           );
         }
 
-        await contract.scheduleOrder(
+        const tx = await contract.scheduleOrder(
           ASSETS[asset].address!,
           data.amount * 10 ** (!value ? 6 : 18),
           !value
         );
 
+        await tx.wait();
+
+        setLoading(false);
         snackbar.enqueueSnackbar(`${!value ? "Buy" : "Sell"} success`, {
           variant: "success",
         });
       } catch (e) {
+        setLoading(false);
         snackbar.enqueueSnackbar(`${!value ? "Buy" : "Sell"} fail`, {
           variant: "error",
         });
@@ -159,13 +166,14 @@ export const InteractionsWidget: React.FC = () => {
           </Button>
         )}
         {signer && (
-          <Button
+          <LoadingButton
+            loading={loading}
             sx={{ width: "100%" }}
             variant="contained"
             onClick={form.handleSubmit(confirm)}
           >
             Confirm
-          </Button>
+          </LoadingButton>
         )}
       </CardActions>
     </Card>