Connection Issue with Metamask SDK on mobile

[azarudeen]

I am making Ecom mobile app in Ionic-angular with crypto payments using MetaMask option,
When i am sending the request using eth_requestAccounts its returns user publickey in web but retuning empty response in mobile app, what i was missed to get publickey from metamsk app to ecom mobile app.
Is there any other options to connect MetaMask app from my ecomapp and make transactions.
Kindly share.
Thank you

[Chinzilla]

Hello @azarudeen, welcome to MetaMask community!

Feel free to check on MetaMask Docs and the Github repository for anything you may have missed.

Introduction | MetaMask Docs

MetaMask

[azarudeen]

I want to code or doc for a mobile app to mobile app communications,
Not browser to app or site communications

[Chinzilla]

You have that in what i linked above too. Mobile integration.

[snwlprd.eth]

Hello @azarudeen !

We need more information about your problem, perhaps pieces of your code. You can post it here or in an issue on github. By the way you used MetaMask deep link generator ?

[azarudeen]

const web3 = new Web3();
const MMSDK = new MetaMaskSDK();
console.log(MMSDK);

this.ethereum = MMSDK.getProvider();
console.log(this.ethereum);
// const accounts = await this.ethereum.getAccounts();
const accounts = await this.ethereum.request({
  method: 'eth_requestAccounts',

}).then((result:any)=>{
 console.log(result);
}).catch((error: any) => {
    // If the request fails, the Promise will reject with an error.
    console.log(error);
  });

I want a public id as a response after the app connected

[Intern]

Hello, I’m having the same issue right now, I’m using ionic react trying to authenticate with MetaMask and here is what I know at the moment :
-The prompt on the MetaMask app does appear after the redirect and it sends me back to my app correctly
-I’ve tried using await ethereum.request({ method: 'eth_requestAccounts' }) and I never got to the next code line
-I then tried to use a “.then().catch” and it doesn’t seems to reach the inside of the “.then()”, the “.catch()” does fire correctly showing “Error: Channel already created” if I try to reload which is normal. That version let me get to the next line since it doesn’t wait.

I’m using a emulator on android studio, I started with a pixel 2 API 28 (android 9) and now I use a pixel 4 API 33 (android 13).
Both emulator worked the same way except that a few times the prompt did not show on the pixel 2 and I got other problems while looking if walletconnect could be an easy alternative.
I did get an error 1013 at some point on the pixel 2 but I don’t think it helps.

Here is my code sample :
```
BackgroundMode.enable();
const MMSDK = new MetaMaskSDK({timer:BackgroundMode, //I am aware that BackgroundMode might not work the same way as react native but when I began testing I had to put something here for the prompt to show itsel
dappMetadata: {
injectProvider: false,
communicationLayerPreference: ‘webrtc’, //injectprovider and communicationLayerPreference didn’t change anything when I added it
name: "myapp’',
url: 'myappLink
}});

    const ethereum = MMSDK.getProvider();

    //let tmp = await ethereum.request({ method: 'eth_requestAccounts' });
    ethereum.request({ method: 'eth_requestAccounts' }).then(r=>console.log("My address  :  "+r)).catch(e=>console.log(e))

    //this.setState({value:tmp})
    
    BackgroundMode.disable();```

[andreahaku]

Hi,
if you use await then you can’t use the .then as it’s a promise structure and not an async/await one.
So you can:

window.ethereum
      .request({
        method: "eth_requestAccounts",
        params: [],
      })
      .then((res) => console.log("request accounts", res))
      .catch((e) => console.log("request accounts ERR", e));

or

const accounts = await window.ethereum
      .request({
        method: "eth_requestAccounts",
        params: [],
      });

console.log("request accounts", accounts);

make sure you are also sending the params option

[Intern]

Hi, I do know the difference between as it should be seen in the code sample (the await method is commented out) even tho something went wrong with the formatting.

I’ve tried adding the params option but it didn’t change anything.

When I see your example you don’t seem to use the MetaMask sdk and I’m pretty sure window.ethereum will not work correctly in a mobile app (not mobile browser) where the issue is but if there is a way for it to work I’d be glad to know

[andreahaku]

new MetaMaskSDK creates the window.ethereum that you can then use and access.

Please use socket as communicationLayerPreference and let me know if this works for you.
Also I suggest you to join our Discord server (link on the SDK website) so that other users can help you with that.

[Intern]

I just swapped to communicationLayerPreference: 'socket' and it seems better on web but it was already working and gave me the address I want.

On mobile (mobile app on emulator, I didn’t try inside a mobile browser) it doesn’t change anything, the code inside the .then() never seem to run
ethereum.request({ method: 'eth_requestAccounts' }).then(r=>console.log("address : "+r)).catch(e=>console.log(e))

I’ll continue searching later on this week and I’ll look after the discord at that point.
I’ll also see if the appstatechange event gives me anything when I get back to my app after the MetaMask prompt and maybe it’ll help finding the problem.

[azarudeen]

@Intern are you got a solution?

[azarudeen]

@andreahaku

th

Hi @andreahaku
I was tried above your code but its not working same issue
Not retuning account/key

[Intern]

Hello, I don’t have a solution yet. I tried many things and right now I’m just trying to get the react native example to work.
I’ve also tried to use walletconnect but the v2 isn’t supported yet and v1 is soon unsupported.
I have yet to see on discord as I have yet to take the opportunity to join.
I hope that if I get the example to work I’ll be able to find a solution for ionic but if not I guess I’ll have to swap framework (if react native work at some point) as I can’t really delay this project.

On another note, I’ve tried to follow the tutorial a bit further and use ether.js as proposed but there are polyfill problems that I could solve for web but couldn’t compile for mobile anymore.
Maybe the web3 library or another one may work but I have yet to try. So ionic might not be ready for that purpose (even tho I think I just didn’t find the way atm).

[azarudeen]

Hi @Intern
Hope this one will help to you
npm i @walletconnect/client
for more details visit npm page

[Intern]

Hello, I believe this is a deprecated package and as I said MetaMask doesn’t support the next version yet and that version is soon unusable.
I finally managed to get the account address using the same method as before but in react-native so I think I’ll stick with that.
I followed the tutorial here : https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/guide/metamask-sdk-js/metamask-sdk-react-native.html and did a few tweaks to get it working. The example didn’t work for me but starting from scratch, removing the crypto package and adding
resolver: { extraNodeModules: { crypto:require.resolve('react-native-crypto'), }, },
to my metro.config.js did the tricks but I haven’t dealt with etherjs yet, I think I’ll try without as I don’t need much then I’ll see if it is needed and can works.

[Chinzilla]

Hello. About walletconnect, these are the latest information and dates on it.

We’ve Reset the Clock on the WalletConnect v1.0 Shutdown; Now Scheduled for...

[azarudeen]

when i am calling await web3.eth.accounts.signTransaction(
transaction,
this.privateKey
);
method showing this error
any solutions

[KBeeTheCapybara]

Hi @azarudeen and @Intern ,

Would you please open a ticket on ‘MetaMask-mobile’ repo @

GitHub - MetaMask/metamask-mobile: Mobile web browser providing access to...