6

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 3

4

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

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.