<p>Here is an example using the cardano-serialization-lib and ReactJs. I had a lot of the same questions until I decided to work through an example eventually created a gitrepo</p>
<p>Cardano-serialization-lib is the way to go if you want to write focus on Plutus On Chain code (and do as little as possible, or none Plutus off chain code)</p>
<p><a href="https://github.com/dynamicstrategies/cardano-wallet-connector" rel="nofollow noreferrer">https://github.com/dynamicstrategies/cardano-wallet-connector</a></p>
<p>A working demo is here:</p>
<p><a href="https://dynamicstrategies.io/wconnector" rel="nofollow noreferrer">https://dynamicstrategies.io/wconnector</a></p>

CC BY-SA 4.0
2022-02-15T20:21:59.277Z
2022-02-15T20:21:59.277Z
D S
<p>The only way i have found is to do everything the PAB will do with Cardano Serialization Lib. You could do it with Cardano Cli etc... but UTXO model is not easy to implement in none of the above mentionated options. After all everything in the blockchain are just transactions... even smart contracts are just transaction with reedemers and datum and contracts in them. Any tool for generating transactions can in theory do the job. The only thing you need is a way to interact in a secure way with the user prvKeys, so that users  are in total control, only signing what the dApp asks to. This last option is already available with some light Wallets like Nami, CCVault... and i have read that even Yoroi.</p>

CC BY-SA 4.0
2022-02-15T13:06:33.760Z
2022-02-15T13:06:33.760Z
Alicia Basilio
<p>Typhon Wallet Dapp connector takes away extra load of fetching UTXOs, building a transaction in your front-end application.</p>
<p>You just need to specify to which address you want to send ada/tokens to and work of building a transaction and submitting will be done by typhon wallet.</p>
<p>Below is an example code snippet,</p>
<pre><code>const paymentTransactionResponse = await window.cardano.typhon.paymentTransaction({
  outputs: [
    {
      address:
        &quot;addr_test1qz7jw975stagnvs00wsjny6y6gpazn86yvwcm2vy02j3up7mt68vuzvz4nzgs00x0shrgywvy674v6r2zcs8fxvvq27qfjq8np&quot;,
      amount: &quot;6000000&quot;,
    },
  ],
});
</code></pre>
<p>More Examples, <a href="https://docs.typhonwallet.io/examples/paymentTransaction.html#sending-ada" rel="nofollow noreferrer">https://docs.typhonwallet.io/examples/paymentTransaction.html#sending-ada</a></p>

CC BY-SA 4.0
2022-03-16T07:22:56.583Z
2022-03-16T07:22:56.583Z
Mehul Prajapati
<p>Currently, many DApps construct unsigned transactions either directly from browser using <a href="https://github.com/Emurgo/cardano-serialization-lib" rel="nofollow noreferrer">Cardano-serialization-lib</a> (it can compile to WASM) or from backend server using Cardano-serialization-lib, cardano-cli, or PAB. Once the unsigned transaction is created, its CBOR is sent to wallet for signing. Finally, the signature/witness are inserted back to the transaction so it become a signed transaction, which could then be submitted to the blockchain network either by the wallet itself or by backend server.</p>
<p><a href="https://github.com/cffls/pycardano/tree/main/examples/full_stack" rel="nofollow noreferrer">Here</a> is a simple end-to-end working example that construct transactions using <a href="https://github.com/cffls/pycardano" rel="nofollow noreferrer">PyCardano</a> and have user to sign transactions with Nami wallet.</p>

