connectButton balance refresh from componenet nextJS

[andyE]

I have connect button in a component in NextJS. I use it in a layout component to put the button in the footer.

All works good.

I notice when I buy/sell tokens in my dev environment, the connect button “balance” doesn’t update.

I cant figure out how I can refresh that since it’s a component without any state variables (or how do you update component based on a page state variables with useEffect?)

Only way I got this to work was to use a timer to refresh whole page after buy/sell activity.

Direction is appreciated… hoping to use something at the end of function call from onClick button execution of buy or sell tokens.

/////////////////// components/layout.js
import { ConnectButton } from “web3uikit”

const Layout = ({ children {) =>

return (
    <>
        <footer>
          <ConnectButton moralisAuth={false}></ConnectButton>
        </footer>
     
    </>
)

}

export default Layout

/////////// _app.js
import Layout from ‘…/components/Layout’
import { MoralisProvider } from “react-moralis”

function MyApp({ Component, pageProps }) {
return (


<Component {…pageProps} />


)
}

export default MyApp

//////////////// index.js
bunch of imports
export default function Index() {
// a bunch of code that works
return (

INDEX.JS

) }

[alex]

When you say you buy/sell tokens, you mean just want the native balance to update? How are you doing the buy/sell that changes the wallet’s balance?

One way is to force a re-render for ConnectButton. So you could do something similar to this example and pass it a prop that you could change after confirming the buy/sell transaction. You could maybe it pass it the transaction hash or something that will ensure it changes after each confirmed transaction.

function ConnectWallet() {
  return <ConnectButton moralisAuth={false}></ConnectButton>;
}

...

const [update, setUpdate] = useState("");

return (
  <footer>
    <ConnectWallet update={update} />
  </footer>
)

...

// after transaction confirmed
setUpdate("somethingheretoupdatecomponent");

[andyE]

What I mean by update Balance is that I want the ConnectButton to display the new balance of the wallet after the buy/sell event.

When I say buy/sell, I mean this:

I have a button that executes a buy function and another button that executes a sell function on the index.js page. When you buy/sell, the function calls the provider, contract/ABI, signer, etc. Opens metamask to confirm transaction. Then once it confirms, I can see that I have the new token (buy) or dont (sell). I see my balance in metamask decrement ETH on buy token, increment ETH on sell token.

What I want to see is the ConnectButton in the footer re-render to display the updated balance AFTER the buy/sell event transaction confirmation.

I have pseudo-forced this with setTimeout to document.layout.reload(). It works, albeit crudely. The page refresh forces a full re-render and the ConnectButton footer element is updated with the new balance.

What I posted initially in code is exactly how the ConnectButton is added to the index.js page.

The Layout component, which has the ConnectButton in the footer, is there…

The Layout component is imported and called through the _app.js page wrapped around the MoralisProvider.

My understanding is that the index.js page is rendered through _app.js

So, If I open http://url:3000/index I see the ConnectButton in the footer.

I connect, buy/sell, etc. But the ConnectButton (when I am connected to my metamask wallet) never updates the balance it displays.

I am wondering how to force a state change to re-render the Layout component in index.js

Or, am I making this harder than it is and I just need to force a state change on an item IN THE FOOTER and that would cause the footer re-render?

I see my original _app.js didnt post properly. I tried posting it again but the post keeps stripping out the fact that I call the “MoralisProvider” and then wrap that around the “Layout” component inside the function MyApp.

Layout Component:

_app.js:

Footer Render:

[andyE]

@alex

after confirming the b

Glad - appreciate the response. I understand what you are saying. I just dont understand where to put it (in Layout component? in index.js?)
BTW - Like most people here I dont have a clue what I am doing… I just followed Pat Collins tutorials and youtube videos and my understanding is limited to the last 30 days of banging on a keyboard and hearing his explainations (which I think are quite good frankly).

I was hoping there was a method in MoralisProvider or ConnectButton that I could use to update the state variable (local storage?)

I am thinking I could roll a useEffect every 2-3 minutes that polls the provider account balance and then uses that as a “state change” if it’s different than before… but again, I am stuck in where/how to force an update or re-render on the ConnectButton object itself.

That said, maybe I should just strip the ConnectButton from the Layout component and add it directly to the index.js page, I could try that…

Obviously that’s counterintuitive to component code reuse… maybe someone could point me how to write my Layout component to perform the above?

[alex]

Glad - appreciate the response. I understand what you are saying. I just dont understand where to put it (in Layout component? in index.js?)

In this case, since it’s in a parent component (Layout), probably the easiest/simplest solution is to pass state, so once the child updates this state that has been passed down to it e.g. after awaiting the transaction, the component in the parent that is using it will be re-rendered.

You can post the other code/component where the transaction takes place in your app if you get stuck.

You can read this on how to post code.