Integrate WalletConnect in a Canton dApp | Canton Network Tutorial

Captions as YouTube publishes them, usually machine-generated, so names such as Daml and Canton can be misheard.

1. 0:10

   Hey everybody, Jatin Desai, devil manager at Canton Foundation and Tanton just shipped the integration and compatibility for wallet connect and this opens the doors for millions of people who are using wallet connect and all the developers and builders in web3 native community who are using wallet connect as their go-to wallet infrastructure. But now with the access of one of the biggest institutional blockchains out there, Cand network. But as the deil, I'll tell you how to integrated in your code, walk you

2. 0:43

   through the whole code process, and show you the live demo. So I hope you're ready for the whole thing. So let's get started by checking out the official wallet connect documentation and see how it all works. So first of all before we get started I need to lay down some of the basic minimum information about canon network and how that could be fundamentally different than what you generally see on an EVM chain for example. So first of all is the difference of network and chain

3. 1:15

   information. So instead of a classic RPC or a chain ID, you have can something called as Canton namespace which is an operator defined side of it and tells you what network is it on. In our case, we will be running a local Canton opensource instance which is like Canton local network using the wallet gateway and get connected to wallet connect by providing our party ID which is the UTXOS version of our address.

4. 1:44

   So now one of the major things that we need to take care of is that the existingly wallet connect defines seven different methods to interact with the Canton network. Out of which you have five which are auto approve and two which are manual. So currently you have this auto approve which is like a metam mask snapshots if you have understood about it. So how instantly you fire away

5. 2:09

   we have that kind of mechanism in five of them and in other two you generally require like again metam mask like user prompts where you are signing a message or you are approving a transaction right so there are two of the manual ones so the current available um methods that we will be using in our code as well apart from that we have more information available in this documentation but and

6. 2:32

   you can definitely go over it because I will be pushing every single code and this whole thing on GitHub as a guide. But let's get to the VS code and see it in all action. Okay. So now you can see my VS code screen. So as you can see I already have set up a local project to demo it all using uh TypeScript and React project and I'll be pushing this whole thing on GitHub. So make sure you nothing to worry about. You can use this GitHub project to fork and play around

7. 3:03

   if you want. But currently we will demo the whole integration on this use canton wallet.ts typescript file. First we are importing the whole wallet connect sign client here. Then we are using the seven available methods use including the two manual ones and the auto approval ones as well. Right? All coming way down to the thing that matters. We are using the connect function to connect to a certain wallet. Right? Then we will be using this to connect with a wallet connect

8. 3:37

   project. So if you don't know how to declare a wallet connect project or get started with it, you can just start with let me show you uh you can go to dashboard.reion.com and then set up a wallet connect project. I already have set up a mock project like this. So this is my project ID. I you would need this project ID to be added under your VS code uh env here but you know what like this so I'm deleting the project afterwards

9. 4:14

   so even if you see this it's okay uh I'll deleting the project after the demo but uh yeah I mean then it's going to be using that file to connect to the wallet connect cloud server and the freebies in the back end right and then we have the URI and approval mechanism here. So basically it connects to a local version of Canton network or you could say local net running off and it connects to there and then the URI an approval mechanism first gets an approval and then

10. 4:44

    generates a URI and a and a QR code mechan which you can scan or use the URI directly in any of the Canton supported wallets to just get this whole thing. But this is a real wallet connect URI and a QR code that you can even verify later on. And then Canton primary account also fetches all the information from your primary account available and your primary party ID which is currently

11. 5:12

    fetched right and then it takes any other logs that comes in between and if everything falls out and you can just get disconnected into it. And as you can see, it's a pretty straightforward line of code and it's a pretty straightforward integration on this one.

12. 5:27

    On terminal, if we come, we have a few things that we can look at. So you can see we have multiple WSL sessions going on, including a bashin. Bashin is simply just running the front end for us at localhost 5173. So we can start by just using the localhost 5173 and just take it back to our browser.

13. 5:49

    come back here and let's see the front end in action. Awesome. So, as you can see, it's a pretty simple React page. I don't want to invest too much time into the designs of it. It's a straightforward React front front end, but all we need to do is just see it in action. So, currently we will just click on connect wallet here.

14. 6:14

    And now this is how you show a real URI and a real QR code. So now this is actually waiting for a wallet approval. So you can use this QR code here or you can use this actual wallet connect URI here to be added into an supported wallet or scan it or add it into a wallet connect supported URI section.

15. 6:35

    But this is how you would actually use wallet connects connection into a general captain TypeScript SDK. Plus we are already going to be connecting wallet gateway with this as well. So wallet gateway is like a client cl kind cl kind cl kind cl kind cl kind cl kind cl kind cl kind cl kind cl kind cl kind uh it's it's a kind of a client side version of a of a wallet uh wallet infrastructure. So then you can

16. 6:58

    integrate wallet gateway and wallet connect into a single interface and you can try to work around it. So all things are possible right now. I would also advise you to check out our DAP SDK. DAP SDK is the easiest way to work with any single wallet infrastructure in your DAB. So if you use DAP SDK, DAP SDK does all the heavy lifting for you. So wallet connect, browser extensions, every single thing, it all comes under a single hood and DAB SDK is the simplest

17. 7:31

    way to add it all together in your DAB easily for all the future integrations as well. So I would definitely advise you to give a check out of the DAB SDK and understand more about it using npm install canton network/tab SDK. But yeah this is basically how you can see how you'll generate uh a local project.

18. 7:53

    But awesome then this is how we get started with the whole wallet connect integration in a sample TypeScript project. Make sure that you have everything as taken care of. Avoid connecting backend project or using the reown dashboard. Then you understand how all the mechanisms work in the given seven methods and also understand on how to build on top of Canton using DAP SDK.

19. 8:19

    But that would be the end of our existing demos and looking forward to helping you more with the upcoming demo on DAP SDK as well.