Connect Wallet After Logout

Moralis General
#1

I’ve got my “Connect Wallet” button set up on my website using Javascript, but when I click “Logout” then try to login again the button doesn’t update. You need to refresh the page for it to work as intended once more. Any suggestions would be massive, thank you!

Code:

    <script>
	
      // Connect to Moralis server
      const serverUrl = "https://kh2bhxhcly3r.usemoralis.com:2053/server";
      const appId = "ZAA8S5TgS80WYYR52Y8p6xWXgdIcynROOSsgzZuX";
      Moralis.start({ serverUrl, appId });
	  
	  const btnlogin = document.getElementById("btn-login");
	  const btnlogout = document.getElementById("btn-logout");
	  
	  async function hide_buttons() {
		let user = await Moralis.User.current();
		if (!user) {
			document.getElementById("btn-login").style.display = "block";
			document.getElementById("btn-logout").style.display = "none";
		} else {
			document.getElementById("btn-login").style.display = "none";
			document.getElementById("btn-logout").style.display = "block";
		}
	  }
	  
	  hide_buttons();
	  
	  let user = Moralis.User.current();
	  if (!user) {
		  btnlogin.style.display = "block";
		} else {
		  btnlogin.style.display = "none";
		}

      async function login() {
        if (!user) {
          user = await Moralis.authenticate({
			  signingMessage: "Enigma Season 1",
              type: "sol",
		  });
		  if (user) {
			  btnlogin.style.display = "none";
			  getSolBal();
		  }
        }
        console.log("Logged in user:", user);
		hide_buttons();
      }

      async function logOut() {
        await Moralis.User.logOut();
		btnlogin.style.display = "block";
        
		console.log("Logged out");
		hide_buttons();
		document.getElementById("sol-bal").style.display = "none";
      }

      btnlogin.onclick = login;
      btnlogout.onclick = logOut;
	  
      async function getSolBal() {
	    const solBalance = await Moralis.SolanaAPI.account.balance();
	    console.log(solBalance.solana);
		document.getElementById("sol-bal").innerHTML = solBalance.solana + "◎";
      }

    
	</script>
#2

This is because you’re using vanilla Javascript. A little fix you can make is to add another function like init such that you call the function after login, logout and when the window loads, in the function, you’ll do the check if the user is logged in or logged out and display the buttons you wished too and specific condition.

#3

I’m having trouble applying this solution, I’m fairly new to coding in general so I do apologise if I’m being an idiot here.

Could your provide an example of what you mean please?

Code:

    <script>
	
      // Connect to Moralis server
      const serverUrl = "https://kh2bhxhcly3r.usemoralis.com:2053/server";
      const appId = "ZAA8S5TgS80WYYR52Y8p6xWXgdIcynROOSsgzZuX";
      Moralis.start({ serverUrl, appId });
	  
	  const btnlogin = document.getElementById("btn-login");
	  const btnlogout = document.getElementById("btn-logout");
	  
	  async function hide_buttons() {
		let solBalance = await Moralis.SolanaAPI.account.balance();
		let user = await Moralis.User.current();
		if (!user) {
			document.getElementById("btn-login").style.display = "block";
			document.getElementById("btn-logout").style.display = "none";
		    document.getElementById("sol-bal").style.display = "none";
		} else {
			document.getElementById("btn-login").style.display = "none";
			document.getElementById("btn-logout").style.display = "block";
		    document.getElementById("sol-bal").innerHTML = solBalance.solana + "◎";
		}
	  }
	  
	  hide_buttons();

	  let user = Moralis.User.current();
	    if (!user) {
		  btnlogin.style.display = "block";
		} else {
		  btnlogin.style.display = "none";
		}

      async function login() {
        if (!user) {
          user = await Moralis.authenticate({
			  signingMessage: "Enigma Season 1",
              type: "sol",
		  });
		  if (user) {
			  btnlogin.style.display = "none";
			  getSolBal();
		  }
        }
        console.log("Logged in user:", user);
		hide_buttons();
      }

      async function logOut() {
        await Moralis.User.logOut();
		btnlogin.style.display = "block";
		btnlogout.style.display = "none";
		console.log("Logged out");
		hide_buttons();
		document.getElementById("sol-bal").style.display = "none";
      }

      btnlogin.onclick = login;
      btnlogout.onclick = logOut;
	  
      async function getSolBal() {
	    let solBalance = await Moralis.SolanaAPI.account.balance();
	    console.log(solBalance.solana);
		document.getElementById("sol-bal").innerHTML = solBalance.solana + "◎";
      }

    
	</script>
