cardano-connect

Cardano Connect web component

This component provides a button, a list of browser based Cardano wallets. When the user selects a wallet, it will attempt to connect via the browser plugin. If successful it will emit an event CardanoConnectWallet or in the case of an error CardanoConnectWalletError.

Make a donation addr1qyv48l03e9gap3vxxvuc60l8d4hpgx7cf86p3tmjte70sc75dl8x2jk2urg38kkrpcmlkdn020cjqckma0t8favg62mqnjlu30

Supported Cardano wallets

• Eternl
• Flint
• GeroWallet
• Nami
• Yoroi

Component API

Component documentation

How to use

Include the script

<script src="dist/cardano-connect.js"></script>

Override CSS (optional)

<style>
  cardano-connect {
    --btn-bg-color: purple;
    --btn-text-color: white;
    --btn-hover-bg-color: #995799;
    --btn-hover-text-color: white;
  }
</style>

Embed component

<cardano-connect text="Connect wallet"></cardano-connect>

text attribute is optional, the default value is Connect wallet

How does it work?

When a user clicks the button a dropdown list of Cardano browser based wallets is displayed. The user selects one, then they are prompted by the wallet's browser plugin to sign and connect. Once connected, the element will emit an event CardanoConnectWallet which contains the following:

• address: selected wallet address
• name: selected wallet name
• icon: selected wallet icon
• api: Cardano API object with following properties:
  • getNetworkId
  • getBalance
  • getUtxos
  • getUsedAddresses
  • getUnusedAddresses
  • getRewardAddresses
  • getChangeAddress
  • signData
  • signTx
  • submitTx
• serializer: cardano-serialization-lib

If an error occurs the element will emit an event CardanoConnectWalletError which contains the following:

• code: error code
• info: error info
• name: selected wallet name
• icon: selected wallet icon

Read more: https://github.com/cardano-foundation/CIPs/tree/master/CIP-0030

Listen for success

document.getElementsByTagName('cardano-connect')[0].addEventListener(
  'CardanoConnectWallet',
  (evt) => {
    const { detail } = evt;
    console.log(detail);
  },
false);

Listen for error

document.getElementsByTagName('cardano-connect')[0].addEventListener(
  'CardanoConnectWalletError',
  (evt) => {
    const { detail } = evt;
    console.log(detail);
  },
false);