My (in development) dapp works fine on pc but doesnt work on mobile

[C00K1E-dev]

Currently working on a dapp .... www.mintandwin.com (feel free to check but currently in development) I am using web3modal and as stated in title, the PC version works ok the mobile version wont work

the walletconnectbutton :

import React, { useEffect, useState } from 'react';
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
import { Web3Modal } from '@web3modal/react';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { arbitrum, avalanche, bscTestnet, mainnet, polygon, } from 'wagmi/chains';
import { Web3Button, W3mQrCode } from '@web3modal/react';

const chains = [arbitrum, mainnet, polygon, bscTestnet, avalanche];
const projectId = 'aca932c97e3f9bc59a1636dc1aeae670';

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
const wagmiConfig = createConfig({
autoConnect: true,
connectors: w3mConnectors({ projectId, chains }),
publicClient,
});
const ethereumClient = new EthereumClient(wagmiConfig, chains);

function Web3ConnectButton() {
const [isConnected, setIsConnected] = useState(false);

useEffect(() => {
setIsConnected(ethereumClient.connected);
}, []);

return (
<>



<Web3Modal
themeMode="dark"
themeVariables={{
'--w3m-logo-image-url': './images/walletlogo.png',
'--w3m-overlay-backdrop-filter': 'blur(5px)',
'--w3m-overlay-background-color': 'rgba(0, 0, 0, 0.1)',
'--w3m-background-color': '#0adab9',
'--w3m-accent-fill-color': '#1a1f2c',
'--w3m-accent-color': '#0adab9',
'--w3m-font-family': 'jost',
}}
projectId={projectId}
ethereumClient={ethereumClient}
/>
</>
);
}

export default Web3ConnectButton;

i have the MintButton :

function MintButton() {
const [showPopup, setShowPopup] = useState(false);
const [popupMessage, setPopupMessage] = useState("");
const [ethereumClient, setEthereumClient] = useState(null);
const [isConnected, setIsConnected] = useState(false);
const quantity = 1;

useEffect(() => {
  // Listen for changes in the Ethereum provider's state (e.g., user connects or disconnects wallet)
  const handleAccountsChanged = async (accounts) => {
    const isConnected = accounts.length > 0;
    setIsConnected(isConnected);
  };

  if (ethereumClient) {
    window.ethereum.on("accountsChanged", handleAccountsChanged);

    return () => {
      // Clean up the event listener when the component unmounts
      window.ethereum.removeListener("accountsChanged", handleAccountsChanged);
    };
  }
}, [ethereumClient]);

const initializeEthereumClient = async () => {
  if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
    const web3 = new Web3(window.ethereum);
    setEthereumClient(web3);

    // Check if the user is connected to a wallet
    const isConnected = await checkWalletConnection(web3);
    setIsConnected(isConnected);
  }
};

useEffect(() => {
  initializeEthereumClient();
}, []);

const checkWalletConnection = async (web3) => {
  try {
    const accounts = await web3.eth.getAccounts();
    return accounts.length > 0;
  } catch (error) {
    console.error("Failed to check wallet connection", error);
    return false;
  }
};

const handleMint = async () => {
  try {
    if (!ethereumClient) {
      setPopupMessage("Please connect your wallet first.");
      setShowPopup(true);
      return;
    }

    // Check if the user is connected to a wallet
    if (!isConnected) {
      setPopupMessage("Please connect your wallet first.");
      setShowPopup(true);
      return;
    }

    const winNft = new ethereumClient.eth.Contract(abi, contractAddress);
    const nftPrice = BigInt(await winNft.methods.NFT_PRICE().call());
    const totalPrice = nftPrice * BigInt(quantity);

    const accounts = await ethereumClient.eth.getAccounts();
    const fromAddress = accounts[0]; // Use the first account as the 'from' address

    await winNft.methods.mintNFT(quantity).send({
      from: fromAddress,
      value: totalPrice.toString(),
    });

    setPopupMessage("Your NFT has been minted successfully!");
    setShowPopup(true);
  } catch (error) {
    console.error(error);
    setPopupMessage("An error occurred while minting your NFT.");
    setShowPopup(true);
  }
};

return (
  <div>
    <button className="btn btn--primary" onClick={handleMint}>
      Mint Ticket
    </button>

    {showPopup && <PopupMessage message={popupMessage} onClose={() => setShowPopup(false)} />}
  </div>
);

}

export default MintButton;

and i have the ViewNfts Button :

function NFTsButton() {
const [showPopup, setShowPopup] = useState(false);
const [popupMessage, setPopupMessage] = useState("");
const [ethereumClient, setEthereumClient] = useState(null);
const [nftsData, setNFTsData] = useState([]);
const [isConnected, setIsConnected] = useState(false);
const [collectionName, setCollectionName] = useState("");
const [ownerTokenIds, setOwnerTokenIds] = useState([]);

useEffect(() => {
const initializeEthereumClient = async () => {
if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
const web3 = new Web3(window.ethereum);
setEthereumClient(web3);
}
};

initializeEthereumClient();

}, []);

