I would like to implement many connectors in a vanilla javascript website. I found https://github.com/Web3Modal/web3modal-vanilla-js-example but the look & feel is not very customizable (and I would need to change it completely). Therefore, I am trying to implement WalletConnect from scratch but all the examples I found were for React or Node.js. Thanks!
3 Answers
Yes - this is possible, but you need the full packaged suite of JS that it depends on. Unpkg makes this available, and you can use a Web3 wrapper so that it can be tidily manipulated in vanilla JS.
Try this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/3.0.0-rc.5/web3.min.js"></script> <script src="https://unpkg.com/@walletconnect/[email protected]/dist/umd/index.min.js"></script> //Make sure the above loads first (either stick it in the head, or manage your load sequence)... <script> //An infura ID, or custom ETH node is required for Ethereum, for Binance Smart Chain you can just use their public endpoint var provider = new WalletConnectProvider.default( { infuraId: "<<YOUR INFURA ID>>", rpc: {56: "https://bsc-dataseed.binance.org/"} }); //to set it to BSC, uncomment the following line //provider.chainId = 56; //present the Wallet Connect QR code provider.enable().then(function(res){ //get wallet addrs and then wrap this into the Web3 JS let web3 = new Web3(provider); //now do all the web3 stuff you want... //awesome web3 application goes here }); EDIT: I created some small helper files to deal with this, and to also include other wallets. You can find them here
In theory yes, because any TypeScript code is accessible from JavaScript. You can utilise the low level WalletConnect libraries, as it consists of several packages and skip the React part. But you still need to deal with library interfaces and such. In practice I would recommend learning TypeScript toolchain, as you would likely spend more time banging your head to a wall when workaround ecosystem issues instead of learning TypeScript. Then just compile down your code to reusable package like the rest of the ecosystem is doing.
In short, yes, but it requires some expertise.
For v1.0, the WalletConnect documentation has this to say:
Syntax shown below is Javascript ES6 which requires bundling and transpiling to run in web browsers. If unfamiliar we recommend setting up an environment using Webpack Starter or Create React App
ref: https://docs.walletconnect.com/1.0/quick-start/dapps/client
v2.0 (beta) has combined multiple libs into 1 module, so the number of references you need will be less, but I haven't tried converting it to "ESM" yet.
