decentraland / explorer-website

This is the repository for the website served in play.decentraland.org
https://play.decentraland.org
Apache License 2.0
7 stars 19 forks source link

feat(WC2): Connect with WC2 depending on the feature flag #390

Closed fzavalia closed 1 year ago

fzavalia commented 1 year ago

This PR add support to connect with Wallet Connect V2 by updating to the latest version of decentraland-connect.

customize-cra and react-app-rewired are required in order to support the new WC library.

Depending on the dapps-wallet-connect-v2 feature flag, WCv1 of WCv2 will be used to connect.

Logic to disconnect the user if connected with a different version of WC is included.

fzavalia commented 1 year ago

npm run build is failing with:

➜  explorer-website git:(feat/wc2-final) ✗ npm run build

> @dcl/explorer-website@0.1.0 build
> GENERATE_SOURCEMAP=true react-app-rewired build

Creating an optimized production build...
Failed to compile.

./node_modules/@walletconnect/relay-auth/dist/esm/utils.js
Attempted import error: 'concat' is not exported from 'uint8arrays/concat'.
github-actions[bot] commented 1 year ago

Test this pull request

This branch can be previewed at

fzavalia commented 1 year ago

@2fd @menduz I'd like your opinion on this.

When running npm start I've faced some issues with the library required to integrate WC2, @walletconnect/ethereum-provider, which is being installed by decentraland-connect

The issues were of the following sort:

Failed to compile.

./node_modules/decentraland-connect/node_modules/@walletconnect/ethereum-provider/dist/index.es.js 59:10
Module parse failed: Unexpected token (59:10)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       rpcMap: b
|     },
>     l = n?.filter(g => !u.includes(g)),
|     d = i?.filter(g => !p.includes(g));
|   if (!s && !c && !e && !(l != null && l.length) && !(d != null && d.length)) return {

Seems that the library was published in a way that is not compatible with the version of react-scripts.

These kind of issues are generally resolved by updating some webpack configuration, however, those are hidden from react-scripts unless the project is "ejected".

I've tried at first updating the react-scripts version, but it involved a huge effort that would require changes on the whole application just for supporting a single lib.

On the marketplace we are using a couple of libs to resolve a similar case, customize-cra and react-app-rewired. In this case, they allow us to configure the webpack config to transpile with babel the libraries that are causing the issues.

Do you know of an alternative or a reason to avoid the usage of these libs?

fzavalia commented 1 year ago

@2fd Removed app name from the feature selectors.