import { r as registerInstance, h, f as forceUpdate, a as getElement } from './index-fb899b9a.js';
import { W as WalletConnectBase } from './WalletConnectBase-f88ac289.js';
import './EventBus-56ba7d6d.js';

const WalletConnect = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.data = {
            wcURI: '',
        };
        this.qrCodeSvg = '';
    }
    componentWillLoad() {
        this.walletConnectBase = new WalletConnectBase(this.data);
    }
    async getEventBus() {
        return this.walletConnectBase.getEventBus();
    }
    async onDataChange(data) {
        if (data.wcURI) {
            this.qrCodeSvg = await this.walletConnectBase.generateSVG(data.wcURI);
        }
    }
    render() {
        return h("wallet-connect-body", { key: '4463e8a2720f42c2ad932f2280b2f53a24b51c2a', qrCodeSvg: this.qrCodeSvg, description: "Scan this QR using xPortal" });
    }
    removeComponent() {
        var _a;
        if ((_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.parentNode) {
            this.hostElement.parentNode.removeChild(this.hostElement);
        }
    }
    componentDidLoad() {
        this.walletConnectBase.subscribeEventBus({
            closeFn: () => this.removeComponent(),
            forceUpdateFn: () => {
                // this is needed for the UI to be reactive
                this.data = this.walletConnectBase.data;
                forceUpdate(this);
            },
        });
    }
    disconnectedCallback() {
        this.walletConnectBase.unsubscribeEventBus({
            closeFn: () => this.removeComponent(),
            forceUpdateFn: () => {
                // this is needed for the UI to be reactive
                this.data = this.walletConnectBase.data;
                forceUpdate(this);
            },
        });
    }
    get hostElement() { return getElement(this); }
    static get watchers() { return {
        "data": ["onDataChange"]
    }; }
};

export { WalletConnect as wallet_connect };

//# sourceMappingURL=wallet-connect.entry.js.map