CC BY-SA 4.0
2022-02-19T22:21:18.943Z
2022-02-19T22:21:18.943Z
Jerry
<p>The PAB's original main use case was to interact with Daedalus (see <a href="https://github.com/input-output-hk/plutus-apps/issues/249#issuecomment-1041364582" rel="nofollow noreferrer">here</a>). In this setup the PAB generates an unbalanced transaction that is passed to Daedalus for balancing and submission. The dApp infrastructure here would consist of (i) a frontend to accept user interaction, (ii) the PAB (including the chain index) for constructing the unbalanced transaction, and (iii) a Cardano node to which the PAB is connected. A list of the possible infrastructures can be found here: <a href="https://plutus-apps.readthedocs.io/en/latest/plutus/explanations/pab.html" rel="nofollow noreferrer">https://plutus-apps.readthedocs.io/en/latest/plutus/explanations/pab.html</a></p>
<p>With browser wallets the story is different. Browser wallets can't balance transactions as of early 2022. So, unfortunately, the current standard way to interact with them is to pass a balanced transaction to the browser wallet and have it sign it. To construct this balanced transaction there seem to be a multitude of ways currently deployed. Some use custom code that makes use of the available Cardano CLIs such as Cardano Wallet. A useful fork is apparently <a href="https://github.com/MELD-labs/cardano-wallet/commits/master" rel="nofollow noreferrer">MELD</a>.</p>
<p>I have written a high level, opinionated blog post on the current state of browser wallet integrations <a href="https://jeyeins.substack.com/p/we-need-better-wallets-on-cardano?utm_source=url" rel="nofollow noreferrer">here</a>.</p>

CC BY-SA 4.0
2022-02-19T12:34:12.613Z
2022-02-19T17:59:55.530Z
2022-02-19T17:59:55.530Z
Jey
<p>I'm trying to build a possible DApp infrastructure on Cardano in my head.</p>
<p>We should write the validation script in Haskell. Also as I understand, it is suggested to use Haskell for the off-chain code that will generate/spend UTXOs.</p>
<p>Okay.</p>
<p>We have as called &quot;endpoints&quot; - special Monads that can connect real wallets to the DApp.
I guess these &quot;endpoints&quot; could be brought into the DApp frontend somehow.
Yes?</p>
<p>But I still cannot understand how to connect these &quot;endpoints&quot; to the real users' wallets? So far we have examples with test wallets.</p>
<p>And is it feasible to build all necessary off-chain parts in Haskell or nobody really does it? If not, how it is supposed to be done? I mean to be connected to the real users' wallets, build and submit or spend UTXOs?</p>
<p>Probably the PAB aims to solve this, but it is not ready yet.
What is the real state of the art now for me as a developer?</p>
<p>These posts are relevant, but it looks like no solution today:</p>
<p><a href="https://cardano.stackexchange.com/questions/2115/how-does-dapp-front-end-integrate-with-user-wallets?rq=1">How does DApp front-end integrate with user wallets?</a></p>
<p><a href="https://cardano.stackexchange.com/questions/4423/how-to-connect-wallet-with-my-dapps-using-yoroi-dapp-connector?rq=1">How to connect wallet with my dapps using yoroi dapp connector.?</a></p>
<p><a href="https://cardano.stackexchange.com/questions/6617/how-does-a-cardano-dapp-client-authorize-a-payment?rq=1">How does a Cardano DApp client authorize a payment?</a></p>

<plutus-pioneer-program><wallet><decentralized-applications>
Possible DApp infrastructure on Cardano. Interaction with users' wallets
# Possible DApp infrastructure on Cardano. Interaction with users' wallets

(Asked by: username_0 on 2022-02-14)

I'm trying to build a possible DApp infrastructure on Cardano in my head.

We should write the validation script in Haskell. Also as I understand, it is suggested to use Haskell for the off-chain code that will generate/spend UTXOs.

Okay.

We have as called "endpoints" - special Monads that can connect real wallets to the DApp.
I guess these "endpoints" could be brought into the DApp frontend somehow.
Yes?

But I still cannot understand how to connect these "endpoints" to the real users' wallets? So far we have examples with test wallets.

And is it feasible to build all necessary off-chain parts in Haskell or nobody really does it? If not, how it is supposed to be done? I mean to be connected to the real users' wallets, build and submit or spend UTXOs?

Probably the PAB aims to solve this, but it is not ready yet.
What is the real state of the art now for me as a developer?

These posts are relevant, but it looks like no solution today:

