Cardano DApp Wallet Connector

Overview

Cardano DApp Wallet Connector

This project was bootstrapped with Create React App.

React JS demo

In the project directory, you can run: npm start run

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

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

This boilerplate code was written in javascript and React Js, so caters to the devs who already use this framework. Thee boilerplate should allow anyone to read it and

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-serializatioon-lib to build transactions in the javascript front-end, then sign them and send the transactrons with the user's wallet
  • you can clone the git repo and then npm install and npm start run to start a local session

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.

Live Demo

A demo of the DApp is running here: https://dynamicstrategies.io/wconnector

Useful Links

These links serve as example of how to use the cardano-serialization-lib and where you can find code snippets

Implements the CIP30: https://cips.cardano.org/cips/cip30/

Uses the cardano-serialization-lib:

Link1: https://docs.cardano.org/cardano-components/cardano-serialization-lib

Link2: https://github.com/Emurgo/cardano-serialization-lib

NFT implementation: https://github.com/MartifyLabs/martify.frontend

Nami implementation: https://github.com/Berry-Pool/nami-wallet

Wallet interface: https://github.com/HarmonicPool/cardano-wallet-interface

Comments
  • Does not work as is

    Does not work as is

    Hello,

    When I clone the repo, change directory into it, and npm install && npm start I get the following error. It does not seem to work as is, do I need to update any files?

    FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 1: 00007FF69B3B7B7F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+114079 2: 00007FF69B344546 DSA_meth_get_flags+65542 3: 00007FF69B3453FD node::OnFatalError+301 4: 00007FF69BC7B29E v8::Isolate::ReportExternalAllocationLimitReached+94 5: 00007FF69BC6587D v8::SharedArrayBuffer::Externalize+781 6: 00007FF69BB08C4C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468 7: 00007FF69BB05D64 v8::internal::Heap::CollectGarbage+4244 8: 00007FF69BB036E0 v8::internal::Heap::AllocateExternalBackingStore+2000 9: 00007FF69BB28266 v8::internal::Factory::NewFillerObject+214 10: 00007FF69B85A735 v8::internal::DateCache::Weekday+1797 11: 00007FF69BD08F91 v8::internal::SetupIsolateDelegate::SetupHeap+494417 12: 0000021900C1F2A0

    opened by marcoarroyo41 6
  • Mint with multi-admin Policy ID

    Mint with multi-admin Policy ID

    Hi, I have policy id that can mint from multiple admins. can you give a way around we can sign mint NFT transaction from admin and user account simultaneously from react side.

    opened by hussamBim 4
  • start script not working as is

    start script not working as is

    The start script fails with the following error trace of node's GC.

    I was only able to run it via react-scripts --max_old_space_size=8186 start.

    Is this something to be mentioned in a troubleshooting section? I find this repo so useful for newcomers like me.

    opened by ggcaponetto 2
  • Send ADA give error some times.

    Send ADA give error some times.

    HI, I get this issue frequently when i send ADA to some address. Uncaught (in promise) Not enough ADA leftover to include non-ADA assets in a change address

    opened by hussamBim 2
  • Update hard-coded cost model vals

    Update hard-coded cost model vals

    Redeeming from script address wasn't working with previous cost model values, causing a PPViewHashesDontMatch error. As per plutus vasil cost models: https://cardanoupdates.com/commits/c06e3573f9f3bb26a27dfe2340defc46fa4a90a4

    opened by splitpierre 1
  • Error deserializing multiple UTXOs

    Error deserializing multiple UTXOs

    When deserializing multiple UTXOs from the same wallet, in some point of the rawUtxos the process crash with this error. When doing the same process to deserialize the same UTXO but not on a loop, it works fine. Anyone maybe knows what could it be?

    This is the typescript code that we use to deserialize, and the error is on the picture above

    getUtxos= async () => {
        let Utxos = [];
        try {
            const rawUtxos = await this.API.getUtxos();
            for (const rawUtxo of rawUtxos) {
                const utxo = TransactionUnspentOutput.from_bytes(Buffer.from(rawUtxo, "hex"));
                const input = utxo.input();
                const txid = Buffer.from(input.transaction_id().to_bytes(), "utf8").toString("hex");
                const txindx = input.index();
                const output = utxo.output();
                const amount = output.amount().coin().to_str(); // ADA amount in lovelace
                const multiasset = output.amount().multiasset();
                let multiAssetStr = "";
    
    
                if (multiasset) {
                    const keys = multiasset.keys() // policy Ids of thee multiasset
                    const N = keys.len();
                    // console.log(`${N} Multiassets in the UTXO`)
    
    
                    for (let i = 0; i < N; i++){
                        const policyId = keys.get(i);
                        const policyIdHex = Buffer.from(policyId.to_bytes(), "utf8").toString("hex");
                        // console.log(`policyId: ${policyIdHex}`)
                        const assets = multiasset.get(policyId) as Assets
                        const assetNames = assets.keys();
                        const K = assetNames.len()
                        // console.log(`${K} Assets in the Multiasset`)
    
                        for (let j = 0; j < K; j++) {
                            const assetName = assetNames.get(j);
                            const assetNameString = Buffer.from(assetName.name(),"utf8").toString();
                            const assetNameHex = Buffer.from(assetName.name(),"utf8").toString("hex")
                            const multiassetAmt = multiasset.get_asset(policyId, assetName)
                            multiAssetStr += `+ ${multiassetAmt.to_str()} + ${policyIdHex}.${assetNameHex} (${assetNameString})`
                            // console.log(assetNameString)
                            // console.log(`Asset Name: ${assetNameHex}`)
                        }
                    }
                }
                const obj = {
                    txid: txid,
                    txindx: txindx,
                    amount: amount,
                    str: `${txid} #${txindx} = ${amount}`,
                    multiAssetStr: multiAssetStr,
                    TransactionUnspentOutput: utxo
                }
                Utxos.push(obj);
                // console.log(`utxo: ${str}`)
            }
            this.state.Utxos = Utxos
            //this.setState({Utxos})
            console.log(Utxos)
        } catch (err) {
            console.log(err)
        }
      }
    

    eqjJV

    opened by AlejandroPajon 0
  • Built transaction introduced new recieveing address

    Built transaction introduced new recieveing address

    this transaction occured https://cardanoscan.io/transaction/7b0b2df3eb915acddf3cba3cf47b564fce6e929dbc9e02b5766006d0b0e7051e

    wanted to send 3 ada to addr1qyf9u2cfxhlkhyxywc0kf05zzkgcjv8vvdpr0q6qz3437yk2awc00p8qns6lmmxnw3zrresd34vafvj2yasa7xyr7cqsqh3dev Didn't double check, acctidentally signed and i've sent more than 2000 ada and 200+ wmt tokens to a flint wallet i connected earlier, the 3 ada was send where it was supposed to go (more info on transaction link)

    How to recreate: I tinkered around with flint and eternl wallets, was using your boilerplate and switching between the wallets, switched to eternl wallet, sent ada...

    opened by filip-strelec 2
  • Module parse failed: Unexpected token (106:33) You may need an appropriate loader to handle this file type.

    Module parse failed: Unexpected token (106:33) You may need an appropriate loader to handle this file type.

    Hey, Someone please help me to solve this error.
    After running NPM the server is startig and I'm getting error like this in both VS code and in my browser.

    Screenshot (597)

    opened by ram3398 0
  • How to calculate redeemer index when have a lot input

    How to calculate redeemer index when have a lot input

    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()),
          ),
        );
    
    opened by nmaddp1995 1
