WalletConnect not updating modal balance after payment transaction in React app

[Herculesdfy]

I am working on a React application where I use WalletConnect for handling crypto payments. The payment flow involves connecting a wallet, initiating a transaction, and then updating the user balance(in the wallet-connect modal). However, after a successful transaction, the user balance is not updating as expected. Here are the relevant parts of my code:

`

const projectId = "72c5504d7004e0e5f13e324ed2096ce2";
const metadata = {
name: "Web3Modal",
description: "Web3Modal Example",
url: "http://localhost:5173/", // origin must match your domain & subdomain
icons: ["https://avatars.githubusercontent.com/u/37784886"],
  };

const chains = [mainnet, polygon, bsc] as const;
const config = defaultWagmiConfig({
chains,
projectId,
metadata,
});


createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true, // Optional - false as default
themeMode: "dark",
themeVariables: {
	"--w3m-accent": "#c0983b",
	"--w3m-font-size-master": "8",
},
});

export function Web3ModalProvider({ children }: Web3ModalProviderProps) {
return <WagmiProvider config={config}>{children}</WagmiProvider>;
}`

`
function CoinPayment() {
let { order } = useMatch().data as Partial;
let { orderId } = useMatch().params as { orderId: string };
const navigate = useNavigate();
let { addToast } = useNotifications();
const account = useAccount();
const { address, chainId } = account;
const { data: balanceData, refetch: refetchBalance } = useBalance({ address });
const [selectedCurrency, setSelectedCurrency] = useState<"ETH" | "MATIC.POLY" | "BNB.BSC">(account.chainId === 1 ? "ETH" :
account.chainId === 137 ? "MATIC.POLY" : "BNB.BSC");
const [isLoading, setIsLoading] = useState(false);
const [openError, setOpenError] = useState(false);
const [openSuccess, setOpenSuccess] = useState(false);

const [coinpaymentDetails, setCoinpaymentDetails] = useState<{
    amount: string;
    txn_id: string;
    address: string;
    confirms_needed: string;
    timeout: number;
    checkout_url: string;
    status_url: string;
    qrcode_url: string;
}>();

const { data: transactionData, status, sendTransaction } = useSendTransaction();

useEffect(() => {
    if (account.chainId) {
        setSelectedCurrency(() => {
            const newCurrency = account.chainId === 1 ? "ETH" : account.chainId === 137 ? "MATIC.POLY" : "BNB.BSC";
            handleCoinpaymentGeneration(newCurrency);
            return newCurrency;
        });
    }
}, [account.chainId]);

useEffect(() => {
    if (status === "success") {
        setIsLoading(false);
        setOpenSuccess(true);
        addToast({ id: "payment-success", message: "Payment successful", severity: "success" });
        refetchBalance(); // Refresh the balance after a successful transaction
    } else if (status === "error") {
        setIsLoading(false);
        setOpenError(true);
        addToast({ id: "payment-error", message: "Payment failed", severity: "error" });
    }
}, [status]);

useEffect(() => {
    if (address) {
        refetchBalance()
            .then((result) => {
                console.log("Initial balance refetch successful:", result);
            })
            .catch((error) => {
                console.error("Initial refetch failed:", error);
            });
    }
}, [chainId, refetchBalance]);

if (!order) {
    addToast({ id: `Payment`, message: "Something went wrong", severity: "warning" });
    return <Navigate to={"/store"} />;
}

const handleCoinpaymentGeneration = async (currency: "ETH" | "MATIC.POLY" | "BNB.BSC") => {
    setIsLoading(true);
    try {
        const coinResp = await generateCoinpayment(orderId, currency);
        setIsLoading(false);
        if (coinResp.paymentIntent) {
            setCoinpaymentDetails(coinResp.paymentIntent);
        } else {
            addToast({ id: `Payment`, message: coinResp?.message || "Something went wrong", severity: "error" });
            navigate({ to: "/dashboard" });
        }
    } catch (error) {
        console.error("Payment generation error:", error);
        setIsLoading(false);
        addToast({ id: `Payment`, message: "Something went wrong", severity: "error" });
        navigate({ to: "/dashboard" });
    }
};

const handlePayment = async () => {
    if (!coinpaymentDetails) return;
    setIsLoading(true);
    try {
        await sendTransaction({
            to: coinpaymentDetails.address as `0x${string}`,
            value: parseEther(coinpaymentDetails.amount),
        });
    } catch (error) {
        console.error("Transaction error:", error);
        setIsLoading(false);
        setOpenError(true);
        addToast({ id: "payment-error", message: "Payment failed", severity: "error" });
    }
};

const copyLink = async (url: string, title: string) => {
    await navigator.clipboard.writeText(url);
    addToast({ id: "address-copy-success", message: `${title} copied!`, severity: "success" });
};

const handleCloseErrorModal = () => {
    setOpenError(false);
};

const handleCloseSuccessModal = () => {
    setOpenSuccess(false);
    navigate({ to: "/dashboard" });
};

return (
    <DefaultLayout variant="secondary" title="Payment" toolbar="none" pageID="payment-page" backLocation={`/order/${orderId}`}>
        <Container maxWidth="sm" disableGutters>
            <Box>
                <Box sx={{ mb: 1.5, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <Typography variant="h5">Wallet Payment</Typography>
                    <Typography variant="h6" color="primary">
                        {formatPrice(parseInt(order.total.toString().split(".")[0]) * (1 + COINPAYMENTS_FEE), 2)}
                    </Typography>
                </Box>
                <>
                    <Paper sx={{ p: { xs: 2, sm: 3 }, mb: { xs: 2, sm: 3 }, textAlign: "center" }}>
                        <Typography variant="body1" color="text.secondary" sx={{ mb: 0.5, letterSpacing: "0.01rem" }}>
                            SEND:
                        </Typography>
                        <Typography variant="h4" sx={{ mb: 3 }}>
                            {Number(coinpaymentDetails?.amount).toFixed(3)} {selectedCurrency}
                        </Typography>
                        <Typography variant="body1" color="text.secondary" sx={{ mb: 1.2, letterSpacing: "0.01rem" }}>
                            TO WALLET ADDRESS:
                        </Typography>

                        <Box sx={{ pl: 2, py: 0.75, display: "flex", alignItems: "center", m: 0, mb: 3, borderRadius: 1, border: "1px solid rgba(255,255,255,0.12)" }}>
                            <Typography variant="body1" sx={{ flex: 1, wordBreak: "break-word", lineHeight: 1, pr: 1 }}>
                                {coinpaymentDetails?.address}
                            </Typography>
                            <IconButton title="Copy Address" onClick={() => copyLink(coinpaymentDetails?.address || "", "address")}>
                                <CopyAllOutlined sx={{ color: "text.secondary" }} />
                            </IconButton>
                        </Box>
                        <Button variant="contained" fullWidth sx={{ mx: "auto" }} onClick={handlePayment} disabled={!coinpaymentDetails}>
                            Pay directly with your wallet
                        </Button>
                    </Paper>
                    <Button
                        variant="outlined"
                        fullWidth
                        sx={{ mb: 1 }}
                        onClick={() => {
                            navigate({ to: "/" });
                        }}
                    >
                        Go to Dashboard
                    </Button>
                </>
            </Box>
        </Container>
        <Backdrop sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }} open={isLoading}>
            <CircularProgress color="inherit" />
        </Backdrop>
        <SuccessModal openSuccess={openSuccess} handleCloseSuccess={handleCloseSuccessModal} message="Payment successful" />
        <ErrorModal openError={openError} handleCloseErrorModal={handleCloseErrorModal} errorHeading="Wallet Confirmation Error" errorMessage={"Payment failed. Please try again"} />
    </DefaultLayout>
);

}`

I have tried using the refetchBalance after the payment transaction, it gets the correct balance but I am unsure of how to update the wallet-connect modal's balance.
<Box> <w3m-button /> </Box>

[glitch-txs]

Not possible at the moment but we want to improve this.
#1402

[Herculesdfy]

So is the only current 'fix' for this to reload the window?

[glitch-txs]

that's really bad UX 😢 feel free to open a PR for this 👍

[lucky-0011]

Is there a solution to this terrible problem now?