Merge pull request #78 from TosiDrop/airdrop

fix/client: fix wallet connecting bug

Author: aryelciu001

client/src/components/wallet-selector/wallet-selector.component.scss

@@ -49,6 +49,16 @@
         height: 100%;
         align-items: center;
         position: relative;
+        color: var(--font-highlight);
+
+        .wallet-info {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            & > *:first-child {
+                margin-left: 10px;
+            }
+        }
 
         .wallet-icon {
             width: 20px;

client/src/components/wallet-selector/wallet-selector.component.tsx

@@ -1,80 +1,133 @@
-import { faLinkSlash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useEffect, useState } from 'react';
-import WalletApi, { WalletKeys } from '../../services/connectors/wallet.connector';
-import { abbreviateAddress } from '../../services/utils.services';
-import WalletSelectorModalComponent from './wallet-selector-modal/wallet-selector-modal.component';
-import './wallet-selector.component.scss';
+import { faLinkSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import Spinner from "src/pages/Airdrop/components/Spinner";
+import WalletApi, {
+    WalletKeys,
+} from "../../services/connectors/wallet.connector";
+import { abbreviateAddress } from "../../services/utils.services";
+import WalletSelectorModalComponent from "./wallet-selector-modal/wallet-selector-modal.component";
+import "./wallet-selector.component.scss";
 
 interface Params {
     connectedWallet: WalletApi | undefined;
     connectWallet: (walletKey?: WalletKeys) => void;
     wrongNetwork: boolean | undefined;
 }
 
-function WalletSelectorComponent({ connectedWallet, connectWallet, wrongNetwork }: Params) {
+function WalletSelectorComponent({
+    connectedWallet,
+    connectWallet,
+    wrongNetwork,
+}: Params) {
     const [modalVisible, setModalVisible] = useState(false);
     const [walletMenuVisible, setWalletMenuVisible] = useState(false);
-    const [walletAddress, setWalletAddress] = useState('');
-    const [walletIcon, setWalletIcon] = useState('');
+    const [walletAddress, setWalletAddress] = useState("");
+    const [walletIcon, setWalletIcon] = useState("");
 
     const disconnectWallet = () => {
         setWalletMenuVisible(false);
         connectWallet();
-    }
+    };
 
     const toggleWalletMenuVisible = () => {
         setWalletMenuVisible(!walletMenuVisible);
-    }
+    };
 
     useEffect(() => {
         async function init() {
             if (connectedWallet) {
                 if (connectedWallet.wallet?.api) {
-                    const addr = abbreviateAddress(await connectedWallet.getAddress());
+                    const addr = abbreviateAddress(
+                        await connectedWallet.getAddress()
+                    );
                     setWalletAddress(addr);
                     setWalletIcon(connectedWallet.wallet.icon);
                     setModalVisible(false);
                 }
             } else {
-                setWalletAddress('');
+                setWalletAddress("");
                 setModalVisible(false);
             }
         }
 
         init();
     }, [connectedWallet?.wallet?.api, connectedWallet]);
 
-    const Connected = () => (
-        <div className="wallet-connected" onClick={() => toggleWalletMenuVisible()}>
-            <img src={walletIcon} className='wallet-icon' alt='wallet icon'></img>
-            <p className='wallet-addr'>{walletAddress}</p>
-        </div>
-    )
+    const Connected = () => {
+        return (
+            <div
+                className="wallet-connected"
+                onClick={() => toggleWalletMenuVisible()}
+            >
+                {walletIcon ? (
+                    <>
+                        <img
+                            src={walletIcon}
+                            className="wallet-icon"
+                            alt="wallet icon"
+                        ></img>
+                        <p className="wallet-addr">{walletAddress}</p>
+                    </>
+                ) : (
+                    <div className="wallet-info">
+                        Connecting <Spinner></Spinner>
+                    </div>
+                )}
+            </div>
+        );
+    };
 
     const NotConnected = () => (
-        <div className="wallet-not-connected" onClick={() => setModalVisible(true)}>
+        <div
+            className="wallet-not-connected"
+            onClick={() => setModalVisible(true)}
+        >
             <p>Connect</p>
         </div>
-    )
+    );
 
     const WrongNetwork = () => (
-        <div className={"wallet-wrong"} onClick={() => toggleWalletMenuVisible()}>
+        <div
+            className={"wallet-wrong"}
+            onClick={() => toggleWalletMenuVisible()}
+        >
             <p>WRONG NETWORK</p>
         </div>
-    )
+    );
 
     return (
-        <div className='wallet-selector-container'>
-            <WalletSelectorModalComponent modalVisible={modalVisible} setModalVisible={setModalVisible} connectedWallet={connectedWallet} connectWallet={connectWallet} />
-            <div className='wallet-selector'>
-                {wrongNetwork ? <WrongNetwork /> : (connectedWallet?.wallet?.api ? <Connected /> : <NotConnected />)}
+        <div className="wallet-selector-container">
+            <WalletSelectorModalComponent
+                modalVisible={modalVisible}
+                setModalVisible={setModalVisible}
+                connectedWallet={connectedWallet}
+                connectWallet={connectWallet}
+            />
+            <div className="wallet-selector">
+                {wrongNetwork ? (
+                    <WrongNetwork />
+                ) : connectedWallet?.wallet?.api ? (
+                    <Connected />
+                ) : (
+                    <NotConnected />
+                )}
             </div>
-            <div className={'wallet-menu' + (connectedWallet?.wallet?.api && walletMenuVisible ? '' : ' hidden')}>
-                <p onClick={disconnectWallet}><FontAwesomeIcon icon={faLinkSlash} />Disconnect</p>
+            <div
+                className={
+                    "wallet-menu" +
+                    (connectedWallet?.wallet?.api && walletMenuVisible
+                        ? ""
+                        : " hidden")
+                }
+            >
+                <p onClick={disconnectWallet}>
+                    <FontAwesomeIcon icon={faLinkSlash} />
+                    Disconnect
+                </p>
             </div>
         </div>
-    )
+    );
 }
 
-export default WalletSelectorComponent;
+export default WalletSelectorComponent;