This component provides a button and a list of browser based Cardano wallets. A wallet when clicked, will connect it with your site, return the name, icon, address and Cardano API object to interact with.
| Attribute | Type | Description |
|---|---|---|
text |
String |
Text used on the button, default is "Connect wallet" |
json |
String |
If true, then a new event is fired that provides a list of supported wallets |
| Event | Type | Description |
|---|---|---|
CardanoConnectWallet |
event |
fired when a user selects a wallet and the payload contains: - id: selected wallet id - 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 from: https://github.com/cardano-foundation/CIPs/tree/master/CIP-0030 -serializer: cardano-serialization-lib-browser obj |
CardanoConnectWalletError |
event |
when an enable event does not complete successfully: - code: error code - info: error info - name: selected wallet name - icon: selected wallet icon |
CardanoConnectWalletError |
event |
fired when no supported wallet is installed: - code: 404 - info: NO_SUPPORTED_WALLET_INSTALLED |
CardanoConnectWalletList |
event |
If json prop is set to "true" it will return a list of supported Cardano wallets that look like: {display: (string) Wallet display name, ex: Eternl id: (string) Wallet display name, ex: eternl (internal use only) installed: (boolean) if true, it was found as a property of the Cardano object in the browser icon: (string) base64 image string to show the wallet icon/logo } |
| Event | Type | Description |
|---|---|---|
CardanoConnectWalletSelected |
event |
if json prop is set to "true", will listen for the selected wallet will then fire CardanoConnectWallet event. |
| Property | Description |
|---|---|
--btn-bg-color |
modifies the background color of button |
--btn-hover-bg-color |
modifies the background color of button when hovered over |
--btn-hover-text-color |
modifies the text color of the button when hovered over https://github.com/Tastenkunst/ccvault-cip-0030-test/blob/main/src/dapp/components/initialApi.vue |
--btn-text-color |
modifies the text color of button |