add CDN/prebuilt version for angular

[imaksp]

current import (import WalletConnectProvider from "@walletconnect/web3-provider") depends on Node/Commonjs modules like crypto which is not available in browser & angular cli don't support it, so please add prebuilt CDN version, it is very difficult to integrate with default angular setup with official cli. Here are the errors shown in angular:

ERROR in ./node_modules/@pedrouid/iso-crypto/dist/cjs/helpers/env/node.js Module not found: Error: Can't resolve 'crypto' in '/Users/aks/work/projects/akemona-frontend/node_modules/@pedrouid/iso-crypto/dist/cjs/helpers/env'

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js Module not found: Error: Can't resolve 'http' in '/Users/aks/work/projects/akemona-frontend/node_modules/xhr2-cookies/dist'

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js Module not found: Error: Can't resolve 'https' in '/Users/aks/work/projects/akemona-frontend/node_modules/xhr2-cookies/dist'

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js Module not found: Error: Can't resolve 'os' in '/Users/aks/work/projects/akemona-frontend/node_modules/xhr2-cookies/dist'

ERROR in ./node_modules/cipher-base/index.js Module not found: Error: Can't resolve 'stream' in '/Users/aks/work/projects/akemona-frontend/node_modules/cipher-base'

ERROR in ./node_modules/keccak/lib/api/keccak.js Module not found: Error: Can't resolve 'stream' in '/Users/aks/work/projects/akemona-frontend/node_modules/keccak/lib/api'

ERROR in ./node_modules/keccak/lib/api/shake.js Module not found: Error: Can't resolve 'stream' in '/Users/aks/work/projects/akemona-frontend/node_modules/keccak/lib/api'

& Here is the warning:

WARNING in /Users/../../projects/../src/app/../web3.service.ts depends on '@walletconnect/web3-provider'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[REPTILEHAUS]

+1 for this

[pedrouid]

hey @aksdevac @REPTILEHAUS... it's true that we document this but it's common practice to distribute both CJS and UMD bundles

All WalletConnect packages can fetched as UMD bundles from unpkg.com

Alternatively you can download the latest minified fields from our releases pages:

https://github.com/walletconnect/walletconnect-monorepo/releases

[REPTILEHAUS]

@pedrouid Im trying to use the CDN versions in this way:

included into angular apps index.html file

  <script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/lib/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/lib/index.min.js"></script>  
  <script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/umd/index.min.js"></script>    

in my service then

declare var WalletConnectProvider: any
declare var WalletConnect: any 

and using it in a function like so:

        const provider = new WalletConnectProvider.default({
            infuraId: "xxxxxx",
        });

        await provider.enable();
        
        if (provider.connected) {
            console.log('wallet connect address', provider.accounts[0]);
        }
        
        const web3 = new ethers.providers.Web3Provider(provider);
        console.log('web3', web3);

When I run it the first time I get the modal. If I refresh the page I would expect provider.connected to return true because I can see the cookie saved in local storage but it does not, it hangs on the await provider.enable(); is there any example implementations of using WalletConnect in an Angular app, Ive tried a couple of things but have had no success.

[leeduckgo]

Sorry……I am confusing that how can I use "the latest minified fields" in my React Project. "yarn add" is not working?

[imaksp]

@leeduckgo for React you can directly add using yarn or npm as per this documentation: https://docs.walletconnect.org/quick-start/dapps/web3-provider

[joharzmn]

Is there any update on how to use WalletConnect with angular?

[imaksp]

@joharzmn Hi, you can download web3 provider min js from here & use it directly by importing it in your index.html https://github.com/WalletConnect/walletconnect-monorepo/releases/tag/1.7.7

[leeduckgo]

@leeduckgo for React you can directly add using yarn or npm as per this documentation: https://docs.walletconnect.org/quick-start/dapps/web3-provider

thanks!

[joharzmn]

@aksdevac I want to use QRCode can I use that as well by download js files?

[imaksp]

@aksdevac I want to use QRCode can I use that as well by download js files?

Yes

[joharzmn]

@aksdevac It worked but I had to add WalletConnect.default instead of just using WalletConnect when using cdn.

[joharzmn]

@aksdevac cdn is working fine. But there is one problem I am facing on mobile. When we call SignPersonalMessage function it's redirecting to the AppStore instead of MetaMask app. Do you know what can be wrong ?