1"use strict";(self.webpackChunknowpayments_front=self.webpackChunknowpayments_front||[]).push([[7337],{35368:(t,e,i)=>{i.d(e,{I:()=>l});var o=i(95752),n=i(30909),r=i(93342);const a=(0,o.BX)({message:"",open:!1,triggerRect:{width:0,height:0,top:0,left:0},variant:"shade"}),s={state:a,subscribe:t=>(0,o.B1)(a,()=>t(a)),subscribeKey:(t,e)=>(0,n.u$)(a,t,e),showTooltip({message:t,triggerRect:e,variant:i}){a.open=!0,a.message=t,a.triggerRect=e,a.variant=i},hide(){a.open=!1,a.message="",a.triggerRect={width:0,height:0,top:0,left:0}}},l=(0,r.X)(s)},7337:(t,e,i)=>{i.r(e),i.d(e,{W3mSwapPreviewView:()=>E,W3mSwapSelectTokenView:()=>B,W3mSwapView:()=>C});var o=i(68032),n=i(97793),r=i(24074),a=i(70262),s=i(48092),l=i(40850),u=i(85701),c=i(14908),p=i(61234),d=i(26826),w=i(65178),h=i(93710),g=(i(48731),i(12924),i(70674),i(22548),i(86486)),x=i(45354);i(68875),i(94592);const b=o.AH` 2 :host { 3 width: 100%; 4 } 5 6 .details-container > wui-flex { 7 background: var(--wui-color-gray-glass-002); 8 border-radius: var(--wui-border-radius-xxs); 9 width: 100%; 10 } 11 12 .details-container > wui-flex > button { 13 border: none; 14 background: none; 15 padding: var(--wui-spacing-s); 16 border-radius: var(--wui-border-radius-xxs); 17 cursor: pointer; 18 } 19 20 .details-content-container { 21 padding: var(--wui-spacing-1xs); 22 padding-top: 0px; 23 display: flex; 24 align-items: center; 25 justify-content: center; 26 } 27 28 .details-content-container > wui-flex { 29 width: 100%; 30 } 31 32 .details-row { 33 width: 100%; 34 padding: var(--wui-spacing-s); 35 padding-left: var(--wui-spacing-s); 36 padding-right: var(--wui-spacing-1xs); 37 border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs)); 38 background: var(--wui-color-gray-glass-002); 39 } 40 41 .details-row-title { 42 white-space: nowrap; 43 } 44 45 .details-row.provider-free-row { 46 padding-right: var(--wui-spacing-xs); 47 } 48`;var k=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};const m=x.oU.CONVERT_SLIPPAGE_TOLERANCE;let v=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.networkName=l.W.state.activeCaipNetwork?.name,this.detailsOpen=!1,this.sourceToken=u.GN.state.sourceToken,this.toToken=u.GN.state.toToken,this.toTokenAmount=u.GN.state.toTokenAmount,this.sourceTokenPriceInUSD=u.GN.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=u.GN.state.toTokenPriceInUSD,this.priceImpact=u.GN.state.priceImpact,this.maxSlippage=u.GN.state.maxSlippage,this.networkTokenSymbol=u.GN.state.networkTokenSymbol,this.inputError=u.GN.state.inputError,this.unsubscribe.push(u.GN.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.toTokenAmount=t.toTokenAmount,this.priceImpact=t.priceImpact,this.maxSlippage=t.maxSlippage,this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.inputError=t.inputError}))}render(){const t=this.toTokenAmount&&this.maxSlippage?r.S.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const e=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return o.qy` 49 <wui-flex flexDirection="column" alignItems="center" gap="1xs" class="details-container"> 50 <wui-flex flexDirection="column"> 51 <button @click=${this.toggleDetails.bind(this)}> 52 <wui-flex justifyContent="space-between" .padding=${["0","xs","0","xs"]}> 53 <wui-flex justifyContent="flex-start" flexGrow="1" gap="xs"> 54 <wui-text variant="small-400" color="fg-100"> 55 1 ${this.sourceToken.symbol} = 56 ${r.S.formatNumberToLocalString(e,3)} 57 ${this.toToken.symbol} 58 </wui-text> 59 <wui-text variant="small-400" color="fg-200"> 60 $${r.S.formatNumberToLocalString(this.sourceTokenPriceInUSD)} 61 </wui-text> 62 </wui-flex> 63 <wui-icon name="chevronBottom"></wui-icon> 64 </wui-flex> 65 </button> 66 ${this.detailsOpen?o.qy` 67 <wui-flex flexDirection="column" gap="xs" class="details-content-container"> 68 ${this.priceImpact?o.qy` <wui-flex flexDirection="column" gap="xs"> 69 <wui-flex 70 justifyContent="space-between" 71 alignItems="center" 72 class="details-row" 73 > 74 <wui-flex alignItems="center" gap="xs"> 75 <wui-text class="details-row-title" variant="small-400" color="fg-150"> 76 Price impact 77 </wui-text> 78 <w3m-tooltip-trigger 79 text="Price impact reflects the change in market price due to your trade" 80 > 81 <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> 82 </w3m-tooltip-trigger> 83 </wui-flex> 84 <wui-flex> 85 <wui-text variant="small-400" color="fg-200"> 86 ${r.S.formatNumberToLocalString(this.priceImpact,3)}% 87 </wui-text> 88 </wui-flex> 89 </wui-flex> 90 </wui-flex>`:null} 91 ${this.maxSlippage&&this.sourceToken.symbol?o.qy`<wui-flex flexDirection="column" gap="xs"> 92 <wui-flex 93 justifyContent="space-between" 94 alignItems="center" 95 class="details-row" 96 > 97 <wui-flex alignItems="center" gap="xs"> 98 <wui-text class="details-row-title" variant="small-400" color="fg-150"> 99 Max. slippage 100 </wui-text> 101 <w3m-tooltip-trigger 102 text=${"Max slippage sets the minimum amount you must receive for the transaction to proceed. "+(t?`Transaction will be reversed if you receive less than ${r.S.formatNumberToLocalString(t,6)} ${this.toToken.symbol} due to price changes.`:"")} 103 > 104 <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> 105 </w3m-tooltip-trigger> 106 </wui-flex> 107 <wui-flex> 108 <wui-text variant="small-400" color="fg-200"> 109 ${r.S.formatNumberToLocalString(this.maxSlippage,6)} 110 ${this.toToken.symbol} ${m}% 111 </wui-text> 112 </wui-flex> 113 </wui-flex> 114 </wui-flex>`:null} 115 <wui-flex flexDirection="column" gap="xs"> 116 <wui-flex 117 justifyContent="space-between" 118 alignItems="center" 119 class="details-row provider-free-row" 120 > 121 <wui-flex alignItems="center" gap="xs"> 122 <wui-text class="details-row-title" variant="small-400" color="fg-150"> 123 Provider fee 124 </wui-text> 125 </wui-flex> 126 <wui-flex> 127 <wui-text variant="small-400" color="fg-200">0.85%</wui-text> 128 </wui-flex> 129 </wui-flex> 130 </wui-flex> 131 </wui-flex> 132 `:null} 133 </wui-flex> 134 </wui-flex> 135 `}toggleDetails(){this.detailsOpen=!this.detailsOpen}};v.styles=[b],k([(0,n.wk)()],v.prototype,"networkName",void 0),k([(0,n.MZ)()],v.prototype,"detailsOpen",void 0),k([(0,n.wk)()],v.prototype,"sourceToken",void 0),k([(0,n.wk)()],v.prototype,"toToken",void 0),k([(0,n.wk)()],v.prototype,"toTokenAmount",void 0),k([(0,n.wk)()],v.prototype,"sourceTokenPriceInUSD",void 0),k([(0,n.wk)()],v.prototype,"toTokenPriceInUSD",void 0),k([(0,n.wk)()],v.prototype,"priceImpact",void 0),k([(0,n.wk)()],v.prototype,"maxSlippage",void 0),k([(0,n.wk)()],v.prototype,"networkTokenSymbol",void 0),k([(0,n.wk)()],v.prototype,"inputError",void 0),v=k([(0,h.EM)("w3m-swap-details")],v),i(36504);const f=o.AH` 136 :host { 137 width: 100%; 138 } 139 140 :host > wui-flex { 141 display: flex; 142 flex-direction: row; 143 justify-content: space-between; 144 align-items: center; 145 border-radius: var(--wui-border-radius-s); 146 padding: var(--wui-spacing-xl); 147 padding-right: var(--wui-spacing-s); 148 background-color: var(--wui-color-gray-glass-002); 149 box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002); 150 width: 100%; 151 height: 100px; 152 box-sizing: border-box; 153 position: relative; 154 } 155 156 wui-shimmer.market-value { 157 opacity: 0; 158 } 159 160 :host > wui-flex > svg.input_mask { 161 position: absolute; 162 inset: 0; 163 z-index: 5; 164 } 165 166 :host wui-flex .input_mask__border, 167 :host wui-flex .input_mask__background { 168 transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1); 169 will-change: fill; 170 } 171 172 :host wui-flex .input_mask__border { 173 fill: var(--wui-color-gray-glass-020); 174 } 175 176 :host wui-flex .input_mask__background { 177 fill: var(--wui-color-gray-glass-002); 178 } 179`;
179var y=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let T=class extends o.WF{constructor(){super(...arguments),this.target="sourceToken"}render(){return o.qy` 180 <wui-flex class justifyContent="space-between"> 181 <wui-flex 182 flex="1" 183 flexDirection="column" 184 alignItems="flex-start" 185 justifyContent="center" 186 class="swap-input" 187 gap="xxs" 188 > 189 <wui-shimmer width="80px" height="40px" borderRadius="xxs" variant="light"></wui-shimmer> 190 </wui-flex> 191 ${this.templateTokenSelectButton()} 192 </wui-flex> 193 `}templateTokenSelectButton(){return o.qy` 194 <wui-flex 195 class="swap-token-button" 196 flexDirection="column" 197 alignItems="flex-end" 198 justifyContent="center" 199 gap="xxs" 200 > 201 <wui-shimmer width="80px" height="40px" borderRadius="3xl" variant="light"></wui-shimmer> 202 </wui-flex> 203 `}};T.styles=[f],y([(0,n.MZ)()],T.prototype,"target",void 0),T=y([(0,h.EM)("w3m-swap-input-skeleton")],T);const S={numericInputKeyDown(t,e,i){const o=t.metaKey||t.ctrlKey,n=t.key,r=n.toLocaleLowerCase(),a=","===n,s="."===n,l=n>="0"&&n<="9";!o&&("a"===r||"c"===r||"v"===r||"x"===r)&&t.preventDefault(),"0"!==e||a||s||"0"!==n||t.preventDefault(),"0"===e&&l&&(i(n),t.preventDefault()),(a||s)&&(e||(i("0."),t.preventDefault()),(e?.includes(".")||e?.includes(","))&&t.preventDefault()),l||["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"].includes(n)||s||a||t.preventDefault()}};i(78328);const $=o.AH` 204 :host > wui-flex { 205 display: flex; 206 flex-direction: row; 207 justify-content: space-between; 208 align-items: center; 209 border-radius: var(--wui-border-radius-s); 210 background-color: var(--wui-color-gray-glass-002); 211 padding: var(--wui-spacing-xl); 212 padding-right: var(--wui-spacing-s); 213 width: 100%; 214 height: 100px; 215 box-sizing: border-box; 216 box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002); 217 position: relative; 218 transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg); 219 will-change: background-color; 220 } 221 222 :host wui-flex.focus { 223 box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005); 224 } 225 226 :host > wui-flex .swap-input, 227 :host > wui-flex .swap-token-button { 228 z-index: 10; 229 } 230 231 :host > wui-flex .swap-input { 232 -webkit-mask-image: linear-gradient( 233 270deg, 234 transparent 0px, 235 transparent 8px, 236 black 24px, 237 black 25px, 238 black 32px, 239 black 100% 240 ); 241 mask-image: linear-gradient( 242 270deg, 243 transparent 0px, 244 transparent 8px, 245 black 24px, 246 black 25px, 247 black 32px, 248 black 100% 249 ); 250 } 251 252 :host > wui-flex .swap-input input { 253 background: none; 254 border: none; 255 height: 42px; 256 width: 100%; 257 font-size: 32px; 258 font-style: normal; 259 font-weight: 400; 260 line-height: 130%; 261 letter-spacing: -1.28px; 262 outline: none; 263 caret-color: var(--wui-color-accent-100); 264 color: var(--wui-color-fg-100); 265 padding: 0px; 266 } 267 268 :host > wui-flex .swap-input input:focus-visible { 269 outline: none; 270 } 271 272 :host > wui-flex .swap-input input::-webkit-outer-spin-button, 273 :host > wui-flex .swap-input input::-webkit-inner-spin-button { 274 -webkit-appearance: none; 275 margin: 0; 276 } 277 278 .max-value-button { 279 background-color: transparent; 280 border: none; 281 cursor: pointer; 282 color: var(--wui-color-gray-glass-020); 283 padding-left: 0px; 284 } 285 286 .market-value { 287 min-height: 18px; 288 } 289`;var I=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let N=class extends o.WF{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const t=this.marketValue||"0",e=r.S.bigNumber(t).gt("0");return o.qy` 290 <wui-flex class="${this.focused?"focus":""}" justifyContent="space-between"> 291 <wui-flex 292 flex="1" 293 flexDirection="column" 294 alignItems="flex-start" 295 justifyContent="center" 296 class="swap-input" 297 > 298 <input 299 data-testid="swap-input-${this.target}" 300 @focusin=${()=>this.onFocusChange(!0)} 301 @focusout=${()=>this.onFocusChange(!1)} 302 ?disabled=${this.disabled} 303 .value=${this.value}
304 @input=${this.dispatchInputChangeEvent} 305 @keydown=${this.handleKeydown} 306 placeholder="0" 307 type="text" 308 inputmode="decimal" 309 /> 310 <wui-text class="market-value" variant="small-400" color="fg-200"> 311 ${e?`$${r.S.formatNumberToLocalString(this.marketValue,2)}`:null} 312 </wui-text> 313 </wui-flex> 314 ${this.templateTokenSelectButton()} 315 </wui-flex> 316 `}handleKeydown(t){return S.numericInputKeyDown(t,this.value,t=>this.onSetAmount?.(this.target,t))}dispatchInputChangeEvent(t){if(!this.onSetAmount)return;const e=t.target.value.replace(/[^0-9.]/gu,"");","===e||"."===e?this.onSetAmount(this.target,"0."):e.endsWith(",")?this.onSetAmount(this.target,e.replace(",",".")):this.onSetAmount(this.target,e)}setMaxValueToInput(){this.onSetMaxValue?.(this.target,this.balance)}templateTokenSelectButton(){return this.token?o.qy` 317 <wui-flex 318 class="swap-token-button" 319 flexDirection="column" 320 alignItems="flex-end" 321 justifyContent="center" 322 gap="xxs" 323 > 324 <wui-token-button 325 data-testid="swap-input-token-${this.target}" 326 text=${this.token.symbol} 327 imageSrc=${this.token.logoUri} 328 @click=${this.onSelectToken.bind(this)} 329 > 330 </wui-token-button> 331 <wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex> 332 </wui-flex> 333 `:o.qy` <wui-button 334 data-testid="swap-select-token-button-${this.target}" 335 class="swap-token-button" 336 size="md" 337 variant="accent" 338 @click=${this.onSelectToken.bind(this)} 339 > 340 Select token 341 </wui-button>`}tokenBalanceTemplate(){const t=r.S.multiply(this.balance,this.price),e=!!t&&t?.gt(5e-5);return o.qy` 342 ${e?o.qy`<wui-text variant="small-400" color="fg-200"> 343 ${r.S.formatNumberToLocalString(this.balance,2)} 344 </wui-text>`:null} 345 ${"sourceToken"===this.target?this.tokenActionButtonTemplate(e):null} 346 `}tokenActionButtonTemplate(t){return t?o.qy` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}> 347 <wui-text color="accent-100" variant="small-600">Max</wui-text> 348 </button>`:o.qy` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}> 349 <wui-text color="accent-100" variant="small-600">Buy</wui-text> 350 </button>`}onFocusChange(t){this.focused=t}onSelectToken(){d.E.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),a.I.push("SwapSelectToken",{target:this.target})}onBuyToken(){a.I.push("OnRampProviders")}};N.styles=[$],I([(0,n.MZ)()],N.prototype,"focused",void 0),I([(0,n.MZ)()],N.prototype,"balance",void 0),I([(0,n.MZ)()],N.prototype,"value",void 0),I([(0,n.MZ)()],N.prototype,"price",void 0),I([(0,n.MZ)()],N.prototype,"marketValue",void 0),I([(0,n.MZ)()],N.prototype,"disabled",void 0),I([(0,n.MZ)()],N.prototype,"target",void 0),I([(0,n.MZ)()],N.prototype,"token",void 0),I([(0,n.MZ)()],N.prototype,"onSetAmount",void 0),I([(0,n.MZ)()],N.prototype,"onSetMaxValue",void 0),N=I([(0,h.EM)("w3m-swap-input")],N);const A=o.AH` 351 :host > wui-flex:first-child { 352 overflow-y: auto; 353 overflow-x: hidden; 354 scrollbar-width: none; 355 } 356 357 :host > wui-flex:first-child::-webkit-scrollbar {
358 display: none; 359 } 360 361 wui-loading-hexagon { 362 position: absolute; 363 } 364 365 .action-button { 366 width: 100%; 367 border-radius: var(--wui-border-radius-xs); 368 } 369 370 .action-button:disabled { 371 border-color: 1px solid var(--wui-color-gray-glass-005); 372 } 373 374 .swap-inputs-container { 375 position: relative; 376 } 377 378 .replace-tokens-button-container { 379 display: flex; 380 justify-content: center; 381 align-items: center; 382 position: absolute; 383 top: 50%; 384 left: 50%; 385 transform: translate(-50%, -50%); 386 gap: var(--wui-spacing-1xs); 387 border-radius: var(--wui-border-radius-xs); 388 background-color: var(--wui-color-modal-bg-base); 389 padding: var(--wui-spacing-xxs); 390 } 391 392 .replace-tokens-button-container > button { 393 display: flex; 394 justify-content: center; 395 align-items: center; 396 height: 40px; 397 width: 40px; 398 padding: var(--wui-spacing-xs); 399 border: none; 400 border-radius: var(--wui-border-radius-xxs); 401 background: var(--wui-color-gray-glass-002); 402 transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1); 403 will-change: background-color; 404 z-index: 20; 405 } 406 407 .replace-tokens-button-container > button:hover { 408 background: var(--wui-color-gray-glass-005); 409 } 410 411 .details-container > wui-flex { 412 background: var(--wui-color-gray-glass-002); 413 border-radius: var(--wui-border-radius-xxs); 414 width: 100%; 415 } 416 417 .details-container > wui-flex > button { 418 border: none; 419 background: none; 420 padding: var(--wui-spacing-s); 421 border-radius: var(--wui-border-radius-xxs); 422 transition: background 0.2s linear; 423 } 424 425 .details-container > wui-flex > button:hover { 426 background: var(--wui-color-gray-glass-002); 427 } 428 429 .details-content-container { 430 padding: var(--wui-spacing-1xs); 431 display: flex; 432 align-items: center; 433 justify-content: center; 434 } 435 436 .details-content-container > wui-flex { 437 width: 100%; 438 } 439 440 .details-row { 441 width: 100%; 442 padding: var(--wui-spacing-s) var(--wui-spacing-xl); 443 border-radius: var(--wui-border-radius-xxs); 444 background: var(--wui-color-gray-glass-002); 445 } 446`;var P=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let C=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.initialParams=a.I.state.data?.swap,this.detailsOpen=!1,this.caipAddress=s.U.state.caipAddress,this.caipNetworkId=l.W.state.activeCaipNetwork?.caipNetworkId,this.initialized=u.GN.state.initialized,this.loadingQuote=u.GN.state.loadingQuote,this.loadingPrices=u.GN.state.loadingPrices,this.loadingTransaction=u.GN.state.loadingTransaction,this.sourceToken=u.GN.state.sourceToken,this.sourceTokenAmount=u.GN.state.sourceTokenAmount,this.sourceTokenPriceInUSD=u.GN.state.sourceTokenPriceInUSD,this.toToken=u.GN.state.toToken,this.toTokenAmount=u.GN.state.toTokenAmount,this.toTokenPriceInUSD=u.GN.state.toTokenPriceInUSD,this.inputError=u.GN.state.inputError,this.fetchError=u.GN.state.fetchError,this.lastTokenPriceUpdate=0,this.minTokenPriceUpdateInterval=1e4,this.visibilityChangeHandler=()=>{document?.hidden?(clearInterval(this.interval),this.interval=void 0):this.startTokenPriceInterval()},this.startTokenPriceInterval=()=>{this.interval&&Date.now()-this.lastTokenPriceUpdate<this.minTokenPriceUpdateInterval||(this.lastTokenPriceUpdate&&Date.now()-this.lastTokenPriceUpdate>this.minTokenPriceUpdateInterval&&this.fetchTokensAndValues(),clearInterval(this.interval),this.interval=setInterval(()=>{this.fetchTokensAndValues()},this.minTokenPriceUpdateInterval))},this.watchTokensAndValues=()=>{this.sourceToken&&this.toToken&&(this.subscribeToVisibilityChange(),this.startTokenPriceInterval())},this.onDebouncedGetSwapCalldata=c.w.debounce(async()=>{await u.GN.swapTokens()},200),l.W.subscribeKey("activeCaipNetwork",t=>this.onCaipNetworkChange({newCaipNetwork:t,resetSwapState:!0,initializeSwapState:!1})),s.U.subscribeKey("caipAddress",t=>this.onCaipAddressChange({newCaipAddress:t,resetSwapState:!0,initializeSwapState:!1})),this.unsubscribe.push(l.W.subscribeKey("activeCaipNetwork",t=>this.onCaipNetworkChange({newCaipNetwork:t,resetSwapState:!1,initializeSwapState:!0})),s.U.subscribeKey("caipAddress",t=>this.onCaipAddressChange({newCaipAddress:t,resetSwapState:!1,initializeSwapState:!0})),p.W.subscribeKey("open",t=>{t||u.GN.resetState()}),a.I.subscribeKey("view",t=>{t.includes("Swap")||u.GN.resetValues()}),u.GN.subscribe(t=>{this.initialized=t.initialized,this.loadingQuote=t.loadingQuote,this.loadingPrices=t.loadingPrices,this.loadingTransaction=t.loadingTransaction,this.sourceToken=t.sourceToken,this.sourceTokenAmount=t.sourceTokenAmount,this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD,this.toToken=t.toToken,this.toTokenAmount=t.toTokenAmount,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.inputError=t.inputError,this.fetchError=t.fetchError,t.sourceToken&&t.toToken&&this.watchTokensAndValues()}))}async firstUpdated(){u.GN.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(t=>t?.()),clearInterval(this.interval),document?.removeEventListener("visibilitychange",this.visibilityChangeHandler)}render(){return o.qy` 447 <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s"> 448 ${this.initialized?this.templateSwap():this.templateLoading()} 449 </wui-flex> 450 `}subscribeToVisibilityChange(){document?.removeEventListener("visibilitychange",this.visibilityChangeHandler),document?.addEventListener("visibilitychange",this.visibilityChangeHandler)}fetchTokensAndValues(){u.GN.getNetworkTokenPrice(),u.GN.getMyTokensWithBalance(),u.GN.swapTokens(),this.lastTokenPriceUpdate=Date.now()}templateSwap(){return o.qy` 451 <wui-flex flexDirection="column" gap="s"> 452 <wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container"> 453 ${this.templateTokenInput("sourceToken",this.sourceToken)} 454 ${this.templateTokenInput("toToken",this.toToken)} ${this.templateReplaceTokensButton()} 455 </wui-flex> 456 ${this.templateDetails()} ${this.templateActionButton()} 457 </wui-flex> 458 `}actionButtonLabel(){return this.fetchError?"Swap":this.sourceToken&&this.toToken?this.sourceTokenAmount?this.inputError?this.inputError:"Review swap":"Enter amount":"Select token"}templateReplaceTokensButton(){return o.qy` 459 <wui-flex class="replace-tokens-button-container"> 460 <button @click=${this.onSwitchTokens.bind(this)}> 461 <wui-icon name="recycleHorizontal" color="fg-250" size="lg"></wui-icon> 462 </button> 463 </wui-flex> 464 `}templateLoading(){return o.qy` 465 <wui-flex flexDirection="column" gap="l"> 466 <wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container"> 467 <w3m-swap-input-skeleton target="sourceToken"></w3m-swap-input-skeleton> 468 <w3m-swap-input-skeleton target="toToken"></w3m-swap-input-skeleton> 469 ${this.templateReplaceTokensButton()} 470 </wui-flex> 471 ${this.templateActionButton()} 472 </wui-flex> 473 `}templateTokenInput(t,e){const i=u.GN.state.myTokensWithBalance?.find(t=>t?.address===e?.address),n="toToken"===t?this.toTokenAmount:this.sourceTokenAmount,a="toToken"===t?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,s=r.S.parseLocalStringToNumber(n)*a;return o.qy`<w3m-swap-input 474 .value=${"toToken"===t?this.toTokenAmount:this.sourceTokenAmount} 475 .disabled=${"toToken"===t} 476 .onSetAmount=${this.handleChangeAmount.bind(this)} 477 target=${t} 478 .token=${e} 479 .balance=${i?.quantity?.numeric} 480 .price=${i?.price} 481 .marketValue=${s} 482 .onSetMaxValue=${this.onSetMaxValue.bind(this)} 483 ></w3m-swap-input>`}onSetMaxValue(t,e){const i=r.S.bigNumber(e||"0");this.handleChangeAmount(t,i.gt(0)?i.toFixed(20):"0")}templateDetails(){return this.sourceToken&&this.toToken&&!this.inputError?o.qy`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`:null}handleChangeAmount(t,e){u.GN.clearError(),"sourceToken"===t?u.GN.setSourceTokenAmount(e):u.GN.setToTokenAmount(e),this.onDebouncedGetSwapCalldata()}templateActionButton(){const t=!this.toToken||!this.sourceToken,e=!this.sourceTokenAmount,i=this.loadingQuote||this.loadingPrices||this.loadingTransaction,n=i||t||e||this.inputError;return o.qy` <wui-flex gap="xs"> 484 <wui-button 485 data-testid="swap-action-button" 486 class="action-button" 487 fullWidth 488 size="lg" 489 borderRadius="xs" 490 variant=${t?"neutral":"main"} 491 .loading=${i} 492 .disabled=${n} 493 @click=${this.onSwapPreview.bind(this)} 494 > 495 ${this.actionButtonLabel()} 496 </wui-button>
496 497 </wui-flex>`}onSwitchTokens(){u.GN.switchTokens()}async onSwapPreview(){this.fetchError&&await u.GN.swapTokens(),d.E.sendEvent({type:"track",event:"INITIATE_SWAP",properties:{network:this.caipNetworkId||"",swapFromToken:this.sourceToken?.symbol||"",swapToToken:this.toToken?.symbol||"",swapFromAmount:this.sourceTokenAmount||"",swapToAmount:this.toTokenAmount||"",isSmartAccount:(0,w.lj)(l.W.state.activeChain)===g.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}}),a.I.push("SwapPreview")}async handleSwapParameters(){if(this.initialParams){if(!u.GN.state.initialized){const t=new Promise(t=>{const e=u.GN.subscribeKey("initialized",i=>{i&&(e?.(),t())})});await t}await this.setSwapParameters(this.initialParams)}}async setSwapParameters({amount:t,fromToken:e,toToken:i}){if(!u.GN.state.tokens||!u.GN.state.myTokensWithBalance){const t=new Promise(t=>{const e=u.GN.subscribeKey("myTokensWithBalance",i=>{i&&i.length>0&&(e?.(),t())});setTimeout(()=>{e?.(),t()},5e3)});await t}const o=[...u.GN.state.tokens||[],...u.GN.state.myTokensWithBalance||[]];if(e){const t=o.find(t=>t.symbol.toLowerCase()===e.toLowerCase());t&&u.GN.setSourceToken(t)}if(i){const t=o.find(t=>t.symbol.toLowerCase()===i.toLowerCase());t&&u.GN.setToToken(t)}t&&!isNaN(Number(t))&&u.GN.setSourceTokenAmount(t)}onCaipAddressChange({newCaipAddress:t,resetSwapState:e,initializeSwapState:i}){this.caipAddress!==t&&(this.caipAddress=t,e&&u.GN.resetState(),i&&u.GN.initializeState())}onCaipNetworkChange({newCaipNetwork:t,resetSwapState:e,initializeSwapState:i}){this.caipNetworkId!==t?.caipNetworkId&&(this.caipNetworkId=t?.caipNetworkId,e&&u.GN.resetState(),i&&u.GN.initializeState())}};C.styles=A,P([(0,n.MZ)({type:Object})],C.prototype,"initialParams",void 0),P([(0,n.wk)()],C.prototype,"interval",void 0),P([(0,n.wk)()],C.prototype,"detailsOpen",void 0),P([(0,n.wk)()],C.prototype,"caipAddress",void 0),P([(0,n.wk)()],C.prototype,"caipNetworkId",void 0),P([(0,n.wk)()],C.prototype,"initialized",void 0),P([(0,n.wk)()],C.prototype,"loadingQuote",void 0),P([(0,n.wk)()],C.prototype,"loadingPrices",void 0),P([(0,n.wk)()],C.prototype,"loadingTransaction",void 0),P([(0,n.wk)()],C.prototype,"sourceToken",void 0),P([(0,n.wk)()],C.prototype,"sourceTokenAmount",void 0),P([(0,n.wk)()],C.prototype,"sourceTokenPriceInUSD",void 0),P([(0,n.wk)()],C.prototype,"toToken",void 0),P([(0,n.wk)()],C.prototype,"toTokenAmount",void 0),P([(0,n.wk)()],C.prototype,"toTokenPriceInUSD",void 0),P([(0,n.wk)()],C.prototype,"inputError",void 0),P([(0,n.wk)()],C.prototype,"fetchError",void 0),P([(0,n.wk)()],C.prototype,"lastTokenPriceUpdate",void 0),C=P([(0,h.EM)("w3m-swap-view")],C);const D=o.AH` 498 :host > wui-flex:first-child { 499 overflow-y: auto; 500 overflow-x: hidden; 501 scrollbar-width: none; 502 } 503 504 :host > wui-flex:first-child::-webkit-scrollbar {
505 display: none; 506 } 507 508 .preview-container, 509 .details-container { 510 width: 100%; 511 } 512 513 .token-image { 514 width: 24px; 515 height: 24px; 516 box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005); 517 border-radius: 12px; 518 } 519 520 wui-loading-hexagon { 521 position: absolute; 522 } 523 524 .token-item { 525 display: flex; 526 align-items: center; 527 justify-content: center; 528 gap: var(--wui-spacing-xxs); 529 padding: var(--wui-spacing-xs); 530 height: 40px; 531 border: none; 532 border-radius: 80px; 533 background: var(--wui-color-gray-glass-002); 534 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002); 535 cursor: pointer; 536 transition: background 0.2s linear; 537 } 538 539 .token-item:hover { 540 background: var(--wui-color-gray-glass-005); 541 } 542 543 .preview-token-details-container { 544 width: 100%; 545 } 546 547 .details-row { 548 width: 100%; 549 padding: var(--wui-spacing-s) var(--wui-spacing-xl); 550 border-radius: var(--wui-border-radius-xxs); 551 background: var(--wui-color-gray-glass-002); 552 } 553 554 .action-buttons-container { 555 width: 100%; 556 gap: var(--wui-spacing-xs); 557 } 558 559 .action-buttons-container > button { 560 display: flex; 561 align-items: center; 562 justify-content: center; 563 background: transparent; 564 height: 48px; 565 border-radius: var(--wui-border-radius-xs); 566 border: none; 567 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 568 } 569 570 .action-buttons-container > button:disabled { 571 opacity: 0.8; 572 cursor: not-allowed; 573 } 574 575 .action-button > wui-loading-spinner { 576 display: inline-block; 577 } 578 579 .cancel-button:hover, 580 .action-button:hover { 581 cursor: pointer; 582 } 583 584 .action-buttons-container > wui-button.cancel-button { 585 flex: 2; 586 } 587 588 .action-buttons-container > wui-button.action-button { 589 flex: 4; 590 } 591 592 .action-buttons-container > button.action-button > wui-text { 593 color: white; 594 } 595 596 .details-container > wui-flex { 597 background: var(--wui-color-gray-glass-002); 598 border-radius: var(--wui-border-radius-xxs); 599 width: 100%; 600 } 601 602 .details-container > wui-flex > button { 603 border: none; 604 background: none; 605 padding: var(--wui-spacing-s); 606 border-radius: var(--wui-border-radius-xxs); 607 transition: background 0.2s linear; 608 } 609 610 .details-container > wui-flex > button:hover { 611 background: var(--wui-color-gray-glass-002); 612 } 613 614 .details-content-container { 615 padding: var(--wui-spacing-1xs); 616 display: flex; 617 align-items: center; 618 justify-content: center; 619 } 620 621 .details-content-container > wui-flex { 622 width: 100%; 623 } 624 625 .details-row { 626 width: 100%; 627 padding: var(--wui-spacing-s) var(--wui-spacing-xl); 628 border-radius: var(--wui-border-radius-xxs); 629 background: var(--wui-color-gray-glass-002); 630 } 631`;var R=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let E=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=u.GN.state.approvalTransaction,this.swapTransaction=u.GN.state.swapTransaction,this.sourceToken=u.GN.state.sourceToken,this.sourceTokenAmount=u.GN.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=u.GN.state.sourceTokenPriceInUSD,this.toToken=u.GN.state.toToken,this.toTokenAmount=u.GN.state.toTokenAmount??"",this.toTokenPriceInUSD=u.GN.state.toTokenPriceInUSD,this.caipNetwork=l.W.state.activeCaipNetwork,this.balanceSymbol=s.U.state.balanceSymbol,this.inputError=u.GN.state.inputError,this.loadingQuote=u.GN.state.loadingQuote,this.loadingApprovalTransaction=u.GN.state.loadingApprovalTransaction,this.loadingBuildTransaction=u.GN.state.loadingBuildTransaction,this.loadingTransaction=u.GN.state.loadingTransaction,this.unsubscribe.push(s.U.subscribeKey("balanceSymbol",t=>{this.balanceSymbol!==t&&a.I.goBack()}),l.W.subscribeKey("activeCaipNetwork",t=>{this.caipNetwork!==t&&(this.caipNetwork=t)}),u.GN.subscribe(t=>{this.approvalTransaction=t.approvalTransaction,this.swapTransaction=t.swapTransaction,this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.sourceTokenAmount=t.sourceTokenAmount??"",this.toTokenAmount=t.toTokenAmount??"",this.inputError=t.inputError,t.inputError&&a.I.goBack(),this.loadingQuote=t.loadingQuote,this.loadingApprovalTransaction=t.loadingApprovalTransaction,this.loadingBuildTransaction=t.loadingBuildTransaction,this.loadingTransaction=t.loadingTransaction}))}firstUpdated(){u.GN.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(t=>t?.()),clearInterval(this.interval)}render(){return o.qy` 632 <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s"> 633 ${this.templateSwap()} 634 </wui-flex> 635 `}refreshTransaction(){this.interval=setInterval(()=>{u.GN.getApprovalLoadingState()||u.GN.getTransaction()},1e4)}templateSwap(){const t=`${r.S.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${this.sourceToken?.symbol}`,e=`${r.S.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${this.toToken?.symbol}`,i=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,n=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,a=r.S.formatNumberToLocalString(i),s=r.S.formatNumberToLocalString(n),l=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return o.qy` 636 <wui-flex flexDirection="column" alignItems="center" gap="l"> 637 <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="l"> 638 <wui-flex 639 class="preview-token-details-container" 640 alignItems="center" 641 justifyContent="space-between" 642 gap="l" 643 > 644 <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs"> 645 <wui-text variant="small-400" color="fg-150">Send</wui-text> 646 <wui-text variant="paragraph-400" color="fg-100">$${a}</wui-text> 647 </wui-flex> 648 <wui-token-button 649 flexDirection="row-reverse" 650 text=${t} 651 imageSrc=${this.sourceToken?.logoUri} 652 > 653 </wui-token-button>
653 654 </wui-flex> 655 <wui-icon name="recycleHorizontal" color="fg-200" size="md"></wui-icon> 656 <wui-flex 657 class="preview-token-details-container" 658 alignItems="center" 659 justifyContent="space-between" 660 gap="l" 661 > 662 <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs"> 663 <wui-text variant="small-400" color="fg-150">Receive</wui-text> 664 <wui-text variant="paragraph-400" color="fg-100">$${s}</wui-text> 665 </wui-flex> 666 <wui-token-button 667 flexDirection="row-reverse" 668 text=${e} 669 imageSrc=${this.toToken?.logoUri} 670 > 671 </wui-token-button> 672 </wui-flex> 673 </wui-flex> 674 675 ${this.templateDetails()} 676 677 <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="xs"> 678 <wui-icon size="sm" color="fg-200" name="infoCircle"></wui-icon> 679 <wui-text variant="small-400" color="fg-200">Review transaction carefully</wui-text> 680 </wui-flex> 681 682 <wui-flex 683 class="action-buttons-container" 684 flexDirection="row" 685 alignItems="center" 686 justifyContent="space-between" 687 gap="xs" 688 > 689 <wui-button 690 class="cancel-button" 691 fullWidth 692 size="lg" 693 borderRadius="xs" 694 variant="neutral" 695 @click=${this.onCancelTransaction.bind(this)} 696 > 697 <wui-text variant="paragraph-600" color="fg-200">Cancel</wui-text> 698 </wui-button> 699 <wui-button 700 class="action-button" 701 fullWidth 702 size="lg" 703 borderRadius="xs" 704 variant="main" 705 ?loading=${l} 706 ?disabled=${l} 707 @click=${this.onSendTransaction.bind(this)} 708 > 709 <wui-text variant="paragraph-600" color="inverse-100"> 710 ${this.actionButtonLabel()} 711 </wui-text> 712 </wui-button> 713 </wui-flex> 714 </wui-flex> 715 `}templateDetails(){return this.sourceToken&&this.toToken&&!this.inputError?o.qy`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`:null}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){a.I.goBack()}onSendTransaction(){this.approvalTransaction?u.GN.sendTransactionForApproval(this.approvalTransaction):u.GN.sendTransactionForSwap(this.swapTransaction)}};E.styles=D,R([(0,n.wk)()],E.prototype,"interval",void 0),R([(0,n.wk)()],E.prototype,"detailsOpen",void 0),R([(0,n.wk)()],E.prototype,"approvalTransaction",void 0),R([(0,n.wk)()],E.prototype,"swapTransaction",void 0),R([(0,n.wk)()],E.prototype,"sourceToken",void 0),R([(0,n.wk)()],E.prototype,"sourceTokenAmount",void 0),R([(0,n.wk)()],E.prototype,"sourceTokenPriceInUSD",void 0),R([(0,n.wk)()],E.prototype,"toToken",void 0),R([(0,n.wk)()],E.prototype,"toTokenAmount",void 0),R([(0,n.wk)()],E.prototype,"toTokenPriceInUSD",void 0),R([(0,n.wk)()],E.prototype,"caipNetwork",void 0),R([(0,n.wk)()],E.prototype,"balanceSymbol",void 0),R([(0,n.wk)()],E.prototype,"inputError",void 0),R([(0,n.wk)()],E.prototype,"loadingQuote",void 0),R([(0,n.wk)()],E.prototype,"loadingApprovalTransaction",void 0),R([(0,n.wk)()],E.prototype,"loadingBuildTransaction",void 0),R([(0,n.wk)()],E.prototype,"loadingTransaction",void 0),E=R([(0,h.EM)("w3m-swap-preview-view")],E),i(36995),i(18166),i(32997),i(66215),i(90469);var G=i(91335),j=i(76240);const z=o.AH` 716 :host { 717 height: 60px; 718 min-height: 60px; 719 } 720 721 :host > wui-flex { 722 cursor: pointer; 723 height: 100%; 724 display: flex; 725 column-gap: var(--wui-spacing-s); 726 padding: var(--wui-spacing-xs); 727 padding-right: var(--wui-spacing-l); 728 width: 100%; 729 background-color: transparent; 730 border-radius: var(--wui-border-radius-xs); 731 color: var(--wui-color-fg-250); 732 transition: 733 background-color var(--wui-ease-out-power-1) var(--wui-duration-lg), 734 opacity var(--wui-ease-out-power-1) var(--wui-duration-lg); 735 will-change: background-color, opacity; 736 } 737 738 @media (hover: hover) and (pointer: fine) { 739 :host > wui-flex:hover { 740 background-color: var(--wui-color-gray-glass-002); 741 } 742 743 :host > wui-flex:active { 744 background-color: var(--wui-color-gray-glass-005); 745 } 746 } 747 748 :host([disabled]) > wui-flex { 749 opacity: 0.6; 750 } 751 752 :host([disabled]) > wui-flex:hover { 753 background-color: transparent; 754 } 755 756 :host > wui-flex > wui-flex { 757 flex: 1; 758 } 759 760 :host > wui-flex > wui-image, 761 :host > wui-flex > .token-item-image-placeholder { 762 width: 40px; 763 max-width: 40px; 764 height: 40px; 765 border-radius: var(--wui-border-radius-3xl); 766 position: relative; 767 } 768 769 :host > wui-flex > .token-item-image-placeholder { 770 display: flex; 771 align-items: center; 772 justify-content: center; 773 } 774 775 :host > wui-flex > wui-image::after, 776 :host > wui-flex > .token-item-image-placeholder::after { 777 position: absolute; 778 content: ''; 779 inset: 0; 780 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 781 border-radius: var(--wui-border-radius-l); 782 } 783 784 button > wui-icon-box[data-variant='square-blue'] { 785 border-radius: var(--wui-border-radius-3xs); 786 position: relative; 787 border: none; 788 width: 36px; 789 height: 36px; 790 } 791`;
791var M=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let O=class extends o.WF{constructor(){super(),this.observer=new IntersectionObserver(()=>{}),this.imageSrc=void 0,this.name=void 0,this.symbol=void 0,this.price=void 0,this.amount=void 0,this.visible=!1,this.imageError=!1,this.observer=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.visible=!0:this.visible=!1})},{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}render(){if(!this.visible)return null;const t=this.amount&&this.price?r.S.multiply(this.price,this.amount)?.toFixed(3):null;return o.qy` 792 <wui-flex alignItems="center"> 793 ${this.visualTemplate()} 794 <wui-flex flexDirection="column" gap="3xs"> 795 <wui-flex justifyContent="space-between"> 796 <wui-text variant="paragraph-500" color="fg-100" lineClamp="1">${this.name}</wui-text> 797 ${t?o.qy` 798 <wui-text variant="paragraph-500" color="fg-100"> 799 $${r.S.formatNumberToLocalString(t,3)} 800 </wui-text> 801 `:null} 802 </wui-flex> 803 <wui-flex justifyContent="space-between"> 804 <wui-text variant="small-400" color="fg-200" lineClamp="1">${this.symbol}</wui-text> 805 ${this.amount?o.qy`<wui-text variant="small-400" color="fg-200"> 806 ${r.S.formatNumberToLocalString(this.amount,5)} 807 </wui-text>`:null} 808 </wui-flex> 809 </wui-flex> 810 </wui-flex> 811 `}visualTemplate(){return this.imageError?o.qy`<wui-flex class="token-item-image-placeholder"> 812 <wui-icon name="image" color="inherit"></wui-icon> 813 </wui-flex>`:this.imageSrc?o.qy`<wui-image 814 width="40" 815 height="40" 816 src=${this.imageSrc} 817 @onLoadError=${this.imageLoadError} 818 ></wui-image>`:null}imageLoadError(){this.imageError=!0}};O.styles=[G.W5,G.fD,z],M([(0,n.MZ)()],O.prototype,"imageSrc",void 0),M([(0,n.MZ)()],O.prototype,"name",void 0),M([(0,n.MZ)()],O.prototype,"symbol",void 0),M([(0,n.MZ)()],O.prototype,"price",void 0),M([(0,n.MZ)()],O.prototype,"amount",void 0),M([(0,n.wk)()],O.prototype,"visible",void 0),M([(0,n.wk)()],O.prototype,"imageError",void 0),O=M([(0,j.E)("wui-token-list-item")],O),i(31963);const U=o.AH` 819 :host > wui-flex:first-child { 820 column-gap: var(--wui-spacing-s); 821 padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs); 822 width: 100%; 823 } 824 825 wui-flex { 826 display: flex; 827 flex: 1; 828 } 829`;let L=class extends o.WF{render(){return o.qy` 830 <wui-flex alignItems="center"> 831 <wui-shimmer width="40px" height="40px"></wui-shimmer> 832 <wui-flex flexDirection="column" gap="2xs"> 833 <wui-shimmer width="72px" height="16px" borderRadius="4xs"></wui-shimmer> 834 <wui-shimmer width="148px" height="14px" borderRadius="4xs"></wui-shimmer> 835 </wui-flex> 836 <wui-flex flexDirection="column" gap="2xs" alignItems="flex-end"> 837 <wui-shimmer width="24px" height="12px" borderRadius="4xs"></wui-shimmer> 838 <wui-shimmer width="32px" height="12px" borderRadius="4xs"></wui-shimmer> 839 </wui-flex> 840 </wui-flex> 841 `}};L.styles=[G.W5,U],L=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a}([(0,j.E)("wui-token-list-item-loader")],L);const q=o.AH` 842 :host { 843 --tokens-scroll--top-opacity: 0; 844 --tokens-scroll--bottom-opacity: 1; 845 --suggested-tokens-scroll--left-opacity: 0; 846 --suggested-tokens-scroll--right-opacity: 1; 847 } 848 849 :host > wui-flex:first-child { 850 overflow-y: hidden; 851 overflow-x: hidden; 852 scrollbar-width: none; 853 scrollbar-height: none; 854 } 855 856 :host > wui-flex:first-child::-webkit-scrollbar {
857 display: none; 858 } 859 860 wui-loading-hexagon { 861 position: absolute; 862 } 863 864 .suggested-tokens-container { 865 overflow-x: auto; 866 mask-image: linear-gradient( 867 to right, 868 rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 0px, 869 rgba(200, 200, 200, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 1px, 870 black 50px, 871 black 90px, 872 black calc(100% - 90px), 873 black calc(100% - 50px), 874 rgba(155, 155, 155, calc(1 - var(--suggested-tokens-scroll--right-opacity))) calc(100% - 1px), 875 rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--right-opacity))) 100% 876 ); 877 } 878 879 .suggested-tokens-container::-webkit-scrollbar { 880 display: none; 881 } 882 883 .tokens-container { 884 border-top: 1px solid var(--wui-color-gray-glass-005); 885 height: 100%; 886 max-height: 390px; 887 } 888 889 .tokens { 890 width: 100%; 891 overflow-y: auto; 892 mask-image: linear-gradient( 893 to bottom, 894 rgba(0, 0, 0, calc(1 - var(--tokens-scroll--top-opacity))) 0px, 895 rgba(200, 200, 200, calc(1 - var(--tokens-scroll--top-opacity))) 1px, 896 black 50px, 897 black 90px, 898 black calc(100% - 90px), 899 black calc(100% - 50px), 900 rgba(155, 155, 155, calc(1 - var(--tokens-scroll--bottom-opacity))) calc(100% - 1px), 901 rgba(0, 0, 0, calc(1 - var(--tokens-scroll--bottom-opacity))) 100% 902 ); 903 } 904 905 .network-search-input, 906 .select-network-button { 907 height: 40px; 908 } 909 910 .select-network-button { 911 border: none; 912 display: flex; 913 flex-direction: row; 914 align-items: center; 915 justify-content: center; 916 gap: var(--wui-spacing-xs); 917 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 918 background-color: transparent; 919 border-radius: var(--wui-border-radius-xxs); 920 padding: var(--wui-spacing-xs); 921 align-items: center; 922 transition: background-color 0.2s linear; 923 } 924 925 .select-network-button:hover { 926 background-color: var(--wui-color-gray-glass-002); 927 } 928 929 .select-network-button > wui-image { 930 width: 26px; 931 height: 26px; 932 border-radius: var(--wui-border-radius-xs); 933 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 934 } 935`;var W=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let B=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.targetToken=a.I.state.data?.target,this.sourceToken=u.GN.state.sourceToken,this.sourceTokenAmount=u.GN.state.sourceTokenAmount,this.toToken=u.GN.state.toToken,this.myTokensWithBalance=u.GN.state.myTokensWithBalance,this.popularTokens=u.GN.state.popularTokens,this.suggestedTokens=u.GN.state.suggestedTokens,this.tokensLoading=u.GN.state.tokensLoading,this.searchValue="",this.unsubscribe.push(u.GN.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.myTokensWithBalance=t.myTokensWithBalance,this.popularTokens=t.popularTokens,this.suggestedTokens=t.suggestedTokens,this.tokensLoading=t.tokensLoading}))}async firstUpdated(){await u.GN.getTokenList()}updated(){const t=this.renderRoot?.querySelector(".suggested-tokens-container");t?.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));const e=this.renderRoot?.querySelector(".tokens");e?.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){super.disconnectedCallback();const t=this.renderRoot?.querySelector(".suggested-tokens-container"),e=this.renderRoot?.querySelector(".tokens");t?.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),e?.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return o.qy` 936 <wui-flex flexDirection="column" gap="s"> 937 ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()} 938 </wui-flex> 939 `}onSelectToken(t){"sourceToken"===this.targetToken?u.GN.setSourceToken(t):(u.GN.setToToken(t),this.sourceToken&&this.sourceTokenAmount&&u.GN.swapTokens()),a.I.goBack()}templateSearchInput(){return o.qy` 940 <wui-flex .padding=${["3xs","s","0","s"]} gap="xs"> 941 <wui-input-text 942 data-testid="swap-select-token-search-input" 943 class="network-search-input" 944 size="sm" 945 placeholder="Search token" 946 icon="search" 947 .value=${this.searchValue} 948 @inputChange=${this.onSearchInputChange.bind(this)} 949 ></wui-input-text> 950 </wui-flex> 951 `}templateMyTokens(){const t=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],e=this.filterTokensWithText(t,this.searchValue);return e?.length>0?o.qy`<wui-flex justifyContent="flex-start" padding="s"> 952 <wui-text variant="paragraph-500" color="fg-200">Your tokens</wui-text> 953 </wui-flex> 954 ${e.map(t=>{const e=t.symbol===this.sourceToken?.symbol||t.symbol===this.toToken?.symbol;return o.qy` 955 <wui-token-list-item 956 data-testid="swap-select-token-item-${t.symbol}" 957 name=${t.name} 958 ?disabled=${e} 959 symbol=${t.symbol} 960 price=${t?.price} 961 amount=${t?.quantity?.numeric} 962 imageSrc=${t.logoUri} 963 @click=${()=>{e||this.onSelectToken(t)}} 964 > 965 </wui-token-list-item> 966 `})}`:null}templateAllTokens(){const t=this.popularTokens?this.popularTokens:[],e=this.filterTokensWithText(t,this.searchValue);return this.tokensLoading?o.qy` 967 <wui-token-list-item-loader></wui-token-list-item-loader> 968 <wui-token-list-item-loader></wui-token-list-item-loader> 969 <wui-token-list-item-loader></wui-token-list-item-loader> 970 <wui-token-list-item-loader></wui-token-list-item-loader> 971 <wui-token-list-item-loader></wui-token-list-item-loader> 972 `:e?.length>0?o.qy` 973 ${e.map(t=>o.qy` 974 <wui-token-list-item 975 data-testid="swap-select-token-item-${t.symbol}" 976 name=${t.name} 977 symbol=${t.symbol} 978 imageSrc=${t.logoUri} 979 @click=${()=>this.onSelectToken(t)} 980 > 981 </wui-token-list-item> 982 `)} 983 `:null}templateTokens(){return o.qy` 984 <wui-flex class="tokens-container"> 985 <wui-flex class="tokens" .padding=${["0","s","s","s"]} flexDirection="column"> 986 ${this.templateMyTokens()} 987 <wui-flex justifyContent="flex-start" padding="s"> 988 <wui-text variant="paragraph-500" color="fg-200">Tokens</wui-text> 989 </wui-flex> 990 ${this.templateAllTokens()} 991 </wui-flex> 992 </wui-flex> 993 `}templateSuggestedTokens(){const t=this.suggestedTokens?this.suggestedTokens.slice(0,8):null;return this.tokensLoading?o.qy` 994 <wui-flex class="suggested-tokens-container" .padding=${["0","s","0","s"]} gap="xs"> 995 <wui-token-button loading></wui-token-button>
995 996 <wui-token-button loading></wui-token-button> 997 <wui-token-button loading></wui-token-button> 998 <wui-token-button loading></wui-token-button> 999 <wui-token-button loading></wui-token-button> 1000 </wui-flex> 1001 `:t?o.qy` 1002 <wui-flex class="suggested-tokens-container" .padding=${["0","s","0","s"]} gap="xs"> 1003 ${t.map(t=>o.qy` 1004 <wui-token-button 1005 text=${t.symbol} 1006 imageSrc=${t.logoUri} 1007 @click=${()=>this.onSelectToken(t)} 1008 > 1009 </wui-token-button> 1010 `)} 1011 </wui-flex> 1012 `:null}onSearchInputChange(t){this.searchValue=t.detail}handleSuggestedTokensScroll(){const t=this.renderRoot?.querySelector(".suggested-tokens-container");t&&(t.style.setProperty("--suggested-tokens-scroll--left-opacity",h.z8.interpolate([0,100],[0,1],t.scrollLeft).toString()),t.style.setProperty("--suggested-tokens-scroll--right-opacity",h.z8.interpolate([0,100],[0,1],t.scrollWidth-t.scrollLeft-t.offsetWidth).toString()))}handleTokenListScroll(){const t=this.renderRoot?.querySelector(".tokens");t&&(t.style.setProperty("--tokens-scroll--top-opacity",h.z8.interpolate([0,100],[0,1],t.scrollTop).toString()),t.style.setProperty("--tokens-scroll--bottom-opacity",h.z8.interpolate([0,100],[0,1],t.scrollHeight-t.scrollTop-t.offsetHeight).toString()))}filterTokensWithText(t,e){return t.filter(t=>`${t.symbol} ${t.name} ${t.address}`.toLowerCase().includes(e.toLowerCase())).sort((t,i)=>{const o=`${t.symbol} ${t.name} ${t.address}`.toLowerCase(),n=`${i.symbol} ${i.name} ${i.address}`.toLowerCase();return o.indexOf(e.toLowerCase())-n.indexOf(e.toLowerCase())})}};B.styles=q,W([(0,n.wk)()],B.prototype,"interval",void 0),W([(0,n.wk)()],B.prototype,"targetToken",void 0),W([(0,n.wk)()],B.prototype,"sourceToken",void 0),W([(0,n.wk)()],B.prototype,"sourceTokenAmount",void 0),W([(0,n.wk)()],B.prototype,"toToken",void 0),W([(0,n.wk)()],B.prototype,"myTokensWithBalance",void 0),W([(0,n.wk)()],B.prototype,"popularTokens",void 0),W([(0,n.wk)()],B.prototype,"suggestedTokens",void 0),W([(0,n.wk)()],B.prototype,"tokensLoading",void 0),W([(0,n.wk)()],B.prototype,"searchValue",void 0),B=W([(0,h.EM)("w3m-swap-select-token-view")],B)},68875:(t,e,i)=>{var o=i(68032),n=i(97793),r=i(35368),a=i(70262),s=i(61234),l=i(93710);const u=o.AH` 1013 :host { 1014 width: 100%; 1015 display: block; 1016 } 1017`;var c=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let p=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.text="",this.open=r.I.state.open,this.unsubscribe.push(a.I.subscribeKey("view",()=>{r.I.hide()}),s.W.subscribeKey("open",t=>{t||r.I.hide()}),r.I.subscribeKey("open",t=>{this.open=t}))}disconnectedCallback(){this.unsubscribe.forEach(t=>t()),r.I.hide()}render(){return o.qy` 1018 <div 1019 @pointermove=${this.onMouseEnter.bind(this)} 1020 @pointerleave=${this.onMouseLeave.bind(this)} 1021 > 1022 ${this.renderChildren()} 1023 </div> 1024 `}renderChildren(){return o.qy`<slot></slot> `}onMouseEnter(){const t=this.getBoundingClientRect();this.open||r.I.showTooltip({message:this.text,triggerRect:{width:t.width,height:t.height,left:t.left,top:t.top},variant:"shade"})}onMouseLeave(t){this.contains(t.relatedTarget)||r.I.hide()}};p.styles=[u],c([(0,n.MZ)()],p.prototype,"text",void 0),c([(0,n.wk)()],p.prototype,"open",void 0),p=c([(0,l.EM)("w3m-tooltip-trigger")],p)},94592:(t,e,i)=>{var o=i(68032),n=i(97793),r=i(35368),a=i(93710);i(12924),i(70674),i(22548);const s=o.AH` 1025 :host { 1026 pointer-events: none; 1027 } 1028 1029 :host > wui-flex { 1030 display: var(--w3m-tooltip-display); 1031 opacity: var(--w3m-tooltip-opacity); 1032 padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s); 1033 border-radius: var(--wui-border-radius-xxs); 1034 color: var(--wui-color-bg-100); 1035 position: fixed; 1036 top: var(--w3m-tooltip-top); 1037 left: var(--w3m-tooltip-left); 1038 transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px)); 1039 max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl)); 1040 transition: opacity 0.2s var(--wui-ease-out-power-2); 1041 will-change: opacity; 1042 } 1043 1044 :host([data-variant='shade']) > wui-flex { 1045 background-color: var(--wui-color-bg-150); 1046 border: 1px solid var(--wui-color-gray-glass-005); 1047 } 1048 1049 :host([data-variant='shade']) > wui-flex > wui-text { 1050 color: var(--wui-color-fg-150); 1051 } 1052 1053 :host([data-variant='fill']) > wui-flex { 1054 background-color: var(--wui-color-fg-100); 1055 border: none; 1056 } 1057 1058 wui-icon { 1059 position: absolute; 1060 width: 12px !important; 1061 height: 4px !important; 1062 color: var(--wui-color-bg-150); 1063 } 1064 1065 wui-icon[data-placement='top'] { 1066 bottom: 0px; 1067 left: 50%; 1068 transform: translate(-50%, 95%); 1069 } 1070 1071 wui-icon[data-placement='bottom'] { 1072 top: 0; 1073 left: 50%; 1074 transform: translate(-50%, -95%) rotate(180deg); 1075 } 1076 1077 wui-icon[data-placement='right'] { 1078 top: 50%; 1079 left: 0; 1080 transform: translate(-65%, -50%) rotate(90deg); 1081 } 1082 1083 wui-icon[data-placement='left'] { 1084 top: 50%; 1085 right: 0%; 1086 transform: translate(65%, -50%) rotate(270deg); 1087 } 1088`;
1088var l=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let u=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.open=r.I.state.open,this.message=r.I.state.message,this.triggerRect=r.I.state.triggerRect,this.variant=r.I.state.variant,this.unsubscribe.push(r.I.subscribe(t=>{this.open=t.open,this.message=t.message,this.triggerRect=t.triggerRect,this.variant=t.variant}))}disconnectedCallback(){this.unsubscribe.forEach(t=>t())}render(){this.dataset.variant=this.variant;const t=this.triggerRect.top,e=this.triggerRect.left;return this.style.cssText=`\n --w3m-tooltip-top: ${t}px;\n --w3m-tooltip-left: ${e}px;\n --w3m-tooltip-parent-width: ${this.triggerRect.width/2}px;\n --w3m-tooltip-display: ${this.open?"flex":"none"};\n --w3m-tooltip-opacity: ${this.open?1:0};\n `,o.qy`<wui-flex> 1089 <wui-icon data-placement="top" color="fg-100" size="inherit" name="cursor"></wui-icon> 1090 <wui-text color="inherit" variant="small-500">${this.message}</wui-text> 1091 </wui-flex>`}};u.styles=[s],l([(0,n.wk)()],u.prototype,"open",void 0),l([(0,n.wk)()],u.prototype,"message",void 0),l([(0,n.wk)()],u.prototype,"triggerRect",void 0),l([(0,n.wk)()],u.prototype,"variant",void 0),u=l([(0,a.EM)("w3m-tooltip"),(0,a.EM)("w3m-tooltip")],u)},36995:(t,e,i)=>{i(47638)},36504:(t,e,i)=>{i(31963)},78328:(t,e,i)=>{var o=i(68032),n=i(97793),r=(i(32997),i(31963),i(66215),i(90469),i(91335)),a=i(76240);i(80721);const s=o.AH` 1092 :host { 1093 display: block; 1094 } 1095 1096 :host > button, 1097 :host > wui-flex { 1098 gap: var(--wui-spacing-xxs); 1099 padding: var(--wui-spacing-xs); 1100 padding-right: var(--wui-spacing-1xs); 1101 height: 40px; 1102 border-radius: var(--wui-border-radius-l); 1103 background: var(--wui-color-gray-glass-002); 1104 border-width: 0px; 1105 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002); 1106 } 1107 1108 :host > button wui-image { 1109 width: 24px; 1110 height: 24px; 1111 border-radius: var(--wui-border-radius-s); 1112 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 1113 } 1114`;var l=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let u=class extends o.WF{constructor(){super(...arguments),this.text="",this.loading=!1}render(){return this.loading?o.qy` <wui-flex alignItems="center" gap="xxs" padding="xs"> 1115 <wui-shimmer width="24px" height="24px"></wui-shimmer> 1116 <wui-shimmer width="40px" height="20px" borderRadius="4xs"></wui-shimmer> 1117 </wui-flex>`:o.qy` 1118 <button> 1119 ${this.tokenTemplate()} 1120 <wui-text variant="paragraph-600" color="fg-100">${this.text}</wui-text> 1121 </button> 1122 `}tokenTemplate(){return this.imageSrc?o.qy`<wui-image src=${this.imageSrc}></wui-image>`:o.qy` 1123 <wui-icon-box 1124 size="sm" 1125 iconColor="fg-200" 1126 backgroundColor="fg-300" 1127 icon="networkPlaceholder" 1128 ></wui-icon-box> 1129 `}};u.styles=[r.W5,r.fD,s],l([(0,n.MZ)()],u.prototype,"imageSrc",void 0),l([(0,n.MZ)()],u.prototype,"text",void 0),l([(0,n.MZ)({type:Boolean})],u.prototype,"loading",void 0),u=l([(0,a.E)("wui-token-button")],u)},31963:(t,e,i)=>{var o=i(68032),n=i(97793),r=i(76240);const a=o.AH` 1130 :host { 1131 display: block; 1132 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 1133 background: linear-gradient( 1134 120deg, 1135 var(--wui-color-bg-200) 5%, 1136 var(--wui-color-bg-200) 48%, 1137 var(--wui-color-bg-300) 55%, 1138 var(--wui-color-bg-300) 60%, 1139 var(--wui-color-bg-300) calc(60% + 10px), 1140 var(--wui-color-bg-200) calc(60% + 12px), 1141 var(--wui-color-bg-200) 100% 1142 ); 1143 background-size: 250%; 1144 animation: shimmer 3s linear infinite reverse; 1145 } 1146 1147 :host([variant='light']) { 1148 background: linear-gradient( 1149 120deg, 1150 var(--wui-color-bg-150) 5%, 1151 var(--wui-color-bg-150) 48%, 1152 var(--wui-color-bg-200) 55%, 1153 var(--wui-color-bg-200) 60%, 1154 var(--wui-color-bg-200) calc(60% + 10px), 1155 var(--wui-color-bg-150) calc(60% + 12px), 1156 var(--wui-color-bg-150) 100% 1157 ); 1158 background-size: 250%; 1159 } 1160 1161 @keyframes shimmer { 1162 from { 1163 background-position: -250% 0; 1164 } 1165 to { 1166 background-position: 250% 0; 1167 } 1168 } 1169`;
1169var s=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let l=class extends o.WF{constructor(){super(...arguments),this.width="",this.height="",this.borderRadius="m",this.variant="default"}render(){return this.style.cssText=`\n width: ${this.width};\n height: ${this.height};\n border-radius: clamp(0px,var(--wui-border-radius-${this.borderRadius}), 40px);\n `,o.qy`<slot></slot>`}};l.styles=[a],s([(0,n.MZ)()],l.prototype,"width",void 0),s([(0,n.MZ)()],l.prototype,"height",void 0),s([(0,n.MZ)()],l.prototype,"borderRadius",void 0),s([(0,n.MZ)()],l.prototype,"variant",void 0),l=s([(0,r.E)("wui-shimmer")],l)},47638:(t,e,i)=>{var o=i(68032),n=i(97793),r=i(52858),a=i(18529),s=i(74128),l=(i(18166),i(91335)),u=i(76240);const c=o.AH` 1170 :host { 1171 position: relative; 1172 width: 100%; 1173 display: inline-block; 1174 color: var(--wui-color-fg-275); 1175 } 1176 1177 input { 1178 width: 100%; 1179 border-radius: var(--wui-border-radius-xs); 1180 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002); 1181 background: var(--wui-color-gray-glass-002); 1182 font-size: var(--wui-font-size-paragraph); 1183 letter-spacing: var(--wui-letter-spacing-paragraph); 1184 color: var(--wui-color-fg-100); 1185 transition: 1186 background-color var(--wui-ease-inout-power-1) var(--wui-duration-md), 1187 border-color var(--wui-ease-inout-power-1) var(--wui-duration-md), 1188 box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md); 1189 will-change: background-color, border-color, box-shadow; 1190 caret-color: var(--wui-color-accent-100); 1191 } 1192 1193 input:disabled { 1194 cursor: not-allowed; 1195 border: 1px solid var(--wui-color-gray-glass-010); 1196 } 1197 1198 input:disabled::placeholder, 1199 input:disabled + wui-icon { 1200 color: var(--wui-color-fg-300); 1201 } 1202 1203 input::placeholder { 1204 color: var(--wui-color-fg-275); 1205 } 1206 1207 input:focus:enabled { 1208 background-color: var(--wui-color-gray-glass-005); 1209 -webkit-box-shadow: 1210 inset 0 0 0 1px var(--wui-color-accent-100), 1211 0px 0px 0px 4px var(--wui-box-shadow-blue); 1212 -moz-box-shadow: 1213 inset 0 0 0 1px var(--wui-color-accent-100), 1214 0px 0px 0px 4px var(--wui-box-shadow-blue); 1215 box-shadow: 1216 inset 0 0 0 1px var(--wui-color-accent-100), 1217 0px 0px 0px 4px var(--wui-box-shadow-blue); 1218 } 1219 1220 input:hover:enabled { 1221 background-color: var(--wui-color-gray-glass-005); 1222 } 1223 1224 wui-icon { 1225 position: absolute; 1226 top: 50%; 1227 transform: translateY(-50%); 1228 pointer-events: none; 1229 } 1230 1231 .wui-size-sm { 1232 padding: 9px var(--wui-spacing-m) 10px var(--wui-spacing-s); 1233 } 1234 1235 wui-icon + .wui-size-sm { 1236 padding: 9px var(--wui-spacing-m) 10px 36px; 1237 } 1238 1239 wui-icon[data-input='sm'] { 1240 left: var(--wui-spacing-s); 1241 } 1242 1243 .wui-size-md { 1244 padding: 15px var(--wui-spacing-m) var(--wui-spacing-l) var(--wui-spacing-m); 1245 } 1246 1247 wui-icon + .wui-size-md, 1248 wui-loading-spinner + .wui-size-md { 1249 padding: 10.5px var(--wui-spacing-3xl) 10.5px var(--wui-spacing-3xl); 1250 } 1251 1252 wui-icon[data-input='md'] { 1253 left: var(--wui-spacing-l); 1254 } 1255 1256 .wui-size-lg { 1257 padding: var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-l); 1258 letter-spacing: var(--wui-letter-spacing-medium-title); 1259 font-size: var(--wui-font-size-medium-title); 1260 font-weight: var(--wui-font-weight-light); 1261 line-height: 130%; 1262 color: var(--wui-color-fg-100); 1263 height: 64px; 1264 } 1265 1266 .wui-padding-right-xs { 1267 padding-right: var(--wui-spacing-xs); 1268 } 1269 1270 .wui-padding-right-s { 1271 padding-right: var(--wui-spacing-s); 1272 } 1273 1274 .wui-padding-right-m { 1275 padding-right: var(--wui-spacing-m); 1276 } 1277 1278 .wui-padding-right-l { 1279 padding-right: var(--wui-spacing-l); 1280 } 1281 1282 .wui-padding-right-xl { 1283 padding-right: var(--wui-spacing-xl); 1284 } 1285 1286 .wui-padding-right-2xl { 1287 padding-right: var(--wui-spacing-2xl); 1288 } 1289 1290 .wui-padding-right-3xl { 1291 padding-right: var(--wui-spacing-3xl); 1292 } 1293 1294 .wui-padding-right-4xl { 1295 padding-right: var(--wui-spacing-4xl); 1296 } 1297 1298 .wui-padding-right-5xl { 1299 padding-right: var(--wui-spacing-5xl); 1300 } 1301 1302 wui-icon + .wui-size-lg, 1303 wui-loading-spinner + .wui-size-lg { 1304 padding-left: 50px; 1305 } 1306 1307 wui-icon[data-input='lg'] { 1308 left: var(--wui-spacing-l); 1309 } 1310 1311 .wui-size-mdl { 1312 padding: 17.25px var(--wui-spacing-m) 17.25px var(--wui-spacing-m); 1313 } 1314 wui-icon + .wui-size-mdl, 1315 wui-loading-spinner + .wui-size-mdl { 1316 padding: 17.25px var(--wui-spacing-3xl) 17.25px 40px; 1317 } 1318 wui-icon[data-input='mdl'] { 1319 left: var(--wui-spacing-m); 1320 } 1321 1322 input:placeholder-shown ~ ::slotted(wui-input-element), 1323 input:placeholder-shown ~ ::slotted(wui-icon) { 1324 opacity: 0; 1325 pointer-events: none; 1326 } 1327 1328 input::-webkit-outer-spin-button, 1329 input::-webkit-inner-spin-button { 1330 -webkit-appearance: none; 1331 margin: 0; 1332 } 1333 1334 input[type='number'] { 1335 -moz-appearance: textfield; 1336 } 1337 1338 ::slotted(wui-input-element), 1339 ::slotted(wui-icon) { 1340 position: absolute; 1341 top: 50%; 1342 transform: translateY(-50%); 1343 } 1344 1345 ::slotted(wui-input-element) { 1346 right: var(--wui-spacing-m); 1347 } 1348 1349 ::slotted(wui-icon) { 1350 right: 0px; 1351 } 1352`;
1352var p=function(t,e,i,o){var n,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(r<3?n(a):r>3?n(e,i,a):n(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};let d=class extends o.WF{constructor(){super(...arguments),this.inputElementRef=(0,s._)(),this.size="md",this.disabled=!1,this.placeholder="",this.type="text",this.value=""}render(){const t=`wui-padding-right-${this.inputRightPadding}`,e=`wui-size-${this.size}`,i={[e]:!0,[t]:Boolean(this.inputRightPadding)};return o.qy`${this.templateIcon()} 1353 <input 1354 data-testid="wui-input-text" 1355 ${(0,s.K)(this.inputElementRef)} 1356 class=${(0,r.H)(i)} 1357 type=${this.type} 1358 enterkeyhint=${(0,a.J)(this.enterKeyHint)} 1359 ?disabled=${this.disabled} 1360 placeholder=${this.placeholder} 1361 @input=${this.dispatchInputChangeEvent.bind(this)} 1362 @keydown=${this.onKeyDown} 1363 .value=${this.value||""} 1364 tabindex=${(0,a.J)(this.tabIdx)} 1365 /> 1366 <slot></slot>`}templateIcon(){return this.icon?o.qy`<wui-icon 1367 data-input=${this.size} 1368 size=${this.size} 1369 color="inherit" 1370 name=${this.icon} 1371 ></wui-icon>`:null}dispatchInputChangeEvent(){this.dispatchEvent(new CustomEvent("inputChange",{detail:this.inputElementRef.value?.value,bubbles:!0,composed:!0}))}};d.styles=[l.W5,l.fD,c],p([(0,n.MZ)()],d.prototype,"size",void 0),p([(0,n.MZ)()],d.prototype,"icon",void 0),p([(0,n.MZ)({type:Boolean})],d.prototype,"disabled",void 0),p([(0,n.MZ)()],d.prototype,"placeholder",void 0),p([(0,n.MZ)()],d.prototype,"type",void 0),p([(0,n.MZ)()],d.prototype,"keyHint",void 0),p([(0,n.MZ)()],d.prototype,"value",void 0),p([(0,n.MZ)()],d.prototype,"inputRightPadding",void 0),p([(0,n.MZ)()],d.prototype,"tabIdx",void 0),p([(0,n.MZ)({attribute:!1})],d.prototype,"onKeyDown",void 0),d=p([(0,u.E)("wui-input-text")],d)}}]);
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.