How to use onAccountsChanged?

after changing accounts, it returns an array in the console.log(accounts)
and i cant use that

Whats the proper way of using this function?

When the user chages account, obviously everything else changes to, like balance etc.
but i cant work with that when the first time a user logs in i get back the user account like a regular address and than it shows up as an array
so how do i fix this so my code works like on every other application

ok, it returns an array, what is the problem with returning an array?

i cant use the array, i need the the output to be the address only not with all that array[‘0x123456jdgjk’]

you could use something like this:

Moralis.onAccountsChanged(function(accounts) {
console.log(accounts[0]);
});

All I try to do is this


 async function login(provider) {
    let user = Moralis.User.current();
    if (!user) {
        try {
            user = await Moralis.authenticate({ signingMessage: "Just sign this shit", provider })
            $("#myModal").modal("hide")
            console.log(user.get('ethAddress'))
            account = user.get('ethAddress')

            // get BSC native balance for a given address
            const options = { chain: "bsc", address: account};
            const balance = await Moralis.Web3API.account.getNativeBalance(options);
            console.log(balance)
                        
        } catch (error) {
            console.log(error)
        }
    }
  }
  Moralis.onAccountsChanged(function(accounts) {
   console.log(accounts);
    });

All I want is to get the native balance of the current logged in metamask account and it doesnt work with on accounts changed, after changing the account, i dont get the balance of the new account

I don’t see code there to display the balance when the account is changed in metamask.
I think that you need to add code here:

because i dont know, what to write
I also dont know why this function comes with a default of an account function, like why is it even here?

thatswhy im asking what is the proper way to use this function

you add this code there

please post the code of the whole function
cause the onAccounts function isnt even an async function

 Moralis.onAccountsChanged(function(accounts) {
    const options = { chain: "bsc", address: account[0]};
    const balance = await Moralis.Web3API.account.getNativeBalance(options);
    console.log(balance)
    });

And please explain, why is this ```
Moralis.onAccountsChanged(function(accounts)

function accounts right there, why do i need this?

why do you need what in particular?

you add a callback function to onAccountsChanged that will be called when that event happens
you can call any other function in that callback, you can make it async if you want

can you not just post the code?

All i want to do is when a user logs in, i want to show the balance and when he changes the account, it should show the different balance from his other account

So can you please post it?

you have all the information available to do that
what problems do you have in writing that code?

why dont you just post the code?

I need this code to be fixed
especially the onAccountsChanged function

 /** Connect to Moralis server */
 const serverUrl = 
 const appId =
 Moralis.start({ serverUrl, appId });

 /** Add from here down */
 async function login(provider) {
    let user = Moralis.User.current();
    if (!user) {
        try {
            user = await Moralis.authenticate({ signingMessage: "Just sign this shit", provider })
            $("#myModal").modal("hide")
            console.log(user.get('ethAddress'))
            account = user.get('ethAddress')

            // get BSC native balance for a given address
            const options = { chain: "bsc", address: account};
            const balance = await Moralis.Web3API.account.getNativeBalance(options);
            console.log(balance)
                        
        } catch (error) {
            console.log(error)
        }
    }
  }
  Moralis.onAccountsChanged() {
    const options = { chain: "bsc", address: account};
    const balance = await Moralis.Web3API.account.getNativeBalance(options);
    console.log(balance)
    });

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

 
 document.getElementById("btn-login-metamask").onclick = login;
 document.getElementById("btn-login-wc").onclick = login("walletconnect");
 document.getElementById("btn-logout").onclick = logOut;

you have to keep this syntax, where Moralis.onAccountsChanged receives a function as parameter, that is a callback function that will be called when the event happens

please post the whole code, why is it so difficult to post a working solution?

You keep posting the same stuff over and over again, when i keep telling you thats its not working
How many times more you want to post this, instead of just fixing the function i posted?

you should be able to fix that code

this is all you had to write:

Moralis.onAccountsChanged(async function(accounts) {
console.log(accounts[0]);
options = { chain: "bsc", address: accounts[0]};
const balance = await Moralis.Web3API.account.getNativeBalance(options)
  console.log(balance)
});

ok this is looking good, now we talking

So first of all, my issue is basically fixed for the code that I posted, thanks for that.

the second thing is, why is there an function(accounts) there?

And the last thing, I assume I have to paste all the code that is getting executed in the login function also into the accounts changed function?
Isnt there a better way on doing things?

Also please update your boilerplate code to work with accounts changed, cause everybody is using this and its ridiculous that there isnt already a boilerplate code for this stuff.

you can create functions so what you reuse the code in case that you don’t want to paste it twice

that function(accounts) is a callback function, a function that will be called when that event happens

I know with functions its easier but than i keep running into the problem that i cant use the output from one function as input in another function plus everything is realted to a user being logged in, so most of the time I end up writing 1 long sausage function.

I also have the issue that in my UI the user always has to refresh the page manualy and than log out, just to log back in to see the updated information for example balance or dividends or whatever it is.

These things are annoying to deal with and it should be much easier to do these things.
I hope react isnt as stupid as vanilla JS when dealing with this type of crap.
But my problem is, I dont know a lick about JS, so ihave to learn this first before getting into react,
Its frustrating to figure out on how to make this simple BS work, like account change, etc. This should come out the box already, everybody is using it so, why arent any decent tutorials to find for this stuff?
But anyways i just keep fcking rolling, there is nothing else i can do