const checkWalletConnection = async () => {
try {
const accounts = await ethereumClient?.eth.getAccounts();
return accounts && accounts.length > 0;
} catch (error) {
console.error("Failed to check wallet connection", error);
return false;
}
};

const fetchCollectionName = async () => {
try {
if (!ethereumClient) {
return;
}

  const nftContract = new ethereumClient.eth.Contract(abi, contractAddress);
  const name = await nftContract.methods.name().call();
  setCollectionName(name);
} catch (error) {
  console.error("Error fetching collection name:", error);
}

};

const fetchOwnerTokenIds = async () => {
try {
if (!ethereumClient) {
return;
}

  // Check if the user is connected to a wallet
  const isConnected = await checkWalletConnection();
  if (!isConnected) {
    return;
  }

  const nftContract = new ethereumClient.eth.Contract(abi, contractAddress);
  const accounts = await ethereumClient.eth.getAccounts();
  const ownerAddress = accounts[0]; // Use the first account as the owner address

  // Call your contract's function to get token IDs owned by the user
  const tokenIds = await nftContract.methods.getTokenIdsByOwner(ownerAddress).call();
  console.log("Token IDs owned by the user:", tokenIds); // Debugging statement
  setOwnerTokenIds(tokenIds);
} catch (error) {
  console.error("Error fetching owner's token IDs:", error);
}

};

const fetchVideoUrl = async (tokenId) => {
try {
// Implement the logic to fetch the video URL for the given tokenId
// For example, you can fetch the data from your smart contract's nftData function
if (!ethereumClient) {
return "DEFAULT_VIDEO_URL";
}

  // Check if the user is connected to a wallet
  const isConnected = await checkWalletConnection();
  if (!isConnected) {
    return "DEFAULT_VIDEO_URL";
  }

  const nftContract = new ethereumClient.eth.Contract(abi, contractAddress);
  const nftDataFunction = nftContract.methods.nftData(tokenId);
  const nftData = await nftDataFunction.call();
  const videoUrl = `${baseIpfsUrl}${tokenId}.mp4`; // Append the token ID to the URL

  return videoUrl;
} catch (error) {
  console.error("Error fetching video URL:", error);
  // Return a default or placeholder video URL in case of an error
  return "DEFAULT_VIDEO_URL";
}

};

const fetchNFTData = async () => {
let nfts = []; // Declare nfts here

try {
  if (!ethereumClient) {
    setPopupMessage("Please connect your wallet first.");
    setShowPopup(true);
    return;
  }

  // Check if the user is connected to a wallet
  const isConnected = await checkWalletConnection();
  if (!isConnected) {
    setPopupMessage("Please connect your wallet first.");
    setShowPopup(true);
    return;
  }

  if (ownerTokenIds.length === 0) {
    setPopupMessage("You don't own any NFTs.");
    setShowPopup(true);
    return;
  }

  // Fetch the NFT data for each token ID
  for (const tokenIdWithN of ownerTokenIds) {
    const tokenId = tokenIdWithN.toString();
    const videoUrl = await fetchVideoUrl(tokenId);
    const nft = { tokenId, videoUrl, collectionName }; // Include collectionName in each nft object
    nfts.push(nft);

    // Add a delay of 1 second before fetching the next video URL
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }

  // Create JSX elements for each NFT
  const nftsDisplay = nfts.map((nft) => (
    <div key={nft.tokenId}>
      <p>Collection Name: {collectionName}</p>
      <p>Token ID: {nft.tokenId}</p>
      <video controls width="320" height="240">
        <source src={nft.videoUrl} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
  ));

  setNFTsData(nfts); // Store the fetched NFT data in state
  setPopupMessage(nftsDisplay); // Set the fetched NFT data as the popup message
  setShowPopup(true); // Display the fetched NFT data in the popup
} catch (error) {
  console.error("Error fetching NFT data:", error);
  setPopupMessage("An error occurred while fetching your NFTs.");
  setShowPopup(true);
}

};

useEffect(() => {
fetchCollectionName();
fetchOwnerTokenIds();
}, [ethereumClient]);

return (

View Your NFTs

  {showPopup && (
    <PopupMessageNFT message={popupMessage} onClose={() => setShowPopup(false)} />
  )}
</div>

);
}

export default NFTsButton;

Everything works fine on the PC however on mobile the connected state doesnt seem to work ... because when i click on the mint ticket button the popupmessge that i implemented throws me the error to connect wallet 1st even tho i am already connected .... its the same for the view nfts button .... as i said on PC works fine only mobile version is faulty ... any help would be much appreciated

[glitch-txs]

Hi, could you provide a minimal reproducible example of your issue?

[C00K1E-dev]

@glitch-txs I have sent you an invite for the repository . You can see the structure.

[glitch-txs]

Answering here, web3modal uses wagmi to interact with the blockchain, you can check their docs here
https://wagmi.sh/react/hooks/useContractWrite

We'll add support for web3.js and ethers Web3Modal v3