Cardano DApp Wallet Connector - demo app and example code

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:

Git Repo

Source code available at:

Printscreens:

Wallet info:

Sending ADA to another wallet:

Selection_004

Locking Tokens (NFTs) at a Script Address:
Selection_005

Redeeming Tokens from Script Address:
Selection_006

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

6 Likes