@safe-stars/components/dist/socials-Bld38zMN.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 e=require("./index-CtZaCMo8.cjs"),s=require("./if-defined-MmHKu2JE.cjs"),f=require("./index-Dykd8oDe.cjs"),g=require("./index-DDoNK4iu.cjs");require("./index-CKpCHYPu.cjs");require("./index-qAKUCMGe.cjs");require("./index-2v8aP99g.cjs");require("./index-tmdyqLVs.cjs");require("./index-Ch6hp36E.cjs");require("./index-25Apucqb.cjs");const C=e.i`
  :host {
    margin-top: var(--wui-spacing-3xs);
  }
  wui-separator {
    margin: var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1) var(--wui-spacing-xs)
      calc(var(--wui-spacing-m) * -1);
    width: calc(100% + var(--wui-spacing-s) * 2);
  }
`;var d=function(l,i,t,r){var a=arguments.length,o=a<3?i:r===null?r=Object.getOwnPropertyDescriptor(i,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,i,t,r);else for(var c=l.length-1;c>=0;c--)(n=l[c])&&(o=(a<3?n(o):a>3?n(i,t,o):n(i,t))||o);return a>3&&o&&Object.defineProperty(i,t,o),o};let u=class extends e.i$1{constructor(){super(),this.unsubscribe=[],this.tabIdx=void 0,this.connectors=e.ConnectorController.state.connectors,this.authConnector=this.connectors.find(i=>i.type==="AUTH"),this.features=e.OptionsController.state.features,this.isPwaLoading=!1,this.unsubscribe.push(e.ConnectorController.subscribeKey("connectors",i=>{this.connectors=i,this.authConnector=this.connectors.find(t=>t.type==="AUTH")}),e.OptionsController.subscribeKey("features",i=>this.features=i))}connectedCallback(){super.connectedCallback(),this.handlePwaFrameLoad()}disconnectedCallback(){this.unsubscribe.forEach(i=>i())}render(){var o;let i=((o=this.features)==null?void 0:o.socials)||[];const t=!!this.authConnector,r=i==null?void 0:i.length,a=e.RouterController.state.view==="ConnectSocials";return(!t||!r)&&!a?null:(a&&!r&&(i=e.ConstantsUtil.DEFAULT_FEATURES.socials),e.x` <wui-flex flexDirection="column" gap="xs">
      ${i.map(n=>e.x`<wui-list-social
            @click=${()=>{this.onSocialClick(n)}}
            data-testid=${`social-selector-${n}`}
            name=${n}
            logo=${n}
            ?disabled=${this.isPwaLoading}
          ></wui-list-social>`)}
    </wui-flex>`)}async onSocialClick(i){i&&await g.executeSocialLogin(i)}async handlePwaFrameLoad(){var i;if(e.CoreHelperUtil.isPWA()){this.isPwaLoading=!0;try{((i=this.authConnector)==null?void 0:i.provider)instanceof e.W3mFrameProvider&&await this.authConnector.provider.init()}catch(t){e.AlertController.open({shortMessage:"Error loading embedded wallet in PWA",longMessage:t.message},"error")}finally{this.isPwaLoading=!1}}}};u.styles=C;d([s.n()],u.prototype,"tabIdx",void 0);d([s.r()],u.prototype,"connectors",void 0);d([s.r()],u.prototype,"authConnector",void 0);d([s.r()],u.prototype,"features",void 0);d([s.r()],u.prototype,"isPwaLoading",void 0);u=d([s.customElement("w3m-social-login-list")],u);const x=e.i`
  wui-flex {
    max-height: clamp(360px, 540px, 80vh);
    overflow: scroll;
    scrollbar-width: none;
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
  }
  wui-flex::-webkit-scrollbar {
    display: none;
  }
  wui-flex.disabled {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }
`;var m=function(l,i,t,r){var a=arguments.length,o=a<3?i:r===null?r=Object.getOwnPropertyDescriptor(i,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,i,t,r);else for(var c=l.length-1;c>=0;c--)(n=l[c])&&(o=(a<3?n(o):a>3?n(i,t,o):n(i,t))||o);return a>3&&o&&Object.defineProperty(i,t,o),o};exports.W3mConnectSocialsView=class extends e.i$1{constructor(){super(),this.unsubscribe=[],this.checked=f.OptionsStateController.state.isLegalCheckboxChecked,this.unsubscribe.push(f.OptionsStateController.subscribeKey("isLegalCheckboxChecked",i=>{this.checked=i}))}disconnectedCallback(){this.unsubscribe.forEach(i=>i())}render(){var w;const{termsConditionsUrl:i,privacyPolicyUrl:t}=e.OptionsController.state,r=(w=e.OptionsController.state.features)==null?void 0:w.legalCheckbox,o=!!(i||t)&&!!r,n=o&&!this.checked,c=n?-1:void 0;return e.x`
      <w3m-legal-checkbox></w3m-legal-checkbox>
      <wui-flex
        flexDirection="column"
        .padding=${o?["0","s","s","s"]:"s"}
        gap="xs"
        class=${s.o(n?"disabled":void 0)}
      >
        <w3m-social-login-list tabIdx=${s.o(c)}></w3m-social-login-list>
      </wui-flex>
      <w3m-legal-footer></w3m-legal-footer>
    `}};exports.W3mConnectSocialsView.styles=x;m([s.r()],exports.W3mConnectSocialsView.prototype,"checked",void 0);exports.W3mConnectSocialsView=m([s.customElement("w3m-connect-socials-view")],exports.W3mConnectSocialsView);const b=e.i`
  wui-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--wui-border-radius-m);
  }
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(3px);
    }
    50% {
      transform: translateX(-3px);
    }
    75% {
      transform: translateX(3px);
    }
    100% {
      transform: translateX(0);
    }
  }
  wui-flex:first-child:not(:only-child) {
    position: relative;
  }
  wui-loading-thumbnail {
    position: absolute;
  }
  wui-icon-box {
    position: absolute;
    right: calc(var(--wui-spacing-3xs) * -1);
    bottom: calc(var(--wui-spacing-3xs) * -1);
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
  }
  wui-text[align='center'] {
    width: 100%;
    padding: 0px var(--wui-spacing-l);
  }
  [data-error='true'] wui-icon-box {
    opacity: 1;
    transform: scale(1);
  }
  [data-error='true'] > wui-flex:first-child {
    animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
  .capitalize {
    text-transform: capitalize;
  }
`;var h=function(l,i,t,r){var a=arguments.length,o=a<3?i:r===null?r=Object.getOwnPropertyDescriptor(i,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,i,t,r);else for(var c=l.length-1;c>=0;c--)(n=l[c])&&(o=(a<3?n(o):a>3?n(i,t,o):n(i,t))||o);return a>3&&o&&Object.defineProperty(i,t,o),o};exports.W3mConnectingSocialView=class extends e.i$1{constructor(){super(),this.unsubscribe=[],this.socialProvider=e.AccountController.state.socialProvider,this.socialWindow=e.AccountController.state.socialWindow,this.error=!1,this.connecting=!1,this.message="Connect in the provider window",this.authConnector=e.ConnectorController.getAuthConnector(),this.handleSocialConnection=async t=>{var r;if((r=t.data)!=null&&r.resultUri)if(t.origin===e.ConstantsUtil$3.SECURE_SITE_ORIGIN){window.removeEventListener("message",this.handleSocialConnection,!1);try{if(this.authConnector&&!this.connecting){this.socialWindow&&(this.socialWindow.close(),e.AccountController.setSocialWindow(void 0,e.ChainController.state.activeChain)),this.connecting=!0,this.updateMessage();const a=t.data.resultUri;this.socialProvider&&e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_REQUEST_USER_DATA",properties:{provider:this.socialProvider}}),await e.ConnectionController.connectExternal({id:this.authConnector.id,type:this.authConnector.type,socialUri:a},this.authConnector.chain),this.socialProvider&&(e.StorageUtil.setConnectedSocialProvider(this.socialProvider),e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_SUCCESS",properties:{provider:this.socialProvider}}))}}catch{this.error=!0,this.updateMessage(),this.socialProvider&&e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_ERROR",properties:{provider:this.socialProvider}})}}else e.RouterController.goBack(),e.SnackController.showError("Untrusted Origin"),this.socialProvider&&e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_ERROR",properties:{provider:this.socialProvider}})},e.ErrorUtil.EmbeddedWalletAbortController.signal.addEventListener("abort",()=>{this.socialWindow&&(this.socialWindow.close(),e.AccountController.setSocialWindow(void 0,e.ChainController.state.activeChain))}),this.unsubscribe.push(e.AccountController.subscribe(t=>{t.socialProvider&&(this.socialProvider=t.socialProvider),t.socialWindow&&(this.socialWindow=t.socialWindow),t.address&&(e.ModalController.state.open||e.OptionsController.state.enableEmbedded)&&e.ModalController.close()})),this.authConnector&&this.connectSocial()}disconnectedCallback(){var i;this.unsubscribe.forEach(t=>t()),window.removeEventListener("message",this.handleSocialConnection,!1),(i=this.socialWindow)==null||i.close(),e.AccountController.setSocialWindow(void 0,e.ChainController.state.activeChain)}render(){return e.x`
      <wui-flex
        data-error=${s.o(this.error)}
        flexDirection="column"
        alignItems="center"
        .padding=${["3xl","xl","xl","xl"]}
        gap="xl"
      >
        <wui-flex justifyContent="center" alignItems="center">
          <wui-logo logo=${s.o(this.socialProvider)}></wui-logo>
          ${this.error?null:this.loaderTemplate()}
          <wui-icon-box
            backgroundColor="error-100"
            background="opaque"
            iconColor="error-100"
            icon="close"
            size="sm"
            border
            borderColor="wui-color-bg-125"
          ></wui-icon-box>
        </wui-flex>
        <wui-flex flexDirection="column" alignItems="center" gap="xs">
          <wui-text align="center" variant="paragraph-500" color="fg-100"
            >Log in with
            <span class="capitalize">${this.socialProvider??"Social"}</span></wui-text
          >
          <wui-text align="center" variant="small-400" color=${this.error?"error-100":"fg-200"}
            >${this.message}</wui-text
          ></wui-flex
        >
      </wui-flex>
    `}loaderTemplate(){const i=e.ThemeController.state.themeVariables["--w3m-border-radius-master"],t=i?parseInt(i.replace("px",""),10):4;return e.x`<wui-loading-thumbnail radius=${t*9}></wui-loading-thumbnail>`}connectSocial(){const i=setInterval(()=>{var t;(t=this.socialWindow)!=null&&t.closed&&(!this.connecting&&e.RouterController.state.view==="ConnectingSocial"&&(this.socialProvider&&e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_CANCELED",properties:{provider:this.socialProvider}}),e.RouterController.goBack()),clearInterval(i))},1e3);window.addEventListener("message",this.handleSocialConnection,!1)}updateMessage(){this.error?this.message="Something went wrong":this.connecting?this.message="Retrieving user data":this.message="Connect in the provider window"}};exports.W3mConnectingSocialView.styles=b;h([s.r()],exports.W3mConnectingSocialView.prototype,"socialProvider",void 0);h([s.r()],exports.W3mConnectingSocialView.prototype,"socialWindow",void 0);h([s.r()],exports.W3mConnectingSocialView.prototype,"error",void 0);h([s.r()],exports.W3mConnectingSocialView.prototype,"connecting",void 0);h([s.r()],exports.W3mConnectingSocialView.prototype,"message",void 0);exports.W3mConnectingSocialView=h([s.customElement("w3m-connecting-social-view")],exports.W3mConnectingSocialView);const v=e.i`
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  wui-shimmer {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: clamp(0px, var(--wui-border-radius-l), 40px) !important;
  }

  wui-qr-code {
    opacity: 0;
    animation-duration: 200ms;
    animation-timing-function: ease;
    animation-name: fadein;
    animation-fill-mode: forwards;
  }

  wui-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--wui-border-radius-m);
  }

  wui-flex:first-child:not(:only-child) {
    position: relative;
  }
  wui-loading-thumbnail {
    position: absolute;
  }
  wui-icon-box {
    position: absolute;
    right: calc(var(--wui-spacing-3xs) * -1);
    bottom: calc(var(--wui-spacing-3xs) * -1);
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
  }
`;var p=function(l,i,t,r){var a=arguments.length,o=a<3?i:r===null?r=Object.getOwnPropertyDescriptor(i,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,i,t,r);else for(var c=l.length-1;c>=0;c--)(n=l[c])&&(o=(a<3?n(o):a>3?n(i,t,o):n(i,t))||o);return a>3&&o&&Object.defineProperty(i,t,o),o};exports.W3mConnectingFarcasterView=class extends e.i$1{constructor(){super(),this.unsubscribe=[],this.timeout=void 0,this.socialProvider=e.AccountController.state.socialProvider,this.uri=e.AccountController.state.farcasterUrl,this.ready=!1,this.loading=!1,this.authConnector=e.ConnectorController.getAuthConnector(),this.forceUpdate=()=>{this.requestUpdate()},this.unsubscribe.push(e.AccountController.subscribeKey("farcasterUrl",i=>{i&&(this.uri=i,this.connectFarcaster())}),e.AccountController.subscribeKey("socialProvider",i=>{i&&(this.socialProvider=i)})),window.addEventListener("resize",this.forceUpdate)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeout),window.removeEventListener("resize",this.forceUpdate)}render(){return this.onRenderProxy(),e.x`${this.platformTemplate()}`}platformTemplate(){return e.CoreHelperUtil.isMobile()?e.x`${this.mobileTemplate()}`:e.x`${this.desktopTemplate()}`}desktopTemplate(){return this.loading?e.x`${this.loadingTemplate()}`:e.x`${this.qrTemplate()}`}qrTemplate(){return e.x` <wui-flex
      flexDirection="column"
      alignItems="center"
      .padding=${["0","xl","xl","xl"]}
      gap="xl"
    >
      <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTemplate()} </wui-shimmer>

      <wui-text variant="paragraph-500" color="fg-100">
        Scan this QR Code with your phone
      </wui-text>
      ${this.copyTemplate()}
    </wui-flex>`}loadingTemplate(){return e.x`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        .padding=${["xl","xl","xl","xl"]}
        gap="xl"
      >
        <wui-flex justifyContent="center" alignItems="center">
          <wui-logo logo="farcaster"></wui-logo>
          ${this.loaderTemplate()}
          <wui-icon-box
            backgroundColor="error-100"
            background="opaque"
            iconColor="error-100"
            icon="close"
            size="sm"
            border
            borderColor="wui-color-bg-125"
          ></wui-icon-box>
        </wui-flex>
        <wui-flex flexDirection="column" alignItems="center" gap="xs">
          <wui-text align="center" variant="paragraph-500" color="fg-100">
            Loading user data
          </wui-text>
          <wui-text align="center" variant="small-400" color="fg-200">
            Please wait a moment while we load your data.
          </wui-text>
        </wui-flex>
      </wui-flex>
    `}mobileTemplate(){return e.x` <wui-flex
      flexDirection="column"
      alignItems="center"
      .padding=${["3xl","xl","xl","xl"]}
      gap="xl"
    >
      <wui-flex justifyContent="center" alignItems="center">
        <wui-logo logo="farcaster"></wui-logo>
        ${this.loaderTemplate()}
        <wui-icon-box
          backgroundColor="error-100"
          background="opaque"
          iconColor="error-100"
          icon="close"
          size="sm"
          border
          borderColor="wui-color-bg-125"
        ></wui-icon-box>
      </wui-flex>
      <wui-flex flexDirection="column" alignItems="center" gap="xs">
        <wui-text align="center" variant="paragraph-500" color="fg-100"
          >Continue in Farcaster</span></wui-text
        >
        <wui-text align="center" variant="small-400" color="fg-200"
          >Accept connection request in the app</wui-text
        ></wui-flex
      >
      ${this.mobileLinkTemplate()}
    </wui-flex>`}loaderTemplate(){const i=e.ThemeController.state.themeVariables["--w3m-border-radius-master"],t=i?parseInt(i.replace("px",""),10):4;return e.x`<wui-loading-thumbnail radius=${t*9}></wui-loading-thumbnail>`}async connectFarcaster(){var i;if(this.authConnector)try{await((i=this.authConnector)==null?void 0:i.provider.connectFarcaster()),this.socialProvider&&(e.StorageUtil.setConnectedSocialProvider(this.socialProvider),e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_REQUEST_USER_DATA",properties:{provider:this.socialProvider}})),this.loading=!0,await e.ConnectionController.connectExternal(this.authConnector,this.authConnector.chain),this.socialProvider&&e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_SUCCESS",properties:{provider:this.socialProvider}}),this.loading=!1,e.ModalController.close()}catch(t){this.socialProvider&&e.EventsController.sendEvent({type:"track",event:"SOCIAL_LOGIN_ERROR",properties:{provider:this.socialProvider}}),e.RouterController.goBack(),e.SnackController.showError(t)}}mobileLinkTemplate(){return e.x`<wui-button
      size="md"
      ?loading=${this.loading}
      ?disabled=${!this.uri||this.loading}
      @click=${()=>{this.uri&&e.CoreHelperUtil.openHref(this.uri,"_blank")}}
    >
      Open farcaster</wui-button
    >`}onRenderProxy(){!this.ready&&this.uri&&(this.timeout=setTimeout(()=>{this.ready=!0},200))}qrCodeTemplate(){if(!this.uri||!this.ready)return null;const i=this.getBoundingClientRect().width-40;return e.x` <wui-qr-code
      size=${i}
      theme=${e.ThemeController.state.themeMode}
      uri=${this.uri}
      ?farcaster=${!0}
      data-testid="wui-qr-code"
      color=${s.o(e.ThemeController.state.themeVariables["--w3m-qr-color"])}
    ></wui-qr-code>`}copyTemplate(){const i=!this.uri||!this.ready;return e.x`<wui-link
      .disabled=${i}
      @click=${this.onCopyUri}
      color="fg-200"
      data-testid="copy-wc2-uri"
    >
      <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
      Copy link
    </wui-link>`}onCopyUri(){try{this.uri&&(e.CoreHelperUtil.copyToClopboard(this.uri),e.SnackController.showSuccess("Link copied"))}catch{e.SnackController.showError("Failed to copy")}}};exports.W3mConnectingFarcasterView.styles=v;p([s.r()],exports.W3mConnectingFarcasterView.prototype,"socialProvider",void 0);p([s.r()],exports.W3mConnectingFarcasterView.prototype,"uri",void 0);p([s.r()],exports.W3mConnectingFarcasterView.prototype,"ready",void 0);p([s.r()],exports.W3mConnectingFarcasterView.prototype,"loading",void 0);exports.W3mConnectingFarcasterView=p([s.customElement("w3m-connecting-farcaster-view")],exports.W3mConnectingFarcasterView);
//# sourceMappingURL=socials-Bld38zMN.cjs.map