263 lines
17 KiB
JavaScript
Executable File
263 lines
17 KiB
JavaScript
Executable File
import{i as k,a as _,p as E,O as u,R as w,n as F,b as l,h as P,I as A,l as D,k as d,C as $,f as y,u as N,E as p,y as T,S as b,J as j,M as O,T as S}from"./index-B6fu-u6K.js";import{n as M,r as c,c as I,o as C}from"./if-defined-D6swbWyQ.js";import{O as W}from"./index-BBOtoYTU.js";import{e as q}from"./index-CLHmPOvU.js";import"./index-Bl7lS5oY.js";import"./index-CXgckHt6.js";import"./index-CaabtizE.js";import"./index-CuJMoJHR.js";import"./index-BEFi7f_e.js";import"./index-3DIVdSIw.js";import"./index-DmDFCnkv.js";import"./ref-CNdtRDdT.js";import"./ConstantsUtil-Dmg8YACJ.js";import"./index-BqLefJXm.js";import"./index-DUZ-8KUm.js";const z=k`
|
|
: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 v=function(n,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,o);else for(var a=n.length-1;a>=0;a--)(s=n[a])&&(i=(r<3?s(i):r>3?s(e,t,i):s(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};let m=class extends _{constructor(){super(),this.unsubscribe=[],this.tabIdx=void 0,this.connectors=E.state.connectors,this.authConnector=this.connectors.find(e=>e.type==="AUTH"),this.remoteFeatures=u.state.remoteFeatures,this.isPwaLoading=!1,this.unsubscribe.push(E.subscribeKey("connectors",e=>{this.connectors=e,this.authConnector=this.connectors.find(t=>t.type==="AUTH")}),u.subscribeKey("remoteFeatures",e=>this.remoteFeatures=e))}connectedCallback(){super.connectedCallback(),this.handlePwaFrameLoad()}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){var i;let e=((i=this.remoteFeatures)==null?void 0:i.socials)||[];const t=!!this.authConnector,o=e==null?void 0:e.length,r=w.state.view==="ConnectSocials";return(!t||!o)&&!r?null:(r&&!o&&(e=F.DEFAULT_SOCIALS),l` <wui-flex flexDirection="column" gap="xs">
|
|
${e.map(s=>l`<wui-list-social
|
|
@click=${()=>{this.onSocialClick(s)}}
|
|
data-testid=${`social-selector-${s}`}
|
|
name=${s}
|
|
logo=${s}
|
|
?disabled=${this.isPwaLoading}
|
|
></wui-list-social>`)}
|
|
</wui-flex>`)}async onSocialClick(e){e&&await q(e)}async handlePwaFrameLoad(){var e;if(P.isPWA()){this.isPwaLoading=!0;try{((e=this.authConnector)==null?void 0:e.provider)instanceof A&&await this.authConnector.provider.init()}catch(t){D.open({displayMessage:"Error loading embedded wallet in PWA",debugMessage:t.message},"error")}finally{this.isPwaLoading=!1}}}};m.styles=z;v([M()],m.prototype,"tabIdx",void 0);v([c()],m.prototype,"connectors",void 0);v([c()],m.prototype,"authConnector",void 0);v([c()],m.prototype,"remoteFeatures",void 0);v([c()],m.prototype,"isPwaLoading",void 0);m=v([I("w3m-social-login-list")],m);const B=k`
|
|
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 U=function(n,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,o);else for(var a=n.length-1;a>=0;a--)(s=n[a])&&(i=(r<3?s(i):r>3?s(e,t,i):s(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};let L=class extends _{constructor(){super(),this.unsubscribe=[],this.checked=W.state.isLegalCheckboxChecked,this.unsubscribe.push(W.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){var R;const{termsConditionsUrl:e,privacyPolicyUrl:t}=u.state,o=(R=u.state.features)==null?void 0:R.legalCheckbox,i=!!(e||t)&&!!o,s=i&&!this.checked,a=s?-1:void 0;return l`
|
|
<w3m-legal-checkbox></w3m-legal-checkbox>
|
|
<wui-flex
|
|
flexDirection="column"
|
|
.padding=${i?["0","s","s","s"]:"s"}
|
|
gap="xs"
|
|
class=${C(s?"disabled":void 0)}
|
|
>
|
|
<w3m-social-login-list tabIdx=${C(a)}></w3m-social-login-list>
|
|
</wui-flex>
|
|
<w3m-legal-footer></w3m-legal-footer>
|
|
`}};L.styles=B;U([c()],L.prototype,"checked",void 0);L=U([I("w3m-connect-socials-view")],L);const V=k`
|
|
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 g=function(n,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,o);else for(var a=n.length-1;a>=0;a--)(s=n[a])&&(i=(r<3?s(i):r>3?s(e,t,i):s(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};let h=class extends _{constructor(){super(),this.unsubscribe=[],this.socialProvider=d.state.socialProvider,this.socialWindow=d.state.socialWindow,this.error=!1,this.connecting=!1,this.message="Connect in the provider window",this.remoteFeatures=u.state.remoteFeatures,this.address=d.state.address,this.connectionsByNamespace=$.getConnections(y.state.activeChain),this.hasMultipleConnections=this.connectionsByNamespace.length>0,this.authConnector=E.getAuthConnector(),this.handleSocialConnection=async t=>{var o;if((o=t.data)!=null&&o.resultUri)if(t.origin===N.SECURE_SITE_ORIGIN){window.removeEventListener("message",this.handleSocialConnection,!1);try{if(this.authConnector&&!this.connecting){this.socialWindow&&(this.socialWindow.close(),d.setSocialWindow(void 0,y.state.activeChain)),this.connecting=!0,this.updateMessage();const r=t.data.resultUri;this.socialProvider&&p.sendEvent({type:"track",event:"SOCIAL_LOGIN_REQUEST_USER_DATA",properties:{provider:this.socialProvider}}),await $.connectExternal({id:this.authConnector.id,type:this.authConnector.type,socialUri:r},this.authConnector.chain),this.socialProvider&&(T.setConnectedSocialProvider(this.socialProvider),p.sendEvent({type:"track",event:"SOCIAL_LOGIN_SUCCESS",properties:{provider:this.socialProvider}}))}}catch{this.error=!0,this.updateMessage(),this.socialProvider&&p.sendEvent({type:"track",event:"SOCIAL_LOGIN_ERROR",properties:{provider:this.socialProvider}})}}else w.goBack(),b.showError("Untrusted Origin"),this.socialProvider&&p.sendEvent({type:"track",event:"SOCIAL_LOGIN_ERROR",properties:{provider:this.socialProvider}})},j.EmbeddedWalletAbortController.signal.addEventListener("abort",()=>{this.socialWindow&&(this.socialWindow.close(),d.setSocialWindow(void 0,y.state.activeChain))}),this.unsubscribe.push(d.subscribe(t=>{t.socialProvider&&(this.socialProvider=t.socialProvider),t.socialWindow&&(this.socialWindow=t.socialWindow)}),u.subscribeKey("remoteFeatures",t=>{this.remoteFeatures=t}),d.subscribeKey("address",t=>{var r;const o=(r=this.remoteFeatures)==null?void 0:r.multiWallet;t&&t!==this.address&&(this.hasMultipleConnections&&o?(w.replace("ProfileWallets"),b.showSuccess("New Wallet Added")):(O.state.open||u.state.enableEmbedded)&&O.close())})),this.authConnector&&this.connectSocial()}disconnectedCallback(){var e;this.unsubscribe.forEach(t=>t()),window.removeEventListener("message",this.handleSocialConnection,!1),(e=this.socialWindow)==null||e.close(),d.setSocialWindow(void 0,y.state.activeChain)}render(){return l`
|
|
<wui-flex
|
|
data-error=${C(this.error)}
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
.padding=${["3xl","xl","xl","xl"]}
|
|
gap="xl"
|
|
>
|
|
<wui-flex justifyContent="center" alignItems="center">
|
|
<wui-logo logo=${C(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 e=S.state.themeVariables["--w3m-border-radius-master"],t=e?parseInt(e.replace("px",""),10):4;return l`<wui-loading-thumbnail radius=${t*9}></wui-loading-thumbnail>`}connectSocial(){const e=setInterval(()=>{var t;(t=this.socialWindow)!=null&&t.closed&&(!this.connecting&&w.state.view==="ConnectingSocial"&&(this.socialProvider&&p.sendEvent({type:"track",event:"SOCIAL_LOGIN_CANCELED",properties:{provider:this.socialProvider}}),w.goBack()),clearInterval(e))},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"}};h.styles=V;g([c()],h.prototype,"socialProvider",void 0);g([c()],h.prototype,"socialWindow",void 0);g([c()],h.prototype,"error",void 0);g([c()],h.prototype,"connecting",void 0);g([c()],h.prototype,"message",void 0);g([c()],h.prototype,"remoteFeatures",void 0);h=g([I("w3m-connecting-social-view")],h);const G=k`
|
|
@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 x=function(n,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,o);else for(var a=n.length-1;a>=0;a--)(s=n[a])&&(i=(r<3?s(i):r>3?s(e,t,i):s(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};let f=class extends _{constructor(){super(),this.unsubscribe=[],this.timeout=void 0,this.socialProvider=d.state.socialProvider,this.uri=d.state.farcasterUrl,this.ready=!1,this.loading=!1,this.remoteFeatures=u.state.remoteFeatures,this.authConnector=E.getAuthConnector(),this.forceUpdate=()=>{this.requestUpdate()},this.unsubscribe.push(d.subscribeKey("farcasterUrl",e=>{e&&(this.uri=e,this.connectFarcaster())}),d.subscribeKey("socialProvider",e=>{e&&(this.socialProvider=e)}),u.subscribeKey("remoteFeatures",e=>{this.remoteFeatures=e})),window.addEventListener("resize",this.forceUpdate)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeout),window.removeEventListener("resize",this.forceUpdate)}render(){return this.onRenderProxy(),l`${this.platformTemplate()}`}platformTemplate(){return P.isMobile()?l`${this.mobileTemplate()}`:l`${this.desktopTemplate()}`}desktopTemplate(){return this.loading?l`${this.loadingTemplate()}`:l`${this.qrTemplate()}`}qrTemplate(){return l` <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 l`
|
|
<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 l` <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 e=S.state.themeVariables["--w3m-border-radius-master"],t=e?parseInt(e.replace("px",""),10):4;return l`<wui-loading-thumbnail radius=${t*9}></wui-loading-thumbnail>`}async connectFarcaster(){var e,t;if(this.authConnector)try{await((e=this.authConnector)==null?void 0:e.provider.connectFarcaster()),this.socialProvider&&(T.setConnectedSocialProvider(this.socialProvider),p.sendEvent({type:"track",event:"SOCIAL_LOGIN_REQUEST_USER_DATA",properties:{provider:this.socialProvider}})),this.loading=!0;const r=$.getConnections(this.authConnector.chain).length>0;await $.connectExternal(this.authConnector,this.authConnector.chain);const i=(t=this.remoteFeatures)==null?void 0:t.multiWallet;this.socialProvider&&p.sendEvent({type:"track",event:"SOCIAL_LOGIN_SUCCESS",properties:{provider:this.socialProvider}}),this.loading=!1,r&&i?(w.replace("ProfileWallets"),b.showSuccess("New Wallet Added")):O.close()}catch(o){this.socialProvider&&p.sendEvent({type:"track",event:"SOCIAL_LOGIN_ERROR",properties:{provider:this.socialProvider}}),w.goBack(),b.showError(o)}}mobileLinkTemplate(){return l`<wui-button
|
|
size="md"
|
|
?loading=${this.loading}
|
|
?disabled=${!this.uri||this.loading}
|
|
@click=${()=>{this.uri&&P.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 e=this.getBoundingClientRect().width-40;return l` <wui-qr-code
|
|
size=${e}
|
|
theme=${S.state.themeMode}
|
|
uri=${this.uri}
|
|
?farcaster=${!0}
|
|
data-testid="wui-qr-code"
|
|
color=${C(S.state.themeVariables["--w3m-qr-color"])}
|
|
></wui-qr-code>`}copyTemplate(){const e=!this.uri||!this.ready;return l`<wui-link
|
|
.disabled=${e}
|
|
@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&&(P.copyToClopboard(this.uri),b.showSuccess("Link copied"))}catch{b.showError("Failed to copy")}}};f.styles=G;x([c()],f.prototype,"socialProvider",void 0);x([c()],f.prototype,"uri",void 0);x([c()],f.prototype,"ready",void 0);x([c()],f.prototype,"loading",void 0);x([c()],f.prototype,"remoteFeatures",void 0);f=x([I("w3m-connecting-farcaster-view")],f);export{L as W3mConnectSocialsView,f as W3mConnectingFarcasterView,h as W3mConnectingSocialView};
|