Wallet Connect 2.0 not working when shipping it in production.

[AugustinKimi]

Hello,

We made the update to the latest version and to handle the new xPortal App connexion but we have trouble making it work.

The integration went well, everything works in local environnement but when shipping it to production or at least on stagging environment, when we scan the QRcode we get the haptic feeback but nothing pop on my mobile. Not error displayed on the mobile screen, no error on the dApp just the QRcode not working.

Does anyone have the same issue ?

Here is the code

const environment = "mainnet"
const App = () => {
return(
     <DappProvider environment={environment}
    customNetworkConfig={{
      name: 'customConfig',
      walletConnectV2ProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
    }} >
        <Layout>
          <NotificationModal />
          <SignTransactionsModals />
          <Component {...pageProps} />
        </Layout> 
    </DappProvider>
)
}

<WalletConnectLoginButton
          callbackRoute="/"
          redirectAfterLogin={false}
          loginButtonText={"Maiar"}
          logoutRoute="/"
          className="wallet-btn wallet-btn-block wallet-btn-connect"
          shouldRenderDefaultCss={false}
          isWalletConnectV2={true}
        >
          <div className="wallet-logo-container">
            <img
              src="/images/walletConnectionIcons/xportal.png"
              alt=""
              className="wallet-logo"
            />
          </div>
          <span className="wallet-name">xPortal App</span>
        </WalletConnectLoginButton>

{
  "name": "my-app,
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@multiversx/sdk-core": "^11.4.1",
    "@multiversx/sdk-dapp": "^2.10.3",
    "axios": "^0.27.2",
    "bignumber": "^1.1.0",
    "jsonwebtoken": "^8.5.1",
    "next": "12.2.3",
    "next-transpile-modules": "^10.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-modal": "^3.15.1"
  },
  "devDependencies": {
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3"
  }
}

[radumojic]

The config looks ok, and since you say it's working on local development, this makes me think that it could be a ProjectId issue

Do you get any any errors in the browser console while following this flow?

On https://cloud.walletconnect.com, have you set the "Allowed Domains" for the project? Sometimes even though it's rightfully set, there might be some issues with some blocking, so just to be sure, remove any domains added to that list.

[AugustinKimi]

After waiting maybe 2 minutes (Didn't count as it's very long and I usually do something else)

Here is the error :

_app-51c09eaeb85742f4.js:12 Uncaught (in promise) Error: WebSocket connection failed for URL: wss://relay.walletconnect.com?auth=eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkaWQ6a2V5Ono2TWtoaFM5dGJZcWs5ZG5yY2NRWlRFejhLU2tCMVBldXpYRDlGdEdqYktGcDFnciIsInN1YiI6ImRhZDNhNzcyZDY1MWZiYmRlMmQ5OTJiNTFmYjQyNDZhMzI4YTA5MDNmNzM1ZDA0YjBlOTlhMDI4MDVjZmMwMjgiLCJhdWQiOiJ3c3M6Ly9yZWxheS53YWxsZXRjb25uZWN0LmNvbSIsImlhdCI6MTY3ODExMzI4NywiZXhwIjoxNjc4MTk5Njg3fQ.tRCbbYV22Xj4DuQP-X_ATpubF4HlVJuZMLQi9u_KScU3DXMfBE3kOWXaUxGmX7Lrou6kgMlounOM_byc54BeBQ&projectId=my-project-id(I-dont-know-if-Its-ok-to-share-it)&ua=wc-2%2Fjs-2.4.3%2Fmacos-chrome-110.0.0%2Fbrowser%3my-domain.com
    at b6.emitError (_app-51c09eaeb85742f4.js:12:211966)
    at f.onerror (_app-51c09eaeb85742f4.js:12:211229)

I already tried to setup my domains including the domains i'm testing on, waited 24 hours to make sure eveything is up to date. Nothing worked and now my Allowed Domains are empty.

[radumojic]

Hello,

If the issue still persists, this seems like a relayer-specific problem, an invalid projectId would theoretically fail instantly.

Are you using a VPN ? That might influence the connection stability sometimes.

As a first step, can you try one of the following region-based relay servers ?

// EU
wss://eu-central-1.relay.walletconnect.com

// US
wss://us-east-1.relay.walletconnect.com

// Asia Pacific
wss://ap-southeast-1.relay.walletconnect.com

to use a different relay server, you must provide the walletConnectV2RelayAddresses array in customNetworkConfig on the <DappProvider>

something like this:

<DappProvider 
  environment={environment}
  customNetworkConfig={{
    name: 'customConfig',
    walletConnectV2ProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
    walletConnectV2RelayAddresses: ['wss://eu-central-1.relay.walletconnect.com']
  }}
