1import{dR as $,dL as y,dM as l,dJ as S,dK as x,fs as m,dU as p,d$ as f,dV as h,f4 as u,dQ as _,ft as E,fu as R}from"./index-CYQNBxGl.js";import{W as C}from"./index-DqLuIjNH.js";import{ReownAuthentication as v}from"./features-DIN9i8do.js";const D=$` 2 .email-sufixes { 3 display: flex; 4 flex-direction: row; 5 gap: var(--wui-spacing-3xs); 6 overflow-x: auto; 7 max-width: 100%; 8 margin-top: var(--wui-spacing-s); 9 margin-bottom: calc(-1 * var(--wui-spacing-m)); 10 padding-bottom: var(--wui-spacing-m); 11 margin-left: calc(-1 * var(--wui-spacing-m)); 12 margin-right: calc(-1 * var(--wui-spacing-m)); 13 padding-left: var(--wui-spacing-m); 14 padding-right: var(--wui-spacing-m); 15 16 &::-webkit-scrollbar { 17 display: none; 18 } 19 } 20`;var O=function(r,t,i,a){var n=arguments.length,e=n<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,i):a,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,t,i,a);else for(var s=r.length-1;s>=0;s--)(o=r[s])&&(e=(n<3?o(e):n>3?o(t,i,e):o(t,i))||e);return n>3&&e&&Object.defineProperty(t,i,e),e};const I=["@gmail.com","@outlook.com","@yahoo.com","@hotmail.com","@aol.com","@icloud.com","@zoho.com"];let g=class extends y{constructor(){super(...arguments),this.email=""}render(){const t=I.filter(this.filter.bind(this)).map(this.item.bind(this));return t.length===0?null:l`<div class="email-sufixes">${t}</div>`}filter(t){if(!this.email)return!1;const i=this.email.split("@");if(i.length<2)return!0;const a=i.pop();return t.includes(a)&&t!==`@${a}`}item(t){return l`<wui-button variant="neutral" size="sm" @click=${()=>{const a=this.email.split("@");a.length>1&&a.pop();const n=a[0]+t;this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,composed:!0}))}} 21 >${t}</wui-button 22 >`}};g.styles=[D];O([S()],g.prototype,"email",void 0);g=O([x("w3m-email-suffixes-widget")],g);const j=$` 23 .recent-emails { 24 display: flex; 25 flex-direction: column; 26 padding: var(--wui-spacing-s) 0; 27 border-top: 1px solid var(--wui-color-gray-glass-005); 28 border-bottom: 1px solid var(--wui-color-gray-glass-005); 29 } 30 31 .recent-emails-heading { 32 margin-bottom: var(--wui-spacing-s); 33 } 34 35 .recent-emails-list-item { 36 --wui-color-gray-glass-002: transparent; 37 } 38`;var W=function(r,t,i,a){var n=arguments.length,e=n<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,i):a,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,t,i,a);else for(var s=r.length-1;s>=0;s--)(o=r[s])&&(e=(n<3?o(e):n>3?o(t,i,e):o(t,i))||e);return n>3&&e&&Object.defineProperty(t,i,e),e};let w=class extends y{constructor(){super(...arguments),this.emails=[]}render(){return this.emails.length===0?null:l`<div class="recent-emails"> 39 <wui-text variant="micro-600" color="fg-200" class="recent-emails-heading" 40 >Recently used emails</wui-text 41 > 42 ${this.emails.map(this.item.bind(this))} 43 </div>`}item(t){return l`<wui-list-item 44 @click=${()=>{this.dispatchEvent(new CustomEvent("select",{detail:t,bubbles:!0,composed:!0}))}} 45 ?chevron=${!0} 46 icon="mail" 47 iconVariant="overlay" 48 class="recent-emails-list-item" 49 > 50 <wui-text variant="paragraph-500" color="fg-100">${t}</wui-text> 51 </wui-list-item>`}};w.styles=[j];W([S()],w.prototype,"emails",void 0);w=W([x("w3m-recent-emails-widget")],w);var A=function(r,t,i,a){var n=arguments.length,e=n<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,i):a,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,t,i,a);else for(var s=r.length-1;s>=0;s--)(o=r[s])&&(e=(n<3?o(e):n>3?o(t,i,e):o(t,i))||e);return n>3&&e&&Object.defineProperty(t,i,e),e};let b=class extends C{constructor(){super(...arguments),this.siwx=m.state.siwx,this.onOtpSubmit=async t=>{await this.siwx.confirmEmailOtp({code:t}),p.replace("SIWXSignMessage")},this.onOtpResend=async t=>{const i=f.getAccountData();if(!i?.caipAddress)throw new Error("No account data found");await this.siwx.requestEmailOtp({email:t,account:i.caipAddress})}}connectedCallback(){(!this.siwx||!(this.siwx instanceof v))&&h.showError("ReownAuthentication is not initialized."),super.connectedCallback()}shouldSubmitOnOtpChange(){return this.otp.length===C.OTP_LENGTH}};A([u()],b.prototype,"siwx",void 0);b=A([x("w3m-data-capture-otp-confirm-view")],b);const P=$` 52 .hero { 53 display: flex; 54 flex-direction: column; 55 align-items: center; 56 justify-content: center; 57 gap: var(--wui-spacing-3xs); 58 59 transition-property: margin, height; 60 transition-duration: var(--wui-duration-md); 61 transition-timing-function: var(--wui-ease-out-power-1); 62 margin-top: -100px; 63 64 &[data-state='loading'] { 65 margin-top: 0px; 66 } 67 68 position: relative; 69 &:after { 70 content: ''; 71 position: absolute; 72 bottom: 0; 73 height: 252px; 74 width: 360px; 75 background: radial-gradient( 76 96.11% 53.95% at 50% 51.28%, 77 transparent 0%, 78 color-mix(in srgb, var(--wui-color-bg-100) 5%, transparent) 49%, 79 color-mix(in srgb, var(--wui-color-bg-100) 65%, transparent) 99.43% 80 ); 81 } 82 } 83 84 .hero-main-icon { 85 width: 176px; 86 transition-property: background-color; 87 transition-duration: var(--wui-duration-lg); 88 transition-timing-function: var(--wui-ease-out-power-1); 89 90 &[data-state='loading'] { 91 width: 56px; 92 } 93 } 94 95 .hero-row { 96 display: flex; 97 flex-direction: row; 98 align-items: center; 99 justify-content: center; 100 gap: var(--wui-spacing-3xs); 101 flex-wrap: nowrap; 102 min-width: fit-content; 103 104 &:nth-child(1) { 105 transform: translateX(-30px); 106 } 107 108 &:nth-child(2) { 109 transform: translateX(30px); 110 } 111 112 &:nth-child(4) { 113 transform: translateX(40px); 114 } 115 116 transition-property: height; 117 transition-duration: var(--wui-duration-md); 118 transition-timing-function: var(--wui-ease-out-power-1); 119 height: 68px; 120 121 &[data-state='loading'] { 122 height: 0px; 123 } 124 } 125 126 .hero-row-icon { 127 opacity: 0.1; 128 transition-property: opacity; 129 transition-duration: var(--wui-duration-md); 130 transition-timing-function: var(--wui-ease-out-power-1); 131 132 &[data-state='loading'] { 133 opacity: 0; 134 } 135 } 136`;var d=function(r,t,i,a){var n=arguments.length,e=n<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,i):a,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,t,i,a);else for(var s=r.length-1;s>=0;s--)(o=r[s])&&(e=(n<3?o(e):n>3?o(t,i,e):o(t,i))||e);return n>3&&e&&Object.defineProperty(t,i,e),e};let c=class extends y{constructor(){super(...arguments),this.email=p.state.data?.email??f.getAccountData()?.user?.email??"",this.address=f.getAccountData()?.address??"",this.loading=!1,this.appName=m.state.metadata?.name??"AppKit",this.siwx=m.state.siwx,this.isRequired=Array.isArray(m.state.remoteFeatures?.emailCapture)&&m.state.remoteFeatures?.emailCapture.includes("required"),this.recentEmails=this.getRecentEmails()}connectedCallback(){(!this.siwx||!(this.siwx instanceof v))&&h.showError("ReownAuthentication is not initialized. Please contact support."),super.connectedCallback()}firstUpdated(){this.loading=!1,this.recentEmails=this.getRecentEmails(),this.email&&this.onSubmit()}render(){return l` 137 <wui-flex flexDirection="column" .padding=${["3xs","m","m","m"]} gap="l"> 138 ${this.hero()} ${this.paragraph()} ${this.emailInput()} ${this.recentEmailsWidget()} 139 ${this.footerActions()} 140 </wui-flex> 141 `}hero(){return l` 142 <div class="hero" data-state=${this.loading?"loading":"default"}> 143 ${this.heroRow(["id","mail","wallet","x","solana","qrCode"])} 144 ${this.heroRow(["mail","farcaster","wallet","discord","mobile","qrCode"])} 145 <div class="hero-row"> 146 ${this.heroIcon("github")} ${this.heroIcon("bank")} 147 <wui-icon-box 148 size="xl" 149 iconSize="xxl" 150 iconColor=${this.loading?"fg-100":"accent-100"} 151 backgroundColor=${this.loading?"fg-100":"accent-100"} 152 icon=${this.loading?"id":"user"} 153 isOpaque 154 class="hero-main-icon" 155 data-state=${this.loading?"loading":"default"} 156 > 157 </wui-icon-box> 158 ${this.heroIcon("id")} ${this.heroIcon("card")} 159 </div> 160 ${this.heroRow(["google","id","github","verify","apple","mobile"])} 161 </div> 162 `}heroRow(t){return l` 163 <div class="hero-row" data-state=${this.loading?"loading":"default"}> 164 ${t.map(this.heroIcon.bind(this))} 165 </div> 166 `}heroIcon(t){return l` 167 <wui-icon-box 168 size="xl" 169 iconSize="xxl" 170 iconColor="fg-100" 171 backgroundColor="fg-100" 172 icon=${t} 173 data-state=${this.loading?"loading":"default"} 174 isOpaque 175 class="hero-row-icon" 176 > 177 </wui-icon-box> 178 `}paragraph(){return this.loading?l` 179 <wui-text variant="paragraph-400" color="fg-200" align="center" 180 >We are verifying your account with email 181 <wui-text variant="paragraph-600" color="accent-100">${this.email}</wui-text> and address 182 <wui-text variant="paragraph-600" color="fg-100"> 183 ${_.getTruncateString({string:this.address,charsEnd:4,charsStart:4,truncate:"middle"})} </wui-text 184 >, please wait a moment.</wui-text 185 > 186 `:this.isRequired?l` 187 <wui-text variant="paragraph-600" color="fg-100" align="center"> 188 ${this.appName} requires your email for authentication. 189 </wui-text> 190 `:l` 191 <wui-flex flexDirection="column" gap="xs" alignItems="center"> 192 <wui-text variant="paragraph-600" color="fg-100" align="center" size> 193 ${this.appName} would like to collect your email. 194 </wui-text> 195 196 <wui-text variant="small-400" color="fg-200" align="center"> 197 Don't worry, it's optional—
197you can skip this step. 198 </wui-text> 199 </wui-flex> 200 `}emailInput(){if(this.loading)return null;const t=a=>{a.key==="Enter"&&this.onSubmit()},i=a=>{this.email=a.detail};return l` 201 <wui-flex flexDirection="column"> 202 <wui-email-input 203 .value=${this.email} 204 .disabled=${this.loading} 205 @inputChange=${i} 206 @keydown=${t} 207 ></wui-email-input> 208 209 <w3m-email-suffixes-widget 210 .email=${this.email} 211 @change=${i} 212 ></w3m-email-suffixes-widget> 213 </wui-flex> 214 `}recentEmailsWidget(){if(this.recentEmails.length===0||this.loading)return null;const t=i=>{this.email=i.detail,this.onSubmit()};return l` 215 <w3m-recent-emails-widget 216 .emails=${this.recentEmails} 217 @select=${t} 218 ></w3m-recent-emails-widget> 219 `}footerActions(){return l` 220 <wui-flex flexDirection="row" fullWidth gap="s"> 221 ${this.isRequired?null:l`<wui-button 222 size="lg" 223 variant="neutral" 224 fullWidth 225 .disabled=${this.loading} 226 @click=${this.onSkip.bind(this)} 227 >Skip this step</wui-button 228 >`} 229 230 <wui-button 231 size="lg" 232 variant="main" 233 type="submit" 234 fullWidth 235 .disabled=${!this.email||!this.isValidEmail(this.email)} 236 .loading=${this.loading} 237 @click=${this.onSubmit.bind(this)} 238 > 239 Continue 240 </wui-button> 241 </wui-flex> 242 `}async onSubmit(){if(!(this.siwx instanceof v)){h.showError("ReownAuthentication is not initialized. Please contact support.");return}const t=f.getActiveCaipAddress();if(!t)throw new Error("Account is not connected.");if(!this.isValidEmail(this.email)){h.showError("Please provide a valid email.");return}try{this.loading=!0;const i=await this.siwx.requestEmailOtp({email:this.email,account:t});this.pushRecentEmail(this.email),i.uuid===null?p.replace("SIWXSignMessage"):p.replace("DataCaptureOtpConfirm",{email:this.email})}catch{h.showError("Failed to send email OTP"),this.loading=!1}}onSkip(){p.replace("SIWXSignMessage")}getRecentEmails(){const t=E.getItem(R.RECENT_EMAILS);return(t?t.split(","):[]).filter(this.isValidEmail.bind(this)).slice(0,3)}pushRecentEmail(t){const i=this.getRecentEmails(),a=Array.from(new Set([t,...i])).slice(0,3);E.setItem(R.RECENT_EMAILS,a.join(","))}isValidEmail(t){return/^\S+@\S+\.\S+$/u.test(t)}};c.styles=[P];d([u()],c.prototype,"email",void 0);d([u()],c.prototype,"address",void 0);d([u()],c.prototype,"loading",void 0);d([u()],c.prototype,"appName",void 0);d([u()],c.prototype,"siwx",void 0);d([u()],c.prototype,"isRequired",void 0);d([u()],c.prototype,"recentEmails",void 0);c=d([x("w3m-data-capture-view")],c);export{b as W3mDataCaptureOtpConfirmView,c as W3mDataCaptureView,g as W3mEmailSuffixesWidget,w as W3mRecentEmailsWidget};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.