@kcf/kda-wallet-walletconnect-connect-button

A ready-to-use WalletConnect connect wallet button.

Usage Notes

• As with all other @kcf/kda-wallet-* web components, the element is completely unstyled and not encapsulated in a shadow DOM to allow for easy customizability. The raw html is available in template.js
• Uses @web3modal/standalone to present the WalletConect QR code

Attributes

| name | description | required | default | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------- | | autoresume | when set, the component will save the current wallet connected session to localStorage and attempt to resume from it the next time the user enters the site | no | false | | autoresumekey | the localStorage key to use to save autoresume data | no | @kcf/kda-wallets-web-components-base.DEFAULT_AUTORESUME_LOCALSTORAGE_KEY | | network-id | the chainweb network ID | no | "mainnet01" | | wc-relay-url | WalletConnect Relay URL | no | "relay.walletconnect.com" | | wc-project-id | WalletConnect project ID | yes | - | | wc-project-name | WalletConnect project name | yes | - | | wc-project-description | WalletConnect project description | yes | - | | wc-project-url | WalletConnect project URL | yes | - | | wc-project-icon | WalletConnect project icon image URL | yes | - |

Custom Events

See @kcf/kda-wallet-web-components-base for custom events' detail schema

| name | dispatched after | | ------------------------ | -------------------------------------------- | | kdawallet:beginconnect | user clicks the button | | kdawallet:abandonconnect | user closes the web3modal without connecting | | kdawallet:connected | wallet connected | | kdawallet:disconnected | wallet disconnected | | kdawallet:error | error |

Example

<kda-wallet-walletconnect-connect-button
  autoresume
  network-id="testnet04"
  wc-project-id="67ce47db9e4c2585385be3581ee3cb9d"
  wc-project-name="Example Kadena Wallet Adapter App"
  wc-project-description="A simple webapp for testing kadena wallets"
  wc-project-url="http://localhost"
  wc-project-icon="https://altcoinsbox.com/wp-content/uploads/2023/01/kadena-logo-300x300.webp"
></kda-wallet-walletconnect-connect-button>

import { defineCustomElement } from "@kcf/kda-wallet-walletconnect-connect-button";

// must be called before use
defineCustomElement();

const btn = document.querySelector("kda-wallet-walletconnect-connect-button");
const wallet = btn.connectedWallet;
if (wallet) {
  console.log(wallet.accounts);
}