Redirect the page after the account received some amount of balance in [payable] method?

Question

When I use payable method, the page redirects to the wallet to approve the amount, but after the redirection, it returns to the old page, and the code below after the redirection is not run.

Here is the rust contract function:

#[payable]
pub fn add_liquidity(&mut self, tokens: u128, account_id: AccountId) -> u128 {
        let amount = env::attached_deposit();
}

Here, the reactjs code:

onSubmit={async (values, actions) => {
  try {
        const data = await nearvar.contract.add_liquidity({"tokens": values.buy.toString(), "account_id": "amiyarust.testnet"}, 95000000000000, 500)
        // Page redirects here. Code below is not run. 
        actions.setSubmitting(false)
        history.push(`/hello`)
    } catch (e) {
       console.error(e)
   }

I want to run history.push(`/hello`) after redirection.
But it refreshes the page, and the form is rendered again. How to do solve it?

Answer 1

You must store something in localStorage before the redirection.

e.g. what do you expect to have happened with the account prior to redirection?

Something like their current balance and also you expect it to increase by 1 N.

Then they are redirected back to your page, you should check this condition and then continue with the rest of your code.

There is an example of this here:

https://github.com/near-examples/nearnames/blob/54dd7dd1c6adca4688c76c78db3ea6bd10ed2a13/src/state/near.js#L93-L110

Specifically this: https://github.com/near-examples/nearnames/blob/54dd7dd1c6adca4688c76c78db3ea6bd10ed2a13/src/state/near.js#L106

Which get's read back on redirect here: https://github.com/near-examples/nearnames/blob/54dd7dd1c6adca4688c76c78db3ea6bd10ed2a13/src/state/near.js#L55

So this app is "aware" of pending transactions (accounts that should be created) and then when the user is redirected, the app checks to see if the accounts were really created via the TX.

Then you can display these links, etc...