Solving Mobile Browser Wallet Issues Using ThirdWeb

Background

Rebel Ants is a gamified NFT dApp where users mint Ant NFTs. Rebel Ants merges digital art with AI-driven storytelling mechanics. In "Battle for the Colony," ants engage in weekly battles within their gang contexts. These battles are narrated and resolved by AI narrative engines, transforming trait-based probabilities into immersive mini-stories for holders.

Owners register their ants for battle. Winning gang members receive rewards based on contribution to their gang's power, blending gaming mechanics with participatory rewards.

The Problem

Despite supporting over 500 wallet providers via ThirdWeb, Rebel Ants users encountered a critical issue on mobile browsers:

• Users could connect their wallets and view their ants, but could not enter battles.
• The dApp worked in the MetaMask in-app browser, but not in standard mobile browsers (Safari, Chrome, etc.).
• This led to a significant drop-off in battle participation from mobile users.

Technical Root Cause

• The original codebase relied heavily on window.ethereum for all contract interactions (via Web3.js or ethers.js).
• On mobile browsers, window.ethereum is not injected unless using a wallet's in-app browser (like MetaMask Mobile).
• As a result, contract calls (such as registering ants for battle or checking gang membership) failed on mobile browsers-even though wallet connection worked via ThirdWeb.

Why window.ethereum Is Not Available on Mobile Browsers

The window.ethereum object is injected into the browser environment by wallet extensions like MetaMask-but only on desktop browsers (Chrome, Firefox, Brave) or within the in-app browser of wallet apps (such as MetaMask Mobile).

On standard mobile browsers (e.g., Safari or Chrome), there is no extension to inject window.ethereum.

As a result, dApp code that relies on this object for contract interactions will fail-because the object simply doesn't exist.

This means that although users can connect wallets using WalletConnect or ThirdWeb, any dApp logic relying on window.ethereum for transactions will silently break outside of wallet-specific browsers.

Solution

Refactoring for ThirdWeb

We replaced all contract interactions to use ThirdWeb's SDK, which does not depend on window.ethereum and is fully compatible with WalletConnect and public RPCs.

We refactored battle logic (registration flows, power calculations, and metadata fetches) to use ThirdWeb's getContract, readContract, and transaction hooks.

From this:

const CONTRACTS = {
        BattleForColony: {
          address: "0xdcE21E84a3DC99E2B0124276E21D4566F8421219",
          abi: ColonyABI,
        },
      };
      export const getContractInstance = (contractKey) => {
        const contractConfig = CONTRACTS[contractKey];
        if (!contractConfig) {
          console.error(`Contract configuration for ${contractKey} not found.`);
          return null;
        }

        try {
          const web3Instance = getWeb3Instance();
          return new web3Instance.eth.Contract(
            contractConfig.abi,
            contractConfig.address,
          );
        } catch (error) {
          console.error(
            `Failed to create contract instance for ${contractKey}:`,
            error.message,
          );
          return null;
        }
      };

      const battleContract = useMemo(() => {
        if (!account) return null;
        try {
          return getContractInstance("BattleForColony");
        } catch (error) {
          console.error("Failed to get contract:", error);
          return null;
        }
      }, [account]);

      const gangPower = await battleContract.methods.gangPower(account.address).call();
      

To this:

const thirdwebBattleContract = getContract({
        client,
        chain: apechain,
        address: "0xdcE21E84a3DC99E2B0124276E21D4566F8421219",
        abi: RebelAntsABI,
      });

      const gangPower = await readContract({
        contract: thirdwebBattleContract,
        method: "gangPower",
        params: [account.address],
      });
      

Migration Details

• Replaced all Web3.js and ethers.js direct calls with ThirdWeb utilities.
• Migrated battle participation, ownership reads, and metadata fetches to use ThirdWeb's universal abstractions.
• Verified read/write operations across mobile and desktop environments.

Testing

• Used iOS and Android devices with Chrome and Safari to test wallet connection, registration, and battle participation.
• Confirmed that mobile users could now register ants for battle outside of MetaMask's in-app browser.

Results

• Drastic reduction in user issues related to mobile wallet functionality.
• Mobile users can now fully participate in Rebel Ants from any modern browser.
• Increased battle participation and community satisfaction.
• Future-proofed the dApp by avoiding hard dependencies on window.ethereum.

Limitations & Future Improvements

• ThirdWeb's transaction abstraction adds slight latency vs direct RPC calls.
• Performance could be improved with optimized RPC endpoints or local caching.

Key Takeaways

• Avoid relying on window.ethereum if you want consistent behavior across desktop and mobile browsers.
• Use wallet-agnostic libraries like ThirdWeb for both wallet connection and contract interaction.
• Always test on real mobile devices and browsers, not just in developer tools or wallet apps.
• Refactoring for compatibility can unlock broader participation and reduce friction in web3 dApps.