0

I have only been able to find a way to use metamask in my page with web3js on desktop

How to I make it work on mobile (iOS/android)

Site is https://tipme.cash


const web3 = new Web3(window.ethereum);
        //const web3 = new Web3(new Web3.providers.HttpProvider(this.provider));
        if (typeof web3 === 'undefined' || !web3.currentProvider?.isMetaMask) {
            console.log('MetaMask is not enabled');
            this.error = 'MetaMask is not enabled';
            await this.render();
            return;
        }

        await window.ethereum.enable();
        await window.ethereum.request({ method: 'eth_requestAccounts' });

        const networkData = [
            {
                //chainId: '0x13881', // chain id in hexidecimal
                chainId: '0x89', // chain id in hexidecimal

                chainName: 'MATIC',

                //rpcUrls: ['https://rpc-mainnet.maticvigil.com/'], // dependent on main vs. testnet
                rpcUrls: ['https://polygon-rpc.com/'], // dependent on main vs. testnet

                nativeCurrency: {
                    name: 'MATIC',

                    symbol: 'MATIC',

                    decimals: 18
                },

                blockExplorerUrls: ['https://polygonscan.com/'] // dependent on main vs. testnet
            }
        ];
3
  • Did you try running it in MetaMask mobile?
    – Richard
    Dec 21, 2021 at 7:37
  • So is there a way to do that automatically? Like opensea uses this method but somehow they automatically load the metamask browser
    – chovy
    Dec 21, 2021 at 11:35
  • I see I can deep link but the problem is it’s a web component running on Other web sites. Is there a way to dynamically load it in the metamask browser?
    – chovy
    Dec 21, 2021 at 11:59

1 Answer 1

1

One option would be to use MetaMask's mobile browser as Richard suggested.

Another option would be to use WalletConnect. You need to instantiate your web3 with this walletconnect-provider instead of window.ethereum, and then continue as usual. The only other difference would be that listening to events is different - see description in the npm page I linked.

3
  • Can that be used client side?
    – chovy
    Dec 21, 2021 at 12:14
  • What do you mean? That provider I linked to needs to be installed on your website. Then your users would be able to connect to MM from their mobile. Dec 22, 2021 at 1:19
  • its an npm module. i'm not using node. i'm just using vanilla js (no build)
    – chovy
    Dec 23, 2021 at 0:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.