How does DApp front-end integrate with user wallets?

Question

I'm familiar with using the Plutus Playground and Plutus TraceEmulator library to configure the wallet actions for the endpoints of a smart contract. These simulators are great for testing the smart contract interactions.

I'd like to understand how a real-world DApp would integrate with user wallets. If the DApp front-end is a web-app running in the browser, would the app require users to set up something like a MetaMask plugin to link their wallets and give permission to the DApp to submit operations from their wallet? Is there another way to let user grant access to a wallet node? In general, how does the DApp front-end get access to user wallets and will the DApp front-end need to be deployed on the same machine as the wallet is running?

Answer 1

Good question, this is one that many people are curious about as the only real way to interact with the Cardano blockchain is through cardano-node, but obviously a dApp user visiting a website isn't going to run their own node to submit transactions and interact with smart contracts themselves.

In my view, Yoroi looks best positioned at the moment to become the MetaMask of Cardano but as always, look into things for yourself and determine the best solution for your particular use-case.

https://www.emurgo.io/blog/emurgo-launches-beta-version-of-yoroi-wallet-dapp-connector

As you can see dApp Browser integration is slated for sometime 2021, I think this is the direction you should look. Also worthy of looking into is the ATALA Prism which also seeks to provide DIDs (Digital Identities) on the cardano blockchain and I'm assuming will at some point try and provide some dApp connector solution for the browser.

Answer 2

I guess after 1 year, this deserves a more up-to date answer. There are two ways you can integrate with a browser wallet, you can take a server-based approach and a client-based one.

Server Constructed Transaction

The First way is to have a back-end that will create the transaction and send the CBOR result to the front-end so the wallet can sign it and send it back to be submitted.

This is what you would do with the PAB, for example, and it's what DJED is using in their testnet. The problem is that if a lot of users are requesting a transaction at the same time, it will overload your back-end.

Other than the PAB you can use basically any tool that supports creating a cardano transaction. For me, pycardano has been really useful since I am more familiar with Python than Haskell and the PAB is just not very well documented right now in my opinion. You can see an example here.

Client Constructed Transaction

The second way would be to do everything in the client-side. So you would build the transaction, sign and submit from the user browser. The drawback here is that the front-end application get's a little bit more heavy and there is not a great support for plutus and smart contracts with the current tools.

The most used tool right now is the cardano-serialization-lib and you can see an example of a transaction being fully built on the client side here.

As I said, it doesn't offer great support for plutus right now (if any) and you would need to use a custom module for doing most of the things (like in the example I mentioned). There are some other tools, though, that could be more useful depending on the case: cardano-multiplatform-lib from dcspark and lucid from alessandro are the ones that come to my mind.