>
    <Layout>
     ...
    </Layout> 
</DappProvider>

Also to eliminate any variables, if changing the relay server doesn't work, can you make a test with the following projectId ?

9b1a9564f91cb659ffe21b73d5c4e2d8

It's the one used on https://github.com/multiversx/mx-template-dapp, not recommended for production use, but it should work for a short test.

[AugustinKimi]

None of the above solutions worked.

I'm not using a VPS. (Domains are managed by vercel)

Setting the walletConnectV2RelayAddresses doesn't work

Using this projectId : 9b1a9564f91cb659ffe21b73d5c4e2d8 doesn't work either.

I sometimes also have this error :

react_devtools_backend.js:2655 {context: 'core'}context: "core"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() {context: 'core/expirer'} 'No matching key. expirer: topic:52074642a409e021151d732da20f199cd64d73d94024ac3ee73ba6f792fc0517'

[radumojic]

Seems that you might have a corrupted WC2 state

Can you try clearing the Local Storage before trying again ? WC2 saves it's current state in Local Storage with keys prefixed by 'wc@2:', maybe something went wrong there and each time it tries to reinitialize, it fails because of that corrupted state.

Also, useful for debugging, you can add walletConnectV2Options: { logger: 'debug' } to the customNetworkConfig and that would give you a full WC2 debugging flow in the console, maybe that helps narrowing it down

[AugustinKimi]

Clearing the Local Storage didn't worked for me and couldn't be a soluation as I won't ask all the user to clear their Local Storage themselves.

Here are all the logs usgin the logger :

{context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/messages'} 'Successfully Restored records for messages'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} 'Core Initialization Success'
_app-9a7372ec7d33ec53.js:96 {context: 'client'} 'SignClient Initialization Success'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/pairing'} {context: 'core/pairing/pairing'} 'Setting value'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Subscribing Topic'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Outgoing Relay Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} 'Incoming Relay Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Setting subscription'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Emitting subscription_created'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} {type: 'event', event: 'subscription_created', data: {…}}
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Successfully Subscribed Topic'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/expirer'} 'Emitting expirer_created'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/expirer'} {type: 'event', event: 'expirer_created', data: {…}}
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/history'} 'Setting JSON-RPC request history record'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/history'} 'Emitting history_created'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/history'} {type: 'event', event: 'history_created', record: {…}}
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/publisher'} 'Publishing Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/publisher'} 'Outgoing Relay Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'client'} 'Setting value'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/expirer'} 'Emitting expirer_created'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/expirer'} {type: 'event', event: 'expirer_created', data: {…}}
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} 'Incoming Relay Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/publisher'} 'Successfully Published Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/history'} 'Successfully Restored records for history'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/expirer'} 'Successfully Restored expirations for expirer'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/messages'} 'Successfully Restored records for messages'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Successfully Restored subscriptions for subscription'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/relayer'} {context: 'core/relayer/subscription'} 'Outgoing Relay Payload'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} {context: 'core/pairing'} {context: 'core/pairing/pairing'} 'Successfully Restored value for pairing'
_app-9a7372ec7d33ec53.js:96 {context: 'core'} 'Core Initialization Success'
_app-9a7372ec7d33ec53.js:96 {context: 'client'} 'Successfully Restored value for proposal'
_app-9a7372ec7d33ec53.js:96 {context: 'client'} 'SignClient Initialization Success'

[radumojic]

Can you scan the QR code and login using https://react-wallet.walletconnect.com/ ?

It's the default implementation for a WalletConnect 2.0 signing app from WalletConnect See more here: https://github.com/WalletConnect/web-examples

This should show you a preview of all the methods used on login.

Something like this:

[AugustinKimi]

Scanning the QRcode with this seems to work. It trigger the permissions. The methods are exactly the same.

On my side it seems to work, I get a response every hooks I'm using from @multiversx/sdk-dapp works well.

Request URL: https://api.multiversx.com/accounts/erd15j4hute3gd4s4pwazh8duscmdp5qt3fcj8mtjwaqtjlvyr0z8tyqryc2s6 Request Method: GET Status Code: 200 Remote Address: 104.22.32.187:443 Referrer Policy: strict-origin-when-cross-origin

