[#265] make button disabled when tries to connect

IntersectMBO · Feb 26, 2024 · b0471a9 · b0471a9
1 parent 7ac847f
commit b0471a9
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ changes.
 - i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80)
 
 ### Fixed
+- Fix make button disble when wallet tries connect [Issue 265](https://github.com/IntersectMBO/govtool/issues/265)
 - Fix drep voting power calculation [Issue 231](https://github.com/IntersectMBO/govtool/issues/231)
 - Fix proposal/list and network/metrics bug that appeared when noone has delegated their funds either to drep_always_abstain or drep_always_no_confidence [Issue 231](https://github.com/IntersectMBO/govtool/issues/231)
 - Fix GA details [Issue 272](https://github.com/IntersectMBO/govtool/issues/272)

diff --git a/govtool/frontend/src/components/molecules/WalletOption.tsx b/govtool/frontend/src/components/molecules/WalletOption.tsx
@@ -1,10 +1,10 @@
-import { Box, Typography } from "@mui/material";
-import { FC } from "react";
+import { FC, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { Box, CircularProgress, Typography } from "@mui/material";
 
+import { PATHS } from "@consts";
 import { useCardano } from "@context";
 import { theme } from "@/theme";
-import { useNavigate } from "react-router-dom";
-import { PATHS } from "@/consts";
 
 export interface WalletOption {
   icon: string;
@@ -15,60 +15,85 @@ export interface WalletOption {
 }
 
 export const WalletOptionButton: FC<WalletOption> = ({ ...props }) => {
-  const { enable } = useCardano();
+  const { enable, isEnableLoading } = useCardano();
   const {
     palette: { lightBlue },
   } = theme;
   const navigate = useNavigate();
 
   const { dataTestId, icon, label, name, cip95Available } = props;
 
+  const enableByWalletName = useCallback(async() => {
+    if(isEnableLoading) return;
+    const result = await enable(name);
+    if (result?.stakeKey) {
+      navigate(PATHS.dashboard);
+      return;
+    }
+    navigate(PATHS.stakeKeys);
+  }, [enable, isEnableLoading])
+
   return (
     <Box
       data-testid={dataTestId}
       sx={{
         alignItems: "center",
-        border: `1px solid ${lightBlue}`,
+        border: isEnableLoading ? "none" : `1px solid ${lightBlue}`,
+        bgcolor: isEnableLoading ? "#EAE9F0" : "white",
         borderRadius: "100px",
-        boxShadow: "0px 0px 11px 0px #24223230",
+        boxShadow: isEnableLoading ? undefined : "0px 0px 11px 0px #24223230",
         boxSizing: "border-box",
-        cursor: cip95Available ? "pointer" : "unset",
+        cursor: cip95Available
+          ? isEnableLoading
+            ? "default"
+            : "pointer"
+          : "unset",
         display: "flex",
         justifyContent: "space-between",
         marginBottom: "16px",
-        padding: "12px 28px 12px 13px",
+        padding: "12px 13px 12px 13px",
         transition: "background .2s",
+        position: "relative",
         width: "100%",
-        "&:hover": {
-          background: lightBlue,
-        },
+        "&:hover": isEnableLoading
+          ? undefined
+          : {
+              background: lightBlue,
+            },
       }}
       key={name}
-      onClick={async () => {
-        const result = await enable(name);
-        if (result?.stakeKey) {
-          navigate(PATHS.dashboard);
-          return;
-        }
-        navigate(PATHS.stakeKeys);
-      }}
+      onClick={enableByWalletName}
     >
       <img
         alt={`${name} icon`}
         src={icon}
-        style={{ height: "24px", width: "24px" }}
+        style={{
+          height: "24px",
+          width: "24px",
+          filter: isEnableLoading ? "grayscale(100%)" : "none",
+        }}
       />
       <Typography
-        color="primaryBlue"
-        sx={{ fontSize: "16px", fontWeight: "500" }}
+        color={isEnableLoading ? "#C1BED3" : "primaryBlue"}
+        sx={{
+          fontSize: "16px",
+          fontWeight: "500",
+        }}
       >
         {name ?? label}
       </Typography>
-      <img
-        alt={`${name} icon`}
-        src={icon}
-        style={{ height: "24px", width: "24px", visibility: "hidden" }}
-      />
+      <div style={{ height: "24px", width: "24px" }} />
+      {isEnableLoading === name && (
+        <Box
+          position="absolute"
+          left={0}
+          right={0}
+          display="flex"
+          justifyContent="center"
+        >
+          <CircularProgress size={26} />
+        </Box>
+      )}
     </Box>
   );
 };
diff --git a/govtool/frontend/src/context/wallet.tsx b/govtool/frontend/src/context/wallet.tsx
@@ -97,6 +97,7 @@ interface CardanoContext {
   address?: string;
   disconnectWallet: () => Promise<void>;
   enable: (walletName: string) => Promise<EnableResponse>;
+  isEnableLoading: string | null;
   error?: string;
   dRep: DRepInfo | undefined;
   isEnabled: boolean;
@@ -165,6 +166,7 @@ CardanoContext.displayName = "CardanoContext";
 
 function CardanoProvider(props: Props) {
   const [isEnabled, setIsEnabled] = useState(false);
+  const [isEnableLoading, setIsEnableLoading] = useState<string | null>(null);
   const [dRep, setDRep] = useState<DRepInfo | undefined>(undefined);
   const [walletApi, setWalletApi] = useState<CardanoApiWallet | undefined>(
     undefined
@@ -517,6 +519,7 @@ function CardanoProvider(props: Props) {
 
   const enable = useCallback(
     async (walletName: string) => {
+      setIsEnableLoading(walletName);
       await checkIsMaintenanceOn();
 
       // todo: use .getSupportedExtensions() to check if wallet supports CIP-95
@@ -650,6 +653,8 @@ function CardanoProvider(props: Props) {
             status: "ERROR",
             error: `${e == undefined ? t("errors.somethingWentWrong") : e}`,
           };
+        } finally {
+          setIsEnableLoading(null);
         }
       }
       throw { status: "ERROR", error: t("errors.somethingWentWrong") };
@@ -1141,6 +1146,7 @@ function CardanoProvider(props: Props) {
       isPendingTransaction,
       isDrepLoading,
       setIsDrepLoading,
+      isEnableLoading,
     }),
     [
       address,
@@ -1173,6 +1179,7 @@ function CardanoProvider(props: Props) {
       isPendingTransaction,
       isDrepLoading,
       setIsDrepLoading,
+      isEnableLoading,
     ]
   );