search

Betarena / scores

We are building the first open-source live results and statistics platform with community involvement features for data insertion. The project includes a blockchain component that will allow participants to receive rewards based on their participation and also to stake the future Token of the platform.
GNU General Public License v3.0
18 stars 6 forks source link

Wallet Connect for Dapp use on MetaMask #1020

Closed jonsnowpt closed 1 year ago

jonsnowpt commented 1 year ago

🐛 Introduction:

The MetaMask wallet connection is working on the Desktop version but does not work on the MetaMask app has a Dapp. It seems that to get this working; we need to add Wallet Connect into the loop.

📝 Details:

The goal is to allow the Dapp to work on the MetaMask App; for this, we have the following resources:

https://forum.moralis.io/t/authentication-in-mobile-app/20949/2

https://docs.moralis.io/authentication-api/how-to-sign-in-with-walletconnect

This requirement was confirmed by the Moralis support guys.

🔍 Steps to Reproduce:

Enter the MetaMask App, and using the browser, try to access scores. Betarena and then Connect.

🤔 Expected Behavior:

Connect the MetaMask wallet.

💥 Actual Behavior:

Nothing happens.

💡 Additional Information:

We already have an account on Wallet Connect and a Betarena Project. Access details are available upon request.

migbash commented 1 year ago

NOTES

WalletConnect not working with the tutorial from Moralis.

Depreciated packages and not working npm modules from WalletConnect with a V2 migration are required to get the code working, however, no NEW🎖️ guide exists on V2 Wallet connect support.

Image

Asking around forums discord-link and other sources, can't seem to get it working either.

Aim to get this sorted with mobile connection, and find a solution.

jonsnowpt commented 1 year ago

@migbash

Did you submit a request to Moralis support?

migbash commented 1 year ago

@jonsnowpt Yes, but no response as of yet. I will follow up.

jonsnowpt commented 1 year ago

@migbash

You have a chat available on the client area. They were very fast with me.

migbash commented 1 year ago

@jonsnowpt yes, but no response yet. Waiting to hear - used the chat feature also.

migbash commented 1 year ago

NOTES

DEPENDENCY npm package | WEB3-PROVIDER GUIDE | moralis - authetication V1 GUIDE | walletconnect - wallet | V2 GUIDE | walletconnect - html modal | V2

HOW-TO | connect web3 mobile (1) HOW-TO | connect web3 mobile (2) HOW-TO | connect web3 mobile (3)

UPDATE [#1]

Root of the issue identified as the SvelteKit & vite compiler issue - that do not work with the npm packages of WalletConnect. Raising issues on deployment, with errors like such as:

Module "buffer" has been externalized for browser compatibility. Cannot access "buffer.Buffer" in client code.

Discord Moralis Ticket Discussion

MY OPENED ISSUE | https://github.com/vitejs/vite/issues/12102 Opened an issue with VITE

FROM VITE: We recommend avoiding Node.js modules for browser code to reduce the bundle size, although you can add polyfills manually. If the module is imported from a third-party library (that's meant to be used in the browser), it's advised to report the issue to the respective library. source-error

🛠️ Possible solution(s):

✅❗️ Fix applied (of-sorts) 19/02 solution

UPDATE [#2]

New issue detected after solving the previous issue of the Vite compiler issue not importing and crashing the #1 issue (above).

Now the WalletConnect works and opens the connection for the QR-code scanning on (desktop) and the MetaMask mobile application on (mobile). However, on (mobile), both in V1 and V2 of the WalletConnect SDK the MetaMask does nothing after the intent of opening the application - and does not prompt to sign in the user and neither redirects the user back to the website.

This is a very common issue and has been reported and seen many times - with no response from WalletConnect since many months. (check discord link below).

Discord | Issue Raised Link

Moving away from WalletConnect as the testing of both the MetaMask connection for mobile application using V1 and V2 does not work, and no fix is looking to be in place. Instead the official | BETA version of the MetaMask SDK is used to access the MetaMask application and retrieve the users wallet address and log them in.

❗️Has its own issues => IOS user must have the MetaMask application open in the background and signed in for the MetaMask SDK to work every-time on Mobile

jonsnowpt commented 1 year ago

@migbash

Not working on Connect wallet in the user settings section.

jonsnowpt commented 1 year ago

@migbash

The Button size is now incorrect:

Image