#151 - add logic to disable button while wallets are in detection pro…

…cess (#230)

package.json

@@ -31,16 +31,15 @@
     "@solana/wallet-adapter-react-ui": "^0.9.5",
     "@solana/wallet-adapter-wallets": "^0.19.5",
     "@solana/web3.js": "^1.35.1",
-    "@terra-money/terra.js": "^3.1.9",
     "@terra-money/wallet-provider": "^3.9.4",
     "@walletconnect/web3-provider": "^1.7.8",
     "@xlabs-libs/wallet-aggregator-algorand": "0.0.1-alpha.16",
     "@xlabs-libs/wallet-aggregator-aptos": "^0.0.1-alpha.9",
-    "@xlabs-libs/wallet-aggregator-core": "^0.0.1-alpha.13",
+    "@xlabs-libs/wallet-aggregator-core": "^0.0.1-alpha.15",
     "@xlabs-libs/wallet-aggregator-evm": "0.0.1-alpha.27",
     "@xlabs-libs/wallet-aggregator-injective": "^0.0.1-alpha.12",
     "@xlabs-libs/wallet-aggregator-near": "^0.0.1-alpha.5",
-    "@xlabs-libs/wallet-aggregator-react": "0.0.1-alpha.11",
+    "@xlabs-libs/wallet-aggregator-react": "0.0.1-alpha.12",
     "@xlabs-libs/wallet-aggregator-solana": "^0.0.1-alpha.10",
     "@xlabs-libs/wallet-aggregator-sui": "^0.0.1-alpha.4",
     "@xlabs-libs/wallet-aggregator-terra": "^0.0.1-alpha.5",

src/components/ConnectWalletButton.tsx

@@ -1,28 +1,38 @@
 import { ChainId } from "@certusone/wormhole-sdk";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Wallet } from "@xlabs-libs/wallet-aggregator-core";
 import {
   useChangeWallet,
   useUnsetWalletFromChain,
   useWallet,
-  useWalletsForChain,
+  useWalletsForChainWithStatus,
 } from "@xlabs-libs/wallet-aggregator-react";
 import ConnectWalletDialog from "./ConnectWalletDialog";
 import ToggleConnectedButton from "./ToggleConnectedButton";
 import { Typography } from "@material-ui/core";
 import { CLUSTER } from "../utils/consts";
 import { getIsSanctioned } from "../utils/sanctions";
+import { useSelector } from "react-redux";
+import { RootState } from "../store";
 
 const ConnectWalletButton = ({ chainId }: { chainId: ChainId }) => {
   const wallet = useWallet(chainId);
   const changeWallet = useChangeWallet();
   const unsetWalletFromChain = useUnsetWalletFromChain();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [error, setError] = useState<Error | undefined>();
-  const availableWallets = useWalletsForChain(chainId);
-
+  const { wallets: availableWallets, isDetectingWallets } =
+    useWalletsForChainWithStatus(chainId);
+  const sourceChain = useSelector(
+    (state: RootState) => state.transfer.sourceChain
+  );
+  const [walletsNotAvailable, setWalletsNotAvailable] = useState(false);
   const pk = wallet?.getAddress();
 
+  useEffect(() => {
+    setWalletsNotAvailable(availableWallets.length === 0);
+  }, [sourceChain, availableWallets]);
+
   const connect = useCallback(
     async (w: Wallet) => {
       try {
@@ -79,11 +89,30 @@ const ConnectWalletButton = ({ chainId }: { chainId: ChainId }) => {
 
   return (
     <>
+      {isDetectingWallets && (
+        <Typography
+          style={{ textAlign: "center" }}
+          variant="body2"
+          color="textPrimary"
+        >
+          Detecting wallets ...
+        </Typography>
+      )}
+      {!isDetectingWallets && walletsNotAvailable && (
+        <Typography
+          style={{ textAlign: "center" }}
+          variant="body2"
+          color="textPrimary"
+        >
+          Wallets not detected for the selected chain
+        </Typography>
+      )}
       <ToggleConnectedButton
         connect={handleConnect}
         disconnect={disconnect}
         connected={!!pk}
         pk={pk || ""}
+        disabled={isDetectingWallets || walletsNotAvailable}
       />
       <ConnectWalletDialog
         isOpen={isDialogOpen}

src/components/ToggleConnectedButton.tsx

@@ -20,12 +20,14 @@ const ToggleConnectedButton = ({
   connected,
   pk,
   walletIcon,
+  disabled = false,
 }: {
   connect(): any;
   disconnect(): any;
   connected: boolean;
   pk: string;
   walletIcon?: string;
+  disabled?: boolean;
 }) => {
   const classes = useStyles();
   const is0x = pk.startsWith("0x");
@@ -56,6 +58,7 @@ const ToggleConnectedButton = ({
       size="small"
       onClick={connect}
       className={classes.button}
+      disabled={disabled}
     >
       Connect
     </Button>