Owner
null
Tool to sign data with a Cardano-Secret-Key // verify data with a Cardano-Public-Key // generate CIP-8 & CIP-36 data

Tool to sign data with a Cardano-Secret-Key // verify data with a Cardano-Public-Key // generate CIP-8 & CIP-36 data

Martin Lang 11 Dec 21, 2022
A wallet connector for the Cosmos ⚛️

cosmos-kit A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem. Getting Started @cosmos-kit/react A wallet adapter f

Cosmology 81 Dec 20, 2022
Elven Tools Dapp - Elrond blockckchain frontend dapp demo. Primarily for NFT minting, but it can be used for other purposes.

Elven Tools Dapp Docs: elven.tools/docs/landing-page.html Demo: dapp-demo.elven.tools Sneak peek: youtu.be/ATSxD3mD4dc The Dapp is built using Nextjs

Elven Tools 24 Jan 1, 2023
StarkNet wallet <-> dApp bridge

get-starknet StarkNet wallet <-> dApp bridge Alpha version Goals Allow dApps to seamlessly connect to any wallet on StarkNet Allow wallets to seamless

null 44 Dec 21, 2022
A simple CLI Tools to Empty Crypto Wallet & Send to your other Wallet Address

A simple CLI tools to empty crypto wallet & send to your other wallet, Build with Nodejs using Ethers API Run Locally Clone the project git clone ht

