Lesson 10 : ConnectButton from web3uikit does not update

[tsuccar]

The ConnectButton in Header.js with code below does not refresh and update the ETH balance, although successful transaction are showing in Metamask. The account summary on Metamask and Connect Button do not match until I refresh the browser.

import { ConnectButton } from "web3uikit"

export default function Header() {
    return (
        <nav className="p-5 border-b-2 flex flex-row">
            <h1 className="py-4 px-4 font-bold text-3xl"> Decentralized Lottery</h1>
            <div className="ml-auto py-2 px-4">
                <ConnectButton moralisAuth={false}/>
            </div>
        </nav>
    )
}

@shoaibshebi

[shoaibshebi]

Hi @tsuccar

In short: you have to rerender the header component or you have to manually refresh the browser

In detail: I dont know how much you are familiure with the next.js or react.js, but i would suggest you to learn more about it as it is related to the next.js and the issue of not rendering the header part in which we have our ConnectButton. So either you should have to rerender the header by implementing state in it or have to refresh

More details:
https://www.youtube.com/watch?v=Nxe-9PkP8Nw
https://www.youtube.com/watch?v=0iNDB-2fg8A

:)

[shoaibshebi]

Please select the answer as Selected Answer whichever helped you, so that other devs can find help quickly

Thanks :)