import { h } from "@stencil/core";
import { MDCRipple } from "@material/ripple";
import { fetchEnsName, watchAccount, watchNetwork } from "@wagmi/core";
import state from "../../stores/wallet";
import truncateEthAddress from "../../utils/wallet";
export class NKConnectWalletButton {
  constructor() {
    this.ripple = null;
    this.isConnected = undefined;
    this.isWrongNetwork = undefined;
    this.address = undefined;
    this.ensName = undefined;
  }
  componentWillLoad() {
    const unwatchAccount = watchAccount(async (account) => {
      var _a;
      if (account.isConnected) {
        const chainId = await account.connector.getChainId();
        this.isConnected = true;
        this.address = account.address;
        this.isWrongNetwork = chainId !== ((_a = state.chain) === null || _a === void 0 ? void 0 : _a.id);
        this.ensName = await fetchEnsName({ address: account.address });
      }
      else {
        this.isConnected = false;
        this.isWrongNetwork = false;
        this.address = '';
        this.ensName = '';
      }
    });
    const unwatchNetwork = watchNetwork(async (network) => {
      var _a, _b;
      if (this.isConnected) {
        this.isWrongNetwork = ((_a = network.chain) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = state.chain) === null || _b === void 0 ? void 0 : _b.id);
      }
    });
    this.disconnect = () => {
      unwatchAccount();
      unwatchNetwork();
    };
  }
  disconnectedCallback() {
    this.disconnect();
  }
  componentDidLoad() {
    this.ripple = new MDCRipple(this.button);
  }
  render() {
    return (h("div", { part: "wallet-btn-container", class: "mdc-touch-target-wrapper" }, h("button", { part: "wallet-btn", onClick: () => state.modal.openModal({
        route: this.isWrongNetwork
          ? 'SelectNetwork'
          : this.isConnected
            ? 'Account'
            : 'ConnectWallet',
      }), ref: (el) => (this.button = el), class: "mdc-button mdc-button--raised" }, h("span", { class: "mdc-button__ripple" }), h("span", { class: "mdc-button__touch" }), h("span", { class: "mdc-button__label" }, this.isConnected ? (!this.isWrongNetwork ? (this.ensName ? (this.ensName) : (truncateEthAddress(this.address))) : ('Wrong Network')) : (h("slot", null))))));
  }
  static get is() { return "nk-connect-wallet-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["nk-connect-wallet-button.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["nk-connect-wallet-button.css"]
    };
  }
  static get states() {
    return {
      "isConnected": {},
      "isWrongNetwork": {},
      "address": {},
      "ensName": {}
    };
  }
}
//# sourceMappingURL=nk-connect-wallet-button.js.map