#4

what button doesn’t update?
you can also add more logging with console.log

#5

The “Connect Wallet” button doesn’t update after logout.

So when a user joins they see “Connect Wallet”, after connecting the button disappears and the “Logout” button & Sol balance appear.

Then when they click “Logout” the button and Sol balance disappear, and “Connect Wallet” reappears.

However if you try to login again after logging out, no buttons update and it sticks on “Connect Wallet”.

Site link: https://enigma-beta.webflow.io/

Appreciate the help!

#6

Here’s a little fix

<script>
  // Connect to Moralis server
  const serverUrl = "https://kh2bhxhcly3r.usemoralis.com:2053/server";
  const appId = "ZAA8S5TgS80WYYR52Y8p6xWXgdIcynROOSsgzZuX";
  Moralis.start({ serverUrl, appId });

  const btnlogin = document.getElementById("btn-login");
  const btnlogout = document.getElementById("btn-logout");
  const solBalanceElement = document.getElementById("sol-bal");

  async function hide_buttons() {
    let user = await Moralis.User.current();
    if (user) {
      btnlogin.style.display = "none";
      btnlogout.style.display = "block";

      let solBalance = await Moralis.SolanaAPI.account.balance();
      solBalanceElement.innerHTML = solBalance.solana + "◎";
    } else {
      btnlogin.style.display = "block";
      btnlogout.style.display = "none";
      solBalanceElement.style.display = "none";
    }
  }

  async function login() {
    try {
      await Moralis.authenticate({
        signingMessage: "Enigma Season 1",
        type: "sol",
      });
      await getSolBal();
      hide_buttons();
    } catch (error) {
      console.error(error);
    }
  }

  async function logOut() {
    await Moralis.User.logOut();
    console.log("Logged out");
    hide_buttons();
  }

  async function getSolBal() {
    let solBalance = await Moralis.SolanaAPI.account.balance();
    console.log(solBalance.solana);
    solBalanceElement.innerHTML = solBalance.solana + "◎";
  }

  btnlogin.onclick = login;
  btnlogout.onclick = logOut;

  hide_buttons();
</script>
1 Like
#7

Thank you so much that literally worked perfectly! :blue_heart:

#8

Actually the Sol Balance is only showing after refresh when logged in, how would I fix this?

I’ve updated my site so you can check it for yourself.

#9

All fixed now, thank you for the help!

Here’s the fixed code for anyone who’d like it:

<script>
  
  // Connect to Moralis server
  const serverUrl = "https://kh2bhxhcly3r.usemoralis.com:2053/server";
  const appId = "ZAA8S5TgS80WYYR52Y8p6xWXgdIcynROOSsgzZuX";
  Moralis.start({ serverUrl, appId });

  const btnlogin = document.getElementById("btn-login");
  const btnlogout = document.getElementById("btn-logout");
  const solBalanceElement = document.getElementById("sol-bal");

  async function getSolBal() {
    let solBalance = await Moralis.SolanaAPI.account.balance();
    console.log(solBalance.solana);
    solBalanceElement.innerHTML = solBalance.solana + "◎";
  }
  
 async function hide_buttons() {
    let user = await Moralis.User.current();
    if (user) {
      btnlogin.style.display = "none";
      btnlogout.style.display = "block";
	  solBalanceElement.style.display = "block";
      await getSolBal();
    } else {
      btnlogin.style.display = "block";
      btnlogout.style.display = "none";
      solBalanceElement.style.display = "none";
    }
  }


  async function login() {
    try {
      await Moralis.authenticate({
        signingMessage: "Enigma Season 1",
        type: "sol",
      });
      hide_buttons();
    } catch (error) {
      console.error(error);
    }
  }

  async function logOut() {
    await Moralis.User.logOut();
    console.log("Logged out");
    hide_buttons();
  }

  btnlogin.onclick = login;
  btnlogout.onclick = logOut;

  hide_buttons();

</script>
1 Like