[How does DApp front-end integrate with user wallets?](https://cardano.stackexchange.com/questions/2115/how-does-dapp-front-end-integrate-with-user-wallets?rq=1)

[How to connect wallet with my dapps using yoroi dapp connector.?](https://cardano.stackexchange.com/questions/4423/how-to-connect-wallet-with-my-dapps-using-yoroi-dapp-connector?rq=1)

[How does a Cardano DApp client authorize a payment?](https://cardano.stackexchange.com/questions/6617/how-does-a-cardano-dapp-client-authorize-a-payment?rq=1)

**Tags:** plutus-pioneer-program, wallet, decentralized-applications

---

## 5 answers

### Answer by username_1 on 2022-02-15. Score: 3

Here is an example using the cardano-serialization-lib and ReactJs. I had a lot of the same questions until I decided to work through an example eventually created a gitrepo

Cardano-serialization-lib is the way to go if you want to write focus on Plutus On Chain code (and do as little as possible, or none Plutus off chain code)

<https://github.com/dynamicstrategies/cardano-wallet-connector>

A working demo is here:

<https://dynamicstrategies.io/wconnector>


---

### Answer by username_2 on 2022-02-15. Score: 0

The only way i have found is to do everything the PAB will do with Cardano Serialization Lib. You could do it with Cardano Cli etc... but UTXO model is not easy to implement in none of the above mentionated options. After all everything in the blockchain are just transactions... even smart contracts are just transaction with reedemers and datum and contracts in them. Any tool for generating transactions can in theory do the job. The only thing you need is a way to interact in a secure way with the user prvKeys, so that users are in total control, only signing what the dApp asks to. This last option is already available with some light Wallets like Nami, CCVault... and i have read that even Yoroi.


---

### Answer by username_3 on 2022-03-16. Score: 0

Typhon Wallet Dapp connector takes away extra load of fetching UTXOs, building a transaction in your front-end application.
You just need to specify to which address you want to send ada/tokens to and work of building a transaction and submitting will be done by typhon wallet.
Below is an example code snippet,
const paymentTransactionResponse = await window.cardano.typhon.paymentTransaction({
  outputs: [
    {
      address:
        "addr_test1qz7jw975stagnvs00wsjny6y6gpazn86yvwcm2vy02j3up7mt68vuzvz4nzgs00x0shrgywvy674v6r2zcs8fxvvq27qfjq8np",
      amount: "6000000",
    },
  ],
});

More Examples, https://docs.typhonwallet.io/examples/paymentTransaction.html#sending-ada


---

### Answer by username_4 on 2022-02-19. Score: 0

Currently, many DApps construct unsigned transactions either directly from browser using [Cardano-serialization-lib](https://github.com/Emurgo/cardano-serialization-lib) (it can compile to WASM) or from backend server using Cardano-serialization-lib, cardano-cli, or PAB. Once the unsigned transaction is created, its CBOR is sent to wallet for signing. Finally, the signature/witness are inserted back to the transaction so it become a signed transaction, which could then be submitted to the blockchain network either by the wallet itself or by backend server.

[Here](https://github.com/cffls/pycardano/tree/main/examples/full_stack) is a simple end-to-end working example that construct transactions using [PyCardano](https://github.com/cffls/pycardano) and have user to sign transactions with Nami wallet.


---

### Answer by username_5 on 2022-02-19. Score: 0

The PAB's original main use case was to interact with Daedalus (see [here](https://github.com/input-output-hk/plutus-apps/issues/249#issuecomment-1041364582)). In this setup the PAB generates an unbalanced transaction that is passed to Daedalus for balancing and submission. The dApp infrastructure here would consist of (i) a frontend to accept user interaction, (ii) the PAB (including the chain index) for constructing the unbalanced transaction, and (iii) a Cardano node to which the PAB is connected. A list of the possible infrastructures can be found here: <https://plutus-apps.readthedocs.io/en/latest/plutus/explanations/pab.html>

With browser wallets the story is different. Browser wallets can't balance transactions as of early 2022. So, unfortunately, the current standard way to interact with them is to pass a balanced transaction to the browser wallet and have it sign it. To construct this balanced transaction there seem to be a multitude of ways currently deployed. Some use custom code that makes use of the available Cardano CLIs such as Cardano Wallet. A useful fork is apparently [MELD](https://github.com/MELD-labs/cardano-wallet/commits/master).

I have written a high level, opinionated blog post on the current state of browser wallet integrations [here](https://jeyeins.substack.com/p/we-need-better-wallets-on-cardano?utm_source=url).


---