Request URL: wss://eu-central-1.relay.walletconnect.com/?auth=eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkaWQ6a2V5Ono2TWtob1poOVdKcXIxc1VuU1NOeWZKaXZWRkZhZ2hVWGtQNWE2eGY5QkdGc2tyZiIsInN1YiI6IjcyOWNmZGM1YjU3ZTY0NjE3M2RkMDQ2YjkxZWIxZGRiOTNhZjA2ODM5Nzg1YWM5NTFiODgzYTI4YTUwM2E0M2MiLCJhdWQiOiJ3c3M6Ly9ldS1jZW50cmFsLTEucmVsYXkud2FsbGV0Y29ubmVjdC5jb20iLCJpYXQiOjE2Nzg4MjIyNzAsImV4cCI6MTY3ODkwODY3MH0.94o2d14BxeSy43ezBG-irt4XBFPrwtnrrkyxQa4-gsILcQsUBqhVshUznxLZ1Tkz_ZdWJNjjaYkmMisYhfQsDw&projectId=f8112c686312233151e350e3fd6b1875&ua=wc-2%2Fjs-2.4.3%2Fwindows10-chrome-111.0.0%2Fbrowser%3Alocalhost%3A3000 Request Method: GET Status Code: 101 Switching Protocols

Request URL: https://api.multiversx.com/dapp/config Request Method: GET Status Code: 200 Remote Address: 104.22.32.187:443 Referrer Policy: strict-origin-when-cross-origin

Request URL: https://api.multiversx.com/accounts/erd15j4hute3gd4s4pwazh8duscmdp5qt3fcj8mtjwaqtjlvyr0z8tyqryc2s6 Request Method: GET Status Code: 200 Remote Address: 104.22.32.187:443 Referrer Policy: strict-origin-when-cross-origi

Here is all the request in the request tab once I approved the login in case you need it.

[raress96]

I have something similar although I am not sure if it is the same issue.

I can scan the code/click the link on mobile, but in xPortal I just get a loading screen. BUT I am logged in on the website if I hit back in xPortal, although xPortal doesn't have any connection open.

And when I initiate a transaction, it works as expected and I can sign it through xPortal and then send it through the dApp, which is super weird...

[radumojic]

This looks like there could be an issue on xPortal on your specific device.

Looking through the WalletConnect connection logs, it looks like the pairing is created and the messages are successfully relayed between the device and the website so the sdk-dapp implementation is correct.

Although we test the app on a multitude of operating systems and devices, there might still be some compatibility issues. And since you can encounter this repeatedly, it would be a great help if you could fill in this: https://form.typeform.com/to/i91ooInB?typeform-source=multiversx.com feedback form ( make sure you also include the sdk-dapp Issue link too so we can single it out ).

Also, you could further single out the issue by testing the login on the mobile device (clicking the connect button) vs scanning the QR code.

[AugustinKimi]

It cannot be from my devices, there is a whole community that cannot use this connection and we've been forced to delete this login method for a moment.

I'll take time to fill it

When I do it directly on my devices by clicking the button it doesn't work either.

[AugustinKimi]

@radumojic Any news. Why do I feel like my issue is getting ignored ? No response for 2 weeks now, on discord neither.

Will finally have to move our entire tools to other package....

[damienen]

many users also have issues with connecting on many dApps that are using sdk-dapps since the release of xPortal

[AugustinKimi]

Yes.. Sadly, the issue is still not resolved and it would take a lot of time to rebuilt all of our tools with another package.

[radumojic]

The latest release ( @multiversx/sdk-dapp@2.10.17 ) should address some connection and stability issues on WalletConnect, we also updated the @walletconnect libraries to their latest versions.

As the @walletconnect project is constantly improving, we will try to keep up with the latest releases that improve the speed and the websocket connection liveness.

Also, xPortal received some significant updates recently on both iOS and Android that should further improve the connection stability and fix some previous issues.

Can you try out the latest versions and see if they fix the issues ?

[damienen]

Wow! Just upgraded two of my dApps to 2.10.17 and xPortal login is way smoother.

Thank you!

On Thu, Apr 6, 2023, 2:09 PM Radu Mojic @.***> wrote:

The latest release ( @@.*** ) should address some connection and stability issues on WalletConnect, we also updated the @WalletConnect https://github.com/WalletConnect libraries to their latest versions.

As the @walletconnect project is constantly improving, we will try to keep up with the latest releases that improve the speed and the websocket connection liveness.

Also, xPortal received some significant updates recently on both iOS and Android that should further improve the connection stability and fix some previous issues.

Can you try out the latest versions and see if they fix the issues ?

— Reply to this email directly, view it on GitHub https://github.com/multiversx/mx-sdk-dapp/issues/688#issuecomment-1498893746, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKV4Z5XOCZHA2DGHG4OGX5DW72P6BANCNFSM6AAAAAAVRB2PJ4 . You are receiving this because you commented.Message ID: @.***>

[schimih]

Hey @AugustinKimi

Did you have time to check if they fixed the issues?

:pray:

[CiprianDraghici]

Closed due to inactivity