@safe-stars/components/dist/embedded-wallet-fQimuo_q.cjs

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CtZaCMo8.cjs"),c=require("./if-defined-MmHKu2JE.cjs"),w=require("./index-7jbryE6-.cjs"),h=require("./ref-D1Ke0Dq9.cjs");require("./index--KmZMQQE.cjs");require("./index-BQl9E2h4.cjs");require("./index-BB9Vnkx8.cjs");require("./index-Cv2JIh3Y.cjs");require("./index-2v8aP99g.cjs");require("./index-CKpCHYPu.cjs");require("./index-tmdyqLVs.cjs");const b=t.i`
  div {
    width: 100%;
  }

  [data-ready='false'] {
    transform: scale(1.05);
  }

  @media (max-width: 430px) {
    [data-ready='false'] {
      transform: translateY(-50px);
    }
  }
`;var g=function(a,e,n,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(i=(s<3?o(i):s>3?o(e,n,i):o(e,n))||i);return s>3&&i&&Object.defineProperty(e,n,i),i};const p=600,f=360,x=64;exports.W3mApproveTransactionView=class extends t.i$1{constructor(){super(),this.bodyObserver=void 0,this.unsubscribe=[],this.iframe=document.getElementById("w3m-iframe"),this.ready=!1,this.unsubscribe.push(t.ModalController.subscribeKey("open",e=>{e||this.onHideIframe()}),t.ModalController.subscribeKey("shake",e=>{e?this.iframe.style.animation="w3m-shake 500ms var(--wui-ease-out-power-2)":this.iframe.style.animation="none"}))}disconnectedCallback(){var e;this.onHideIframe(),this.unsubscribe.forEach(n=>n()),(e=this.bodyObserver)==null||e.unobserve(window.document.body)}async firstUpdated(){var n;await this.syncTheme(),this.iframe.style.display="block";const e=(n=this==null?void 0:this.renderRoot)==null?void 0:n.querySelector("div");this.bodyObserver=new ResizeObserver(r=>{var o,l;const s=(o=r==null?void 0:r[0])==null?void 0:o.contentBoxSize,i=(l=s==null?void 0:s[0])==null?void 0:l.inlineSize;this.iframe.style.height=`${p}px`,e.style.height=`${p}px`,i&&i<=430?(this.iframe.style.width="100%",this.iframe.style.left="0px",this.iframe.style.bottom="0px",this.iframe.style.top="unset"):(this.iframe.style.width=`${f}px`,this.iframe.style.left=`calc(50% - ${f/2}px)`,this.iframe.style.top=`calc(50% - ${p/2}px + ${x/2}px)`,this.iframe.style.bottom="unset"),this.ready=!0,this.onShowIframe()}),this.bodyObserver.observe(window.document.body)}render(){return t.x`<div data-ready=${this.ready} id="w3m-frame-container"></div>`}onShowIframe(){const e=window.innerWidth<=430;this.iframe.style.animation=e?"w3m-iframe-zoom-in-mobile 200ms var(--wui-ease-out-power-2)":"w3m-iframe-zoom-in 200ms var(--wui-ease-out-power-2)"}onHideIframe(){this.iframe.style.display="none",this.iframe.style.animation="w3m-iframe-fade-out 200ms var(--wui-ease-out-power-2)"}async syncTheme(){const e=t.ConnectorController.getAuthConnector();if(e){const n=t.ThemeController.getSnapshot().themeMode,r=t.ThemeController.getSnapshot().themeVariables;await e.provider.syncTheme({themeVariables:r,w3mThemeVariables:t.getW3mThemeVariables(r,n)})}}};exports.W3mApproveTransactionView.styles=b;g([c.r()],exports.W3mApproveTransactionView.prototype,"ready",void 0);exports.W3mApproveTransactionView=g([c.customElement("w3m-approve-transaction-view")],exports.W3mApproveTransactionView);var v=function(a,e,n,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(i=(s<3?o(i):s>3?o(e,n,i):o(e,n))||i);return s>3&&i&&Object.defineProperty(e,n,i),i};exports.W3mUpgradeWalletView=class extends t.i$1{render(){return t.x`
      <wui-flex flexDirection="column" alignItems="center" gap="xl" padding="xl">
        <wui-text variant="paragraph-400" color="fg-100">Follow the instructions on</wui-text>
        <wui-chip
          icon="externalLink"
          variant="fill"
          href=${t.ConstantsUtil.SECURE_SITE_DASHBOARD}
          imageSrc=${t.ConstantsUtil.SECURE_SITE_FAVICON}
          data-testid="w3m-secure-website-button"
        >
        </wui-chip>
        <wui-text variant="small-400" color="fg-200">
          You will have to reconnect for security reasons
        </wui-text>
      </wui-flex>
    `}};exports.W3mUpgradeWalletView=v([c.customElement("w3m-upgrade-wallet-view")],exports.W3mUpgradeWalletView);const y=t.i`
  :host {
    position: relative;
    width: 100%;
    display: inline-block;
    color: var(--wui-color-fg-275);
  }

  .error {
    margin: var(--wui-spacing-xxs) var(--wui-spacing-m) var(--wui-spacing-0) var(--wui-spacing-m);
  }

  .base-name {
    position: absolute;
    right: 45px;
    top: 15px;
    text-align: right;
  }
