Cardano DApp Wallet Connector - demo app and example code

[dstratio]

Hi,

I want to share with you the boilerplate code for connecting DApps to the web wallet and interacting with the blockchain. The link to the git repo is below and a demo is available at this link:

What is this useful for:

You can use this code as a starting point for the following:

• you are building a DApp and want to connect to the user’s wallet (Nami, CCVault, or Flint)
• you want to read the balance, the UTXOs and the available tokens at the user’s wallet
• you want the user to interact with your DApp
• you want the user to send transactions to the Cardano blockchain using their wallet
• you want the user to lock ADA and Tokens at a Plutus Script
• you want the user to redeem ADA and Tokens that have been locked at the Plutus Script

Boilerplate code was written in javascript and ReactJs

How does it work:

• It uses the wallet connector standard CIP30 and the cardano-serialization-lib
• the CIP30 standard has been implemented by Nami, CCvault and Flint
• It uses the cardano-serialization-lib to build transactions with the javascript front-end
• Then it requests the user to sign the transaction using their wallet
• Then it send the transaction through the user’s wallet

To get a local environment running clone the git repo and then npm install and npm start run to start a local session. It will open an example app at http://localhost:3000/

What does it do:

• send ADA to an address
• send Tokens (NFTs) to an address
• lock ADA at a Plutus Script
• lock Tokens (NFTs) at a Plutus Script
• redeem ADA from a Plutus Script
• redeem Tokens (NFTs) from a Plutus Script

Things to keep in mind:

• The cardano-serialization-lib can be used to create transacations in the front end using javascript. It has the potential to simplify some of the plutus off chain code. As an example for the use case above only the On Chain Plutus smart contract was used while all of the Off Chain was done with the cardano-serialization-lib. This greatly reduced the amount of code that needs to be written in Haskell and avoid needing to interact with Plutus Application Backend
• The use cases use the “alwayssucceeds.plutus” Plutus Smart contract that always succeeds.
• The Plutus Script Address is derived from plutus script itself, so the contract has the same address for everyone: “addr_test1wpnlxv2xv9a9ucvnvzqakwepzl9ltx7jzgm53av2e9ncv4sysemm8”
• The cardano-serialization-lib is constantly being updated and the release from v9 to v10 has breaking changes.
• if the demo app fails to launch due to out of memory errors then try running this: export NODE_OPTIONS="--max-old-space-size=8192"
• It only runs on the desktop and in the same browser where you have either of the Namii, CCvault or Flint wallet installed

Live Demo

A demo of the DApp is running here:

Cardano DApp Wallet Connector - Demo

Git Repo

Source code available at:

GitHub - dynamicstrategies/cardano-wallet-connector: DApp wallet connector...

Printscreens:

Wallet info:

Sending ADA to another wallet:

Locking Tokens (NFTs) at a Script Address:

Redeeming Tokens from Script Address:

If anyone has time to dedicate to projects or has questions then post here or let me know. You can reach me on telegram Telegram: Contact @dstrategies

You can also support me by delegating to my stake pool: DSIO

Special thanks go out to the maintainers of the cardano-serialization-lib

All the best

[whihajste]

Thank you for these amazing examples.

I fell into a problem that stops me from redeeping ADA from the script. does anyone know a solution or anything I am missing?

I successfully send ADA to script, wait a bit so utxo on script shows ADA sent.
Following appears all the time after the successful signing of redeeming.

[dstratio]

Hi there,

Great that you like it
Yes, redeem assets from a script you need to have Collateral set in your wallet. All the wallets have an option to select the amount of collateral that you want to set, a sensible amount is 5 ADA
You don’t need collateral when sending assets to a script because you are sending the assets to a script address, not running the script at that point yet

Here is a short explanation from sundaeswap what Collateral is and why it is needed:
https://help.sundaeswap.finance/en/articles/5852169-what-is-collateral-and-how-do-i-set-it#:~:text=In%20Cardano%2C%20collateral%20is%20a,withdraw%20it%20at%20any%20time.

All the best

[whihajste]

Awesome! That helped!

Unfortunately, I fell into another trap, does that say anything to you?

[dstratio]

Try:

• increasing the Fee

• make sure the previous transaction that you sent to the script has been recorded on the blockchain. You can check status of transactions by searching for them at https://testnet.cardanoscan.io/

• check that the transaction index is correct

• make sure you are not redeeming more than what you put there

• the Datum is the same as what you uses to lock the asset

All the best

[dstratio]

Hi @whihajste

We found that post the Vasil hard fork there will be a new cost model that determines how much it costs to execute different types of scripts. It is likely that you were getting errors due to this …

We have now updated the Cost Model in our repo and on our demo website. You can try again now !

All the best

[whihajste]

@dstratio Whatever I do I am getting error as attached. Is it possible to debug what is going on?

[nmaddp1995]

@dstratio Hi. in case I pass many input (utxo of buyer, utxo put onsale) How can I get redeemer index to pass in

const redeemer = CardanoWasm.Redeemer.new(
      CardanoWasm.RedeemerTag.new_spend(),
      // CardanoWasm.BigNum.zero(),
      CardanoWasm.BigNum.from_str('0'),
      redeemerData,
      CardanoWasm.ExUnits.new(
        CardanoWasm.BigNum.from_str(BUY_CARDANO_MEM.toString()),
        CardanoWasm.BigNum.from_str(BUY_CARDANO_CPU.toString()),
      ),
    );

[alex-2045]

Hi @dstratio, thank you so much for this example. It’s a huge help.

I’ve got a bit of a newbie question. I dont develop using react at all. I’m deploying my web app using flask on the back end and HTML/CSS/JS on the front end. How can i implement this same functionality you use here without react?

Thanks again,
Alex

[dstratio]

Hi Alex,

Thanks!

You need a library that can connect to the web-wallets in the browser. The web wallet expose their API as described in:
https://cips.cardano.org/cips/cip30/

I suspect you could access the API by accessing in the browser “window.cardano.nami” or similar

I know of a python library for cardano that might be heelpfuk, but I have not used it myself:
https://pypi.org/project/cardano-tools/

All the best

[rekill]

Hi, I see that this is developed using NodeJS, I want to achieve the same functionality in Vanilla Javascript.