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