Extension loading spinner and current wallet icon

Author: jordankzf

packages/sado-connect/src/assets/loading.svg

@@ -4,7 +4,9 @@ import { Fragment } from "react";
 import ChevronDownIcon from "../../assets/chevron-down.svg";
 import { TruncateMiddle } from "../../utils/text-helper";
 import LogoutIcon from "../../assets/logout.svg";
-import { useSadoContext } from "../../providers/SadoContext";
+import { Wallet, useSadoContext } from "../../providers/SadoContext";
+import UnisatWalletIcon from "../../assets/unisat-wallet.svg";
+import XverseWalletIcon from "../../assets/xverse-wallet.svg";
 
 interface PostConnectButtonProp {
   address: string;
@@ -17,7 +19,7 @@ export function PostConnectButton({
   network,
   onViewWallet,
 }: PostConnectButtonProp) {
-  const { disconnectWallet } = useSadoContext();
+  const { disconnectWallet, wallet } = useSadoContext();
 
   return (
     <Menu
@@ -27,12 +29,20 @@ export function PostConnectButton({
       {({ open }) => (
         <>
           <Menu.Button className="sado-wallet-connected-button">
-            <Avatar
-              size={28}
-              variant="beam"
-              name={address}
-              colors={["#1C2DCB", "#F226B8"]}
-            />
+            <div className="wallet-identifier-container">
+              <Avatar
+                size={28}
+                variant="beam"
+                name={address}
+                colors={["#1C2DCB", "#F226B8"]}
+              />
+              <img
+                src={
+                  wallet === Wallet.XVERSE ? XverseWalletIcon : UnisatWalletIcon
+                }
+                alt={`${wallet} is connected`}
+              />
+            </div>
 
             <section className="address-container">
               <p className="address">{TruncateMiddle(address)}</p>

packages/sado-connect/src/components/PostConnectButton/index.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import ChevronRightIcon from "../../assets/chevron-right.svg";
+import LoadingIcon from "../../assets/loading.svg";
+
+interface WalletButtonProp {
+  name: string;
+  onConnect: () => Promise<boolean>;
+  icon: string;
+  imageClassOverride?: string;
+  setErrorMessage: (msg: string) => void;
+}
+
+export function WalletButton({
+  name,
+  onConnect,
+  icon,
+  imageClassOverride,
+  setErrorMessage,
+}: WalletButtonProp) {
+  const [loading, setLoading] = useState(false);
+  return (
+    <button
+      type="button"
+      className="wallet-option-button"
+      onClick={async () => {
+        setLoading(true);
+        const timeout = (resolve) => setTimeout(() => resolve("timeout"), 5000);
+        const success = await Promise.race([onConnect(), new Promise(timeout)]);
+        if (success === "timeout") {
+          setErrorMessage(
+            "No wallet pop-up? The extension is not responding. Try reloading your browser.",
+          );
+        } else {
+          setLoading(false);
+        }
+      }}
+    >
+      <img
+        src={icon}
+        className={imageClassOverride}
+        alt={`Connect ${name} Wallet`}
+      />
+      <span className="wallet-option-label">{name}</span>
+      {loading ? (
+        <img
+          src={LoadingIcon}
+          width={40}
+          alt={`${name} wallet extension is loading`}
+        />
+      ) : (
+        <img src={ChevronRightIcon} alt="Chevron Right" />
+      )}
+    </button>
+  );
+}

packages/sado-connect/src/components/SelectWalletModal/WalletButton.tsx

@@ -2,14 +2,14 @@ import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
 import { AddressFormats, ordit } from "@sadoprotocol/ordit-sdk";
 import CloseModalIcon from "../../assets/close-modal.svg";
-import ChevronRightIcon from "../../assets/chevron-right.svg";
 import UnisatWalletIcon from "../../assets/unisat-wallet.svg";
 import XverseWalletIcon from "../../assets/xverse-wallet.svg";
 import { useSadoContext, Wallet } from "../../providers/SadoContext";
 import {
   UNISAT_WALLET_CHROME_EXTENSION_URL,
   XVERSE_WALLET_CHROME_EXTENSION_URL,
 } from "../../utils/constant";
+import { WalletButton } from "./WalletButton";
 
 interface SelectWalletModalProp {
   isOpen: boolean;
@@ -67,6 +67,7 @@ export function SelectWalletModal({
 
       window.unisat.addListener("accountsChanged", onConnectUnisatWallet);
       closeModal();
+      return true;
     } catch (err: any) {
       if (err.message === "Unisat not installed.") {
         window.open(
@@ -77,10 +78,12 @@ export function SelectWalletModal({
       }
       setErrorMessage(err.message ?? err.toString());
       console.error("Error while connecting to UniSat wallet", err);
+      return false;
     }
   };
   const onConnectXverseWallet = async () => {
     try {
+      setErrorMessage("");
       const xverse = await ordit.xverse.getAddresses({
         network,
       });
@@ -114,6 +117,7 @@ export function SelectWalletModal({
         payments: nestedSegwit.format as AddressFormats,
       });
       closeModal();
+      return true;
     } catch (err: any) {
       if (err?.message === "Xverse not installed.") {
         window.open(
@@ -124,6 +128,7 @@ export function SelectWalletModal({
       }
       setErrorMessage(err.toString());
       console.error("Error while connecting to Xverse wallet", err);
+      return false;
     }
   };
 
@@ -183,29 +188,20 @@ export function SelectWalletModal({
                 <section className="panel-content-container">
                   {isChromium ? (
                     <section className="panel-content-inner-container">
-                      <button
-                        type="button"
-                        className="wallet-option-button"
-                        onClick={async () => {
-                          await onConnectUnisatWallet();
-                        }}
-                      >
-                        <img src={UnisatWalletIcon} alt="Unisat Wallet" />
-                        <span className="wallet-option-label">Unisat</span>
-                        <img src={ChevronRightIcon} alt="Chevron Right" />
-                      </button>
+                      <WalletButton
+                        name="Unisat"
+                        onConnect={onConnectUnisatWallet}
+                        icon={UnisatWalletIcon}
+                        setErrorMessage={setErrorMessage}
+                      />
                       <hr className="horizontal-separator" />
-                      <button
-                        type="button"
-                        className="wallet-option-button"
-                        onClick={async () => {
-                          await onConnectXverseWallet();
-                        }}
-                      >
-                        <img src={XverseWalletIcon} alt="Xverse Wallet" />
-                        <span className="wallet-option-label">Xverse</span>
-                        <img src={ChevronRightIcon} alt="Chevron Right" />
-                      </button>
+                      <WalletButton
+                        name="Xverse"
+                        imageClassOverride="xverse-icon"
+                        onConnect={onConnectXverseWallet}
+                        icon={XverseWalletIcon}
+                        setErrorMessage={setErrorMessage}
+                      />
                     </section>
                   ) : (
                     <Dialog.Description className="unsupported-browser-message">

packages/sado-connect/src/components/SelectWalletModal/index.tsx

@@ -123,6 +123,31 @@
   cursor: pointer;
 }
 
+.waiting-cursor {
+  cursor: wait !important;
+}
+
+.xverse-icon {
+  width: 30px;
+  padding: 5px;
+}
+
+.wallet-identifier-container {
+  position: relative;
+  display: inline-block;
+}
+
+.wallet-identifier-container img {
+  position: absolute;
+  bottom: 4px;
+  right: 0;
+  width: 7px;
+  border-radius: 50%;
+  background-color: black;
+  object-fit: cover;
+  padding: 3px;
+}
+
 .sado-connect-wallet-modal .wallet-option-button:hover {
   background: rgba(255, 255, 255, 0.1);
 }