Adding Recent Trns Not Working

[0xAskar]

Anyone have any insight into why the Recent Transactions isn't working for me? I added the prop in the RainbowKit wrapper component and also used addRecentTransaction function after the transaction is submitted, but nothing shows up. I did customized my button, so not sure if I removed something there that caused this problem.

I tried looking over the button code to see if I got rid of anything important, but the problem is when the transaction is complete, the modal doesn't show that transaction (see picture below). Code is also below, let me know.

Adding the prop

 <RainbowKitProvider
    modalSize="compact"
    appInfo={{ appName: "Flips.Finance", disclaimer: Disclaimer }}
    showRecentTransactions={true}
    chains={chains}
    theme={darkTheme()}>
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Component {...pageProps} />
    </ErrorBoundary>
  </RainbowKitProvider>

Sending trxn and adding trxn

const addRecentTransaction = useAddRecentTransaction(); // this is for the rainbowkit functionality
const txHash = await ethereum.request({
      method: 'eth_sendTransaction',
      params: [transactionParameters],
});
  storeTrxnHash(txHash)
  let added = addRecentTransaction({
      hash: txHash,
      description: "Flips Pro Subscription for " + tier + ". Starting " + (new Date()).toDateString(),
      confirmations: 2,
    });

Customized Wallet Button

import { ConnectButton } from '@rainbow-me/rainbowkit';
import Styles from "./walletbutton.module.css"
export default function WalletButton(props) {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        authenticationStatus,
        mounted,
      }) => {
        // Note: If your app doesn't use authentication, you
        // can remove all 'authenticationStatus' checks
        const ready = mounted && authenticationStatus !== 'loading';
        const connected =
          ready &&
          account &&
          chain &&
          (!authenticationStatus ||
            authenticationStatus === 'authenticated');
        return (
          <div
            {...(!ready && {
              'aria-hidden': true,
              'style': {
                opacity: 0,
                pointerEvents: 'none',
                userSelect: 'none',
              },
            })}
          >
            {(() => {
              if (!connected) {
                return (
                  <div onClick={openConnectModal} className = {Styles.mainbttn}>
                    Connect Wallet
                  </div>
                );
              }
              if (chain.unsupported) {
                return (
                  <div onClick={openChainModal} className = {Styles.mainbttn}>
                    Wrong network
                  </div>
                );
              }
              return (
                <div style={{ display: 'flex', gap: 12 }}>
                  {/* <button className = {Styles.mainbttn}
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button"
                  >
                    {chain.hasIcon && (
                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: 'hidden',
                          marginRight: 4,
                        }}
                      >
                        {chain.iconUrl && (
                          <img
                            alt={chain.name ?? 'Chain icon'}
                            src={chain.iconUrl}
                            style={{ width: 12, height: 12 }}
                          />
                        )}
                      </div>
                    )}
                    {chain.name}
                  </button> */}
                  <div className = {Styles.mainbttn} onClick={openAccountModal}>
                    {account.displayName}
                    {/* {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ''} */}
                  </div>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
};