cardano-connect

    1.3.2 • Public • Published

    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

    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);

    Install

    npm i cardano-connect

    DownloadsWeekly Downloads

    111

    Version

    1.3.2

    License

    GPL-3.0

    Unpacked Size

    2.11 MB

    Total Files

    11

    Last publish

    Collaborators

    • osc707