`;var d=function(a,e,n,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(i=(s<3?o(i):s>3?o(e,n,i):o(e,n))||i);return s>3&&i&&Object.defineProperty(e,n,i),i};let m=class extends t.i$1{constructor(){super(...arguments),this.disabled=!1,this.loading=!1}render(){return t.x`
      <wui-input-text
        value=${c.o(this.value)}
        ?disabled=${this.disabled}
        .value=${this.value||""}
        data-testid="wui-ens-input"
        inputRightPadding="5xl"
      >
        ${this.baseNameTemplate()} ${this.errorTemplate()}${this.loadingTemplate()}
      </wui-input-text>
    `}baseNameTemplate(){return t.x`<wui-text variant="paragraph-400" color="fg-200" class="base-name">
      ${t.ConstantsUtil$1.WC_NAME_SUFFIX}
    </wui-text>`}loadingTemplate(){return this.loading?t.x`<wui-loading-spinner size="md" color="accent-100"></wui-loading-spinner>`:null}errorTemplate(){return this.errorMessage?t.x`<wui-text variant="tiny-500" color="error-100" class="error"
        >${this.errorMessage}</wui-text
      >`:null}};m.styles=[t.resetStyles,y];d([c.n()],m.prototype,"errorMessage",void 0);d([c.n({type:Boolean})],m.prototype,"disabled",void 0);d([c.n()],m.prototype,"value",void 0);d([c.n({type:Boolean})],m.prototype,"loading",void 0);m=d([c.customElement("wui-ens-input")],m);const C=t.i`
  wui-flex {
    width: 100%;
  }

  .suggestion {
    background: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xs);
  }

  .suggestion:hover {
    background-color: var(--wui-color-gray-glass-005);
    cursor: pointer;
  }

  .suggested-name {
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  form {
    width: 100%;
  }

  wui-icon-link {
    position: absolute;
    right: 20px;
    transform: translateY(11px);
  }
`;var u=function(a,e,n,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(i=(s<3?o(i):s>3?o(e,n,i):o(e,n))||i);return s>3&&i&&Object.defineProperty(e,n,i),i};exports.W3mRegisterAccountNameView=class extends t.i$1{constructor(){super(),this.formRef=h.e(),this.usubscribe=[],this.name="",this.error="",this.loading=t.EnsController.state.loading,this.suggestions=t.EnsController.state.suggestions,this.registered=!1,this.profileName=t.AccountController.state.profileName,this.onDebouncedNameInputChange=t.CoreHelperUtil.debounce(e=>{t.EnsController.validateName(e)?(this.error="",this.name=e,t.EnsController.getSuggestions(e),t.EnsController.isNameRegistered(e).then(n=>{this.registered=n})):e.length<4?this.error="Name must be at least 4 characters long":this.error="Can only contain letters, numbers and - characters"}),this.usubscribe.push(t.EnsController.subscribe(e=>{this.suggestions=e.suggestions,this.loading=e.loading}),t.AccountController.subscribeKey("profileName",e=>{this.profileName=e,e&&(this.error="You already own a name")}))}firstUpdated(){var e;(e=this.formRef.value)==null||e.addEventListener("keydown",this.onEnterKey.bind(this))}disconnectedCallback(){var e;super.disconnectedCallback(),this.usubscribe.forEach(n=>n()),(e=this.formRef.value)==null||e.removeEventListener("keydown",this.onEnterKey.bind(this))}render(){return t.x`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        gap="m"
        .padding=${["0","s","m","s"]}
      >
        <form ${h.n(this.formRef)} @submit=${this.onSubmitName.bind(this)}>
          <wui-ens-input
            @inputChange=${this.onNameInputChange.bind(this)}
            .errorMessage=${this.error}
            .value=${this.name}
          >
          </wui-ens-input>
          ${this.submitButtonTemplate()}
          <input type="submit" hidden />
        </form>
        ${this.templateSuggestions()}
      </wui-flex>
    `}submitButtonTemplate(){return this.isAllowedToSubmit()?t.x`
          <wui-icon-link
            size="sm"
            icon="chevronRight"
            iconcolor="accent-100"
            @click=${this.onSubmitName.bind(this)}
          >
          </wui-icon-link>
        `:null}onSelectSuggestion(e){return()=>{this.name=e,this.registered=!1,this.requestUpdate()}}onNameInputChange(e){this.onDebouncedNameInputChange(e.detail)}nameSuggestionTagTemplate(){return this.loading?t.x`<wui-loading-spinner size="lg" color="fg-100"></wui-loading-spinner>`:this.registered?t.x`<wui-tag variant="shade" size="lg">Registered</wui-tag>`:t.x`<wui-tag variant="success" size="lg">Available</wui-tag>`}templateSuggestions(){if(!this.name||this.name.length<4||this.error)return null;const e=this.registered?this.suggestions.filter(n=>n.name!==this.name):[];return t.x`<wui-flex flexDirection="column" gap="xxs" alignItems="center">
      <wui-flex
        data-testid="account-name-suggestion"
        .padding=${["m","m","m","m"]}
        justifyContent="space-between"
        class="suggestion"
        @click=${this.onSubmitName.bind(this)}
      >
        <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
          ${this.name}</wui-text
        >${this.nameSuggestionTagTemplate()}
      </wui-flex>
      ${e.map(n=>this.availableNameTemplate(n.name))}
    </wui-flex>`}availableNameTemplate(e){return t.x` <wui-flex
      data-testid="account-name-suggestion"
      .padding=${["m","m","m","m"]}
      justifyContent="space-between"
      class="suggestion"
      @click=${this.onSelectSuggestion(e)}
    >
      <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
        ${e}
      </wui-text>
      <wui-tag variant="success" size="lg">Available</wui-tag>
    </wui-flex>`}isAllowedToSubmit(){return!this.loading&&!this.registered&&!this.error&&!this.profileName&&t.EnsController.validateName(this.name)}async onSubmitName(){var n,r,s;const e=t.ChainController.state.activeChain;try{if(!this.isAllowedToSubmit())return;const i=`${this.name}${t.ConstantsUtil$1.WC_NAME_SUFFIX}`;t.EventsController.sendEvent({type:"track",event:"REGISTER_NAME_INITIATED",properties:{isSmartAccount:((n=t.AccountController.state.preferredAccountTypes)==null?void 0:n[e])===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,ensName:i}}),await t.EnsController.registerName(i),t.EventsController.sendEvent({type:"track",event:"REGISTER_NAME_SUCCESS",properties:{isSmartAccount:((r=t.AccountController.state.preferredAccountTypes)==null?void 0:r[e])===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,ensName:i}})}catch(i){t.SnackController.showError(i.message),t.EventsController.sendEvent({type:"track",event:"REGISTER_NAME_ERROR",properties:{isSmartAccount:((s=t.AccountController.state.preferredAccountTypes)==null?void 0:s[e])===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,ensName:`${this.name}${t.ConstantsUtil$1.WC_NAME_SUFFIX}`,error:(i==null?void 0:i.message)||"Unknown error"}})}}onEnterKey(e){e.key==="Enter"&&this.isAllowedToSubmit()&&this.onSubmitName()}};exports.W3mRegisterAccountNameView.styles=C;u([c.n()],exports.W3mRegisterAccountNameView.prototype,"errorMessage",void 0);u([c.r()],exports.W3mRegisterAccountNameView.prototype,"name",void 0);u([c.r()],exports.W3mRegisterAccountNameView.prototype,"error",void 0);u([c.r()],exports.W3mRegisterAccountNameView.prototype,"loading",void 0);u([c.r()],exports.W3mRegisterAccountNameView.prototype,"suggestions",void 0);u([c.r()],exports.W3mRegisterAccountNameView.prototype,"registered",void 0);u([c.r()],exports.W3mRegisterAccountNameView.prototype,"profileName",void 0);exports.W3mRegisterAccountNameView=u([c.customElement("w3m-register-account-name-view")],exports.W3mRegisterAccountNameView);const A=t.i`
  .continue-button-container {
    width: 100%;
  }
`;var R=function(a,e,n,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(i=(s<3?o(i):s>3?o(e,n,i):o(e,n))||i);return s>3&&i&&Object.defineProperty(e,n,i),i};exports.W3mRegisterAccountNameSuccess=class extends t.i$1{render(){return t.x`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        gap="xxl"
        .padding=${["0","0","l","0"]}
      >
        ${this.onboardingTemplate()} ${this.buttonsTemplate()}
        <wui-link
          @click=${()=>{t.CoreHelperUtil.openHref(w.NavigationUtil.URLS.FAQ,"_blank")}}
        >
          Learn more
          <wui-icon color="inherit" slot="iconRight" name="externalLink"></wui-icon>
        </wui-link>
      </wui-flex>
    `}onboardingTemplate(){return t.x` <wui-flex
      flexDirection="column"
      gap="xxl"
      alignItems="center"
      .padding=${["0","xxl","0","xxl"]}
    >
      <wui-flex gap="s" alignItems="center" justifyContent="center">
        <wui-icon-box
          size="xl"
          iconcolor="success-100"
          backgroundcolor="success-100"
          icon="checkmark"
          background="opaque"
        ></wui-icon-box>
      </wui-flex>
      <wui-flex flexDirection="column" alignItems="center" gap="s">
        <wui-text align="center" variant="medium-600" color="fg-100">
          Account name chosen successfully
        </wui-text>
        <wui-text align="center" variant="paragraph-400" color="fg-100">
          You can now fund your account and trade crypto
        </wui-text>
      </wui-flex>
    </wui-flex>`}buttonsTemplate(){return t.x`<wui-flex
      .padding=${["0","2l","0","2l"]}
      gap="s"
      class="continue-button-container"
    >
      <wui-button fullWidth size="lg" borderRadius="xs" @click=${this.redirectToAccount.bind(this)}
        >Let's Go!
      </wui-button>
    </wui-flex>`}redirectToAccount(){t.RouterController.replace("Account")}};exports.W3mRegisterAccountNameSuccess.styles=A;exports.W3mRegisterAccountNameSuccess=R([c.customElement("w3m-register-account-name-success-view")],exports.W3mRegisterAccountNameSuccess);
//# sourceMappingURL=embedded-wallet-fQimuo_q.cjs.map