Raihan Ramadhani 11 Dec 29, 2022
How to create an NFT on the Cardano blockchain using JavaScript

How to create an NFT on the Cardano blockchain using JavaScript Youtube Video: https://www.youtube.com/watch?v=OeOliguGn7Y Who is this guide for? For

Armada Alliance 117 Dec 31, 2022
Lucid is a library, which allows you to create Cardano transactions and off-chain code for your Plutus contracts in JavaScript and Node.js.

Lucid is a library, which allows you to create Cardano transactions and off-chain code for your Plutus contracts in JavaScript and Node.js.

Berry 243 Jan 8, 2023
A typescript wrapper package to use the cardano-cli

Coti cardano-cli A package to run cardano-cli commands from nodejs, if you hold a blockfrost API-KEY you could add while creating a cardano-cli instan

Coti 6 Aug 10, 2022
Nepkit Connector – Build Dashboards & Admin Tools in minutes

Nepkit Connector Use Nepkit Connector to connect Nepkit Dashboard Builder to the database on your server or local machine. Supported databases: Postgr

Nepkit 3 Jun 3, 2022
Socket IO Connector for Yjs (Inspired by y-websocket)

Welcome to y-socket.io ?? Socket IO Connector for Yjs (Inspired by y-websocket) Y-socket.io is a YJS document synchronization implementation over the

Iván Topp Sandoval 18 Dec 21, 2022
This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

Solana-NFT minting Dapp Create your own NFT's on Solana, and mint them from your custom front-end Dapp. Tools used Metaplex -> Metaplex is the NFT sta

Udit Sankhadasariya 12 Nov 2, 2022
Minimal Typescript / NextJS dApp template bootstrapped with wagmi Ethereum react hooks library.

Welcome to the NextJS wagmi starter template ?? Looking to get up and running with a Typescript / NextJS dApp as quickly as possible? You're in the ri

Seth 78 Jan 4, 2023
A Bed and Breakfast dApp run on Ethereum. Includes a token + schedule system (Solidity) and full front-end (React + ethers.js) built with Hardhat.

Hotel ETH - Watch Demo Video Hotel ETH A (fictional) Bed-and-Breakfast run on Ethereum Come Book a Room on Kovan or Rinkeby Networks View the Demo » C

Ryan Lambert 20 Aug 20, 2022
Modern, Flexible Starknet Dapp Template

cairopal • Modern, Flexible Starknet Dapp Template. Developing Clone the repository git clone [email protected]:a5f9t4/cairopal.git cd cairopal Install D

andreas 38 Sep 28, 2022
Complete Open Source Front End Candy Machine V2 Minter dAPP Built For The Frog Nation NFT Solana Project. Built With React, Candy Machine V2, Typescript

Complete Open Source Front End Candy Machine V2 Minter dAPP Built For The Frog Nation NFT Solana Project. Built With React, Candy Machine V2, Typescript

null 17 Sep 24, 2022
A MERN Stack dapp the utilizes three solidity contracts

A MERN Stack dapp the utilizes three solidity contracts. It verifies user ownership of third party NFTs, generates an image incorporating a third party NFT image pulled from IPFS, mints a new NFT for users that includes an on-chain message and metadata to Opensea standards.

Max Girteit 5 Jun 30, 2022
WebX DAO Voting - Membership Dapp for the community

WebX DAO Voting / Membership Dapp ?? This Dapp allow decisions to be made via voting amongst those who own non-fungible tokens (NFTs) from the DAO, wh

WebX DAO 6 Sep 28, 2022
🌱 Ethereum provider solution for Dapp&Wallets, 🏷 If you have good suggestions, please submit issues

English | 简体中文 | 日本 ETH Wallet Modal An Ethereum Provider Solution for Integrated Wallets and Dapps ⚠️ Notice If you need to reduce unnecessary import

Dan Xu 35 Dec 19, 2022
Tip Tweet is a hybrid dApp that provides a simple way to tip a tweet using Ethereum. Authors can claim their tips using their Twitter account. You only need the tweet URL to tip. 🚀 😎

Tip Tweet Table of Contents About Folder Structure Contract Deveopment Starting the App Usage Contributing About Tip Tweet is hybrid dApp that allows

Dias Junior 23 Nov 15, 2022