import { p as proxyCustomElement, H, h, f as forceUpdate } from './p-3b962989.js';
import { W as WalletConnectBase } from './p-a9480301.js';
import { d as defineCustomElement$3 } from './p-e9dd5f80.js';
import { d as defineCustomElement$2 } from './p-5419b643.js';

const WalletConnect$1 = /*@__PURE__*/ proxyCustomElement(class WalletConnect extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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 this; }
    static get watchers() { return {
        "data": ["onDataChange"]
    }; }
}, [1, "wallet-connect", {
        "data": [16],
        "qrCodeSvg": [32],
        "getEventBus": [64]
    }, undefined, {
        "data": ["onDataChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["wallet-connect", "generic-spinner", "wallet-connect-body"];
    components.forEach(tagName => { switch (tagName) {
        case "wallet-connect":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, WalletConnect$1);
            }
            break;
        case "generic-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "wallet-connect-body":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const WalletConnect = WalletConnect$1;
const defineCustomElement = defineCustomElement$1;

export { WalletConnect, defineCustomElement };

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