Build With Canton dApp SDK & CIP-103 | CF Developer Series

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

1. 0:07

   Hey everybody, Jindasite, devil manager at Canton Foundation and in this particular demo we will be talking and seeing how to implement DAP SDK in a sample Canton wallet and run a local Canton node and then use the wallet gateway to connect through that node and sign and loop in in a demo of the whole thing. And in this particular demo, I'll be walking through a code that already shows the integration of DAP SDK and then we will see a live version of it

2. 0:37

   where it opens wallet gateway, signs using a local node network and then shows you the party ID and whatnot. So you know what? Let's get started. But before we go to the code or talk about the implementation, we have to talk about the general architecture after CIP 103 how it works on top of Canton. So as you would see in the architecture here, we generally have this new way of interacting with wallets

3. 1:14

   or interacting with a Canton validator connecting to your DAP. and how would this work when you're working on a custody provider site or exchanges as well. So currently the architecture shows if you already have a DAB that implements TAP SDK it directly works with wallet gateway which you can directly interact with a canton validator and start signing off transactions and manage much more activities via that. So as you would see here you when you integrate DAB SDK in

4. 1:46

   your DAB it uses the SDK to call the DAB API and the users use the wallet gateway to manage the wallets or a pro and sign transaction using the user UI that is being shown on the wallet gateway which we will see in some time and then the wallet gateway is basically assigning and managing mechanism as you would see here that authenticates to the validator ledger API. and forward signing request and configured signing provider like you know fire blocks or block demon and whatnot. So this architecture is here

5. 2:19

   that explains the chemistry between this multiple components. We have more components in the future that we'll be talking about including our own version of uh Remokit which is responsible for giving you one connection all to all the wallets which is CIP 103 compliant but let's only talk about DAP SDK in this particular demo. So DAP SDK as simple as it is add canton network/DAP SDK to

6. 2:44

   install it. It's basically one SDK which allows you to not easily build a wallet integration in your existing Cam app but at the same time provides you much more easier access of all the applications that required you to do the heavy lifting. Instead, the DAP SDK does the heavy lifting, you know, including the discovery of all the available wallets, wallet picker UI that we talked about just now in the architecture, connecting, disconnecting, signing the transaction, account management, using the list accounts function that it has.

7. 3:17

   We'll talk about it in the next transaction execution, realtime events and whatnot. So, the installation is as easy as npm install at Canton network/tap SDK. We have yarn and pnpm available but I'm going to give you a quick snippet of how it looks like. So we have multiple snippets here but let's talk about one by one. So first we have SDK.connect which is responsible for connecting to your application to the connection function of a wallet and that

8. 3:47

   pops out the wallet gateway integration window in the first place. Right? Then you fetch the party ids and whatnot from the selected validator or the selected connection in a wallet gateway using the SDK.list functions. Then finally the man you have SDK.prepare and execute or prepare execute and wait the second term which basically executes a transaction on your behalf via the wallet gateway connected to a validator.

9. 4:19

   all that just by integrating DAP SDK into your DAP. So it does almost every single heavy lifting for you. So the DAP connectivity with a wallet infrastructure on canton cannot be more easier than this. So then you can use the query function here of SDK. Then there is a disconnect function here.

10. 4:40

    There are more nuances to understand when it comes to the architecture of DAP SDK. But instead of you know doing too much into this we will directly jump to the code and talk more about. So now we are back at the VS code where we'll be seeing how exactly to use the dab SDK in a react dab that you're working on on top of canton and how it will make your life more easier by doing most of the work for you. So as expected we are

11. 5:10

    importing the DAP SDK here and then we are importing the remote adapter which basically is responsible for connecting your DAB using the DAP SDK to a wallet gateway that exposes a DAB API endpoint. And here we are doing the same. We are just using the DAP API endpoint which is being uh currently hosted by the local node on the local spin-off of the G wallet gateway in one of the terminals which I'll show you in some time and I'm

12. 5:41

    just giving it away like this but coming all the way down to show you the main thing. So currently we are connecting to the Canton local which is the local image of Canton or a local net version of Canton that we are running in our server or in our system right now as you will see in the terminal right below and uh we have the gateway URL the tab endpoint which the gateway is currently broadcasting. So we are just keeping it all connected. Then as we have seen we

13. 6:14

    have SDK.list list accounts available here which is basically once you sign off on the Canton local on the wallet gateway UI that pops up you get connected you transfer and confirm it basically fetches the the party API and everything back but if it's not I have added a fall back here to do the same and then you can also get disconnected from it then you also have the submit transaction that we have seen using the SDKprepare transaction or prepare transaction

14. 6:45

    weight if you want to add a weight time here or a or a count which is submitting a sample dam transaction from your dab using the dab SDK's uh submit or execute transaction endpoint uh prepare execute endpoint and then you are basically just taking the result and uh you are using your SDK. manager API to query the final state of the contract once everything falls apart or falls back. You are just querying the whole

15. 7:15

    thing up to show to the people on how it all just stays together in the end after the whole thing went down. So this is a very small and yet nothing complex execution of adding tap SDK in a sample use canton wallet.ts TS TypeScript application that we have this whole thing that you would see in a sample wallet. I will upload it all on GitHub.

16. 7:40

    So you can fork and play around with it. I already have forked wallet gateway inside of it. And we have a canton image for local net here that we are running currently in our browser. And uh but yeah more on that later on. So now let's talk about what I'm running right now in terms of execution. So as you would see I have this first terminal open here which is running a Canton uh local image

17. 8:03

    or Canton local net version right. Then I am running a mock authentication to provide like a token. Then I have the main wallet gateway UI which is exposing a DAP API as we have expected in the doc as well here which we are currently redirecting our implementation to. And then finally our main React front end on this one. So what I'm going to do is just show you currently how this all

18. 8:35

    works. So we are currently in the React UI element. It is nothing fancy the simple plain UI that you will find on the internet or you can just wipe code if you want to using cloud. Uh I prefer it to just do like a simple react component and then polish it with the W coding so it does not you know like look too good. But yeah nothing fancy here.

19. 8:56

    Once you click on connect wallet, it pops open the wallet gateway a local wallet gateway as you would see. You click on the the login here of Canton local which is the local version and then it opens you to the wallet gateway where you already have selected the local net. You can add your validator if you're in a production environment. use your validator, get connected to the

20. 9:20

    validator, use one of the available wallets and then execute the whole thing in your DAB using DAP SDK. But on this one, we'll say connect. We are logged in. We come back here and we will wait for some time and uh it should show how it gets connected. So let's wait a little and awesome. So now we can see this and if we go back to the wallet gateway we can also see that now we can see the whole green dot saying that the wallet gateway is connected to your Candon

21. 9:54

    local net and you can see the parties here. You can add parties if you want to as a signing provider wallet kernel here right now. So this is a wallet gateway UI. On the other hand, we have the canton local connected your party ID can local allocated signing using the wallet kernel. As we have seen, we have used wallet kernel wallet gateway UI in the local environment to sign it. Send transaction, query contracts or

22. 10:18

    disconnect in a simple day. So again that was the demo and uh I would say this is the best way to use the DAP SDK and make sure that you make your life easier by building on top of Canton and just make it do the heavy lifting for your wallet infrastructure and uh yeah so thank you for seeing the demo and I'll be publishing the whole thing on GitHub and if you have any doubt you can

23. 10:43

    just feel free to come to forum.canon.network network and post your queries. I'll be there to help you out.