1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4679],{325:(t,e,o)=>{var i=o(78860),r=o(5830),a=o(51015),n=o(13125),s=o(81885),l=o(67619);let c=(0,i.AH)` 2 :host { 3 width: 100%; 4 display: block; 5 } 6`;var u=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let p=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.text="",this.open=a.I.state.open,this.unsubscribe.push(n.I.subscribeKey("view",()=>{a.I.hide()}),s.W.subscribeKey("open",t=>{t||a.I.hide()}),a.I.subscribeKey("open",t=>{this.open=t}))}disconnectedCallback(){this.unsubscribe.forEach(t=>t()),a.I.hide()}render(){return(0,i.qy)` 7 <div 8 @pointermove=${this.onMouseEnter.bind(this)} 9 @pointerleave=${this.onMouseLeave.bind(this)} 10 > 11 ${this.renderChildren()} 12 </div> 13 `}renderChildren(){return(0,i.qy)`<slot></slot> `}onMouseEnter(){let t=this.getBoundingClientRect();this.open||a.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)||a.I.hide()}};p.styles=[c],u([(0,r.MZ)()],p.prototype,"text",void 0),u([(0,r.wk)()],p.prototype,"open",void 0),p=u([(0,l.EM)("w3m-tooltip-trigger")],p)},14679:(t,e,o)=>{o.r(e),o.d(e,{W3mSwapPreviewView:()=>G,W3mSwapSelectTokenView:()=>L,W3mSwapView:()=>D});var i=o(78860),r=o(5830),a=o(30389),n=o(13125),s=o(6219),l=o(84545),c=o(48436),u=o(72487),p=o(81885),d=o(54105),w=o(67619);o(5712),o(28459),o(75081),o(59223);var h=o(23666),g=o(3721);o(325),o(46714);let k=(0,i.AH)` 14 :host { 15 width: 100%; 16 } 17 18 .details-container > wui-flex { 19 background: var(--wui-color-gray-glass-002); 20 border-radius: var(--wui-border-radius-xxs); 21 width: 100%; 22 } 23 24 .details-container > wui-flex > button { 25 border: none; 26 background: none; 27 padding: var(--wui-spacing-s); 28 border-radius: var(--wui-border-radius-xxs); 29 cursor: pointer; 30 } 31 32 .details-content-container { 33 padding: var(--wui-spacing-1xs); 34 padding-top: 0px; 35 display: flex; 36 align-items: center; 37 justify-content: center; 38 } 39 40 .details-content-container > wui-flex { 41 width: 100%; 42 } 43 44 .details-row { 45 width: 100%; 46 padding: var(--wui-spacing-s); 47 padding-left: var(--wui-spacing-s); 48 padding-right: var(--wui-spacing-1xs); 49 border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs)); 50 background: var(--wui-color-gray-glass-002); 51 } 52 53 .details-row-title { 54 white-space: nowrap; 55 } 56 57 .details-row.provider-free-row { 58 padding-right: var(--wui-spacing-xs); 59 } 60`;var x=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let b=g.oU.CONVERT_SLIPPAGE_TOLERANCE,f=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.networkName=l.W.state.activeCaipNetwork?.name,this.detailsOpen=!1,this.sourceToken=c.GN.state.sourceToken,this.toToken=c.GN.state.toToken,this.toTokenAmount=c.GN.state.toTokenAmount,this.sourceTokenPriceInUSD=c.GN.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=c.GN.state.toTokenPriceInUSD,this.priceImpact=c.GN.state.priceImpact,this.maxSlippage=c.GN.state.maxSlippage,this.networkTokenSymbol=c.GN.state.networkTokenSymbol,this.inputError=c.GN.state.inputError,this.unsubscribe.push(c.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(){let t=this.toTokenAmount&&this.maxSlippage?a.S.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;let e=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return(0,i.qy)` 61 <wui-flex flexDirection="column" alignItems="center" gap="1xs" class="details-container"> 62 <wui-flex flexDirection="column"> 63 <button @click=${this.toggleDetails.bind(this)}> 64 <wui-flex justifyContent="space-between" .padding=${["0","xs","0","xs"]}> 65 <wui-flex justifyContent="flex-start" flexGrow="1" gap="xs"> 66 <wui-text variant="small-400" color="fg-100"> 67 1 ${this.sourceToken.symbol} = 68 ${w.Zv.formatNumberToLocalString(e,3)} 69 ${this.toToken.symbol} 70 </wui-text> 71 <wui-text variant="small-400" color="fg-200"> 72 $${w.Zv.formatNumberToLocalString(this.sourceTokenPriceInUSD)} 73 </wui-text> 74 </wui-flex> 75 <wui-icon name="chevronBottom"></wui-icon> 76 </wui-flex> 77 </button> 78 ${this.detailsOpen?(0,i.qy)` 79 <wui-flex flexDirection="column" gap="xs" class="details-content-container"> 80 ${this.priceImpact?(0,i.qy)` <wui-flex flexDirection="column" gap="xs"> 81 <wui-flex 82 justifyContent="space-between" 83 alignItems="center" 84 class="details-row" 85 > 86 <wui-flex alignItems="center" gap="xs"> 87 <wui-text class="details-row-title" variant="small-400" color="fg-150"> 88 Price impact 89 </wui-text> 90 <w3m-tooltip-trigger 91 text="Price impact reflects the change in market price due to your trade" 92 > 93 <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> 94 </w3m-tooltip-trigger> 95 </wui-flex> 96 <wui-flex> 97 <wui-text variant="small-400" color="fg-200"> 98 ${w.Zv.formatNumberToLocalString(this.priceImpact,3)}% 99 </wui-text> 100 </wui-flex> 101 </wui-flex> 102 </wui-flex>`:null} 103 ${this.maxSlippage&&this.sourceToken.symbol?(0,i.qy)`<wui-flex flexDirection="column" gap="xs"> 104 <wui-flex 105 justifyContent="space-between" 106 alignItems="center" 107 class="details-row" 108 > 109 <wui-flex alignItems="center" gap="xs"> 110 <wui-text class="details-row-title" variant="small-400" color="fg-150"> 111 Max. slippage 112 </wui-text> 113 <w3m-tooltip-trigger 114 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 ${w.Zv.formatNumberToLocalString(t,6)} ${this.toToken.symbol} due to price changes.`:""}`} 115 > 116 <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> 117 </w3m-tooltip-trigger> 118 </wui-flex> 119 <wui-flex> 120 <wui-text variant="small-400" color="fg-200"> 121 ${w.Zv.formatNumberToLocalString(this.maxSlippage,6)} 122 ${this.toToken.symbol} ${b}% 123 </wui-text> 124 </wui-flex> 125 </wui-flex> 126 </wui-flex>`:null} 127 <wui-flex flexDirection="column" gap="xs"> 128 <wui-flex 129 justifyContent="space-between" 130 alignItems="center" 131 class="details-row provider-free-row" 132 > 133 <wui-flex alignItems="center" gap="xs"> 134 <wui-text class="details-row-title" variant="small-400" color="fg-150"> 135 Provider fee 136 </wui-text> 137 </wui-flex> 138 <wui-flex> 139 <wui-text variant="small-400" color="fg-200">0.85%</wui-text> 140 </wui-flex> 141 </wui-flex> 142 </wui-flex> 143 </wui-flex> 144 `:null} 145 </wui-flex> 146 </wui-flex> 147 `}toggleDetails(){this.detailsOpen=!this.detailsOpen}};f.styles=[k],x([(0,r.wk)()],f.prototype,"networkName",void 0),x([(0,r.MZ)()],f.prototype,"detailsOpen",void 0),x([(0,r.wk)()],f.prototype,"sourceToken",void 0),x([(0,r.wk)()],f.prototype,"toToken",void 0),x([(0,r.wk)()],f.prototype,"toTokenAmount",void 0),x([(0,r.wk)()],f.prototype,"sourceTokenPriceInUSD",void 0),x([(0,r.wk)()],f.prototype,"toTokenPriceInUSD",void 0),x([(0,r.wk)()],f.prototype,"priceImpact",void 0),x([(0,r.wk)()],f.prototype,"maxSlippage",void 0),x([(0,r.wk)()],f.prototype,"networkTokenSymbol",void 0),x([(0,r.wk)()],f.prototype,"inputError",void 0),f=x([(0,w.EM)("w3m-swap-details")],f),o(27943);let m=(0,i.AH)` 148 :host { 149 width: 100%; 150 } 151 152 :host > wui-flex { 153 display: flex; 154 flex-direction: row; 155 justify-content: space-between; 156 align-items: center; 157 border-radius: var(--wui-border-radius-s); 158 padding: var(--wui-spacing-xl); 159 padding-right: var(--wui-spacing-s); 160 background-color: var(--wui-color-gray-glass-002); 161 box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002); 162 width: 100%; 163 height: 100px; 164 box-sizing: border-box; 165 position: relative; 166 } 167 168 wui-shimmer.market-value { 169 opacity: 0; 170 } 171 172 :host > wui-flex > svg.input_mask { 173 position: absolute; 174 inset: 0; 175 z-index: 5; 176 } 177 178 :host wui-flex .input_mask__border, 179 :host wui-flex .input_mask__background { 180 transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1); 181 will-change: fill; 182 } 183 184 :host wui-flex .input_mask__border { 185 fill: var(--wui-color-gray-glass-020); 186 } 187 188 :host wui-flex .input_mask__background { 189 fill: var(--wui-color-gray-glass-002); 190 } 191`;var v=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let y=class extends i.WF{constructor(){super(...arguments),this.target="sourceToken"}render(){return(0,i.qy)` 192 <wui-flex class justifyContent="space-between"> 193 <wui-flex 194 flex="1" 195 flexDirection="column" 196 alignItems="flex-start" 197 justifyContent="center" 198 class="swap-input" 199 gap="xxs" 200 > 201 <wui-shimmer width="80px" height="40px" borderRadius="xxs" variant="light"></wui-shimmer> 202 </wui-flex> 203 ${this.templateTokenSelectButton()} 204 </wui-flex> 205 `}templateTokenSelectButton(){return(0,i.qy)` 206 <wui-flex 207 class="swap-token-button" 208 flexDirection="column" 209 alignItems="flex-end" 210 justifyContent="center" 211 gap="xxs" 212 > 213 <wui-shimmer width="80px" height="40px" borderRadius="3xl" variant="light"></wui-shimmer> 214 </wui-flex> 215 `}};y.styles=[m],v([(0,r.MZ)()],y.prototype,"target",void 0),y=v([(0,w.EM)("w3m-swap-input-skeleton")],y);let T={numericInputKeyDown(t,e,o){let i=t.metaKey||t.ctrlKey,r=t.key,a=r.toLocaleLowerCase(),n=","===r,s="."===r,l=r>="0"&&r<="9";i||"a"!==a&&"c"!==a&&"v"!==a&&"x"!==a||t.preventDefault(),"0"!==e||n||s||"0"!==r||t.preventDefault(),"0"===e&&l&&(o(r),t.preventDefault()),(n||s)&&(e||(o("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(r)||s||n||t.preventDefault()}};o(61085);let S=(0,i.AH)` 216 :host > wui-flex { 217 display: flex; 218 flex-direction: row; 219 justify-content: space-between; 220 align-items: center; 221 border-radius: var(--wui-border-radius-s); 222 background-color: var(--wui-color-gray-glass-002); 223 padding: var(--wui-spacing-xl); 224 padding-right: var(--wui-spacing-s); 225 width: 100%; 226 height: 100px; 227 box-sizing: border-box; 228 box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002); 229 position: relative; 230 transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg); 231 will-change: background-color; 232 } 233 234 :host wui-flex.focus { 235 box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005); 236 } 237 238 :host > wui-flex .swap-input, 239 :host > wui-flex .swap-token-button { 240 z-index: 10; 241 } 242 243 :host > wui-flex .swap-input { 244 -webkit-mask-image: linear-gradient( 245 270deg, 246 transparent 0px, 247 transparent 8px, 248 black 24px, 249 black 25px, 250 black 32px, 251 black 100% 252 ); 253 mask-image: linear-gradient( 254 270deg, 255 transparent 0px, 256 transparent 8px, 257 black 24px, 258 black 25px, 259 black 32px, 260 black 100% 261 ); 262 } 263 264 :host > wui-flex .swap-input input { 265 background: none; 266 border: none; 267 height: 42px; 268 width: 100%; 269 font-size: 32px; 270 font-style: normal; 271 font-weight: 400; 272 line-height: 130%; 273 letter-spacing: -1.28px; 274 outline: none; 275 caret-color: var(--wui-color-accent-100); 276 color: var(--wui-color-fg-100); 277 padding: 0px; 278 } 279 280 :host > wui-flex .swap-input input:focus-visible { 281 outline: none; 282 } 283 284 :host > wui-flex .swap-input input::-webkit-outer-spin-button, 285 :host > wui-flex .swap-input input::-webkit-inner-spin-button { 286 -webkit-appearance: none; 287 margin: 0; 288 } 289 290 .max-value-button { 291 background-color: transparent; 292 border: none; 293 cursor: pointer; 294 color: var(--wui-color-gray-glass-020); 295 padding-left: 0px; 296 } 297 298 .market-value { 299 min-height: 18px; 300 } 301`;var $=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let N=class extends i.WF{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){let t=this.marketValue||"0",e=a.S.bigNumber(t).gt("0");return(0,i.qy)` 302 <wui-flex class="${this.focused?"focus":""}" justifyContent="space-between"> 303 <wui-flex 304 flex="1" 305 flexDirection="column" 306 alignItems="flex-start" 307 justifyContent="center" 308 class="swap-input" 309 > 310 <input 311 data-testid="swap-input-${this.target}" 312 @focusin=${()=>this.onFocusChange(!0)} 313 @focusout=${()=>this.onFocusChange(!1)} 314 ?disabled=${this.disabled} 315 .value=${this.value}
316 @input=${this.dispatchInputChangeEvent} 317 @keydown=${this.handleKeydown} 318 placeholder="0" 319 type="text" 320 inputmode="decimal" 321 /> 322 <wui-text class="market-value" variant="small-400" color="fg-200"> 323 ${e?`$${w.Zv.formatNumberToLocalString(this.marketValue,2)}`:null} 324 </wui-text> 325 </wui-flex> 326 ${this.templateTokenSelectButton()} 327 </wui-flex> 328 `}handleKeydown(t){return T.numericInputKeyDown(t,this.value,t=>this.onSetAmount?.(this.target,t))}dispatchInputChangeEvent(t){if(!this.onSetAmount)return;let 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?(0,i.qy)` 329 <wui-flex 330 class="swap-token-button" 331 flexDirection="column" 332 alignItems="flex-end" 333 justifyContent="center" 334 gap="xxs" 335 > 336 <wui-token-button 337 data-testid="swap-input-token-${this.target}" 338 text=${this.token.symbol} 339 imageSrc=${this.token.logoUri} 340 @click=${this.onSelectToken.bind(this)} 341 > 342 </wui-token-button> 343 <wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex> 344 </wui-flex> 345 `:(0,i.qy)` <wui-button 346 data-testid="swap-select-token-button-${this.target}" 347 class="swap-token-button" 348 size="md" 349 variant="accent" 350 @click=${this.onSelectToken.bind(this)} 351 > 352 Select token 353 </wui-button>`}tokenBalanceTemplate(){let t=a.S.multiply(this.balance,this.price),e=!!t&&t?.gt(5e-5);return(0,i.qy)` 354 ${e?(0,i.qy)`<wui-text variant="small-400" color="fg-200"> 355 ${w.Zv.formatNumberToLocalString(this.balance,2)} 356 </wui-text>`:null} 357 ${"sourceToken"===this.target?this.tokenActionButtonTemplate(e):null} 358 `}tokenActionButtonTemplate(t){return t?(0,i.qy)` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}> 359 <wui-text color="accent-100" variant="small-600">Max</wui-text> 360 </button>`:(0,i.qy)` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}> 361 <wui-text color="accent-100" variant="small-600">Buy</wui-text> 362 </button>`}onFocusChange(t){this.focused=t}onSelectToken(){d.E.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),n.I.push("SwapSelectToken",{target:this.target})}onBuyToken(){n.I.push("OnRampProviders")}};N.styles=[S],$([(0,r.MZ)()],N.prototype,"focused",void 0),$([(0,r.MZ)()],N.prototype,"balance",void 0),$([(0,r.MZ)()],N.prototype,"value",void 0),$([(0,r.MZ)()],N.prototype,"price",void 0),$([(0,r.MZ)()],N.prototype,"marketValue",void 0),$([(0,r.MZ)()],N.prototype,"disabled",void 0),$([(0,r.MZ)()],N.prototype,"target",void 0),$([(0,r.MZ)()],N.prototype,"token",void 0),$([(0,r.MZ)()],N.prototype,"onSetAmount",void 0),$([(0,r.MZ)()],N.prototype,"onSetMaxValue",void 0),N=$([(0,w.EM)("w3m-swap-input")],N);let I=(0,i.AH)` 363 :host > wui-flex:first-child { 364 overflow-y: auto; 365 overflow-x: hidden; 366 scrollbar-width: none; 367 } 368 369 :host > wui-flex:first-child::-webkit-scrollbar {
370 display: none; 371 } 372 373 wui-loading-hexagon { 374 position: absolute; 375 } 376 377 .action-button { 378 width: 100%; 379 border-radius: var(--wui-border-radius-xs); 380 } 381 382 .action-button:disabled { 383 border-color: 1px solid var(--wui-color-gray-glass-005); 384 } 385 386 .swap-inputs-container { 387 position: relative; 388 } 389 390 .replace-tokens-button-container { 391 display: flex; 392 justify-content: center; 393 align-items: center; 394 position: absolute; 395 top: 50%; 396 left: 50%; 397 transform: translate(-50%, -50%); 398 gap: var(--wui-spacing-1xs); 399 border-radius: var(--wui-border-radius-xs); 400 background-color: var(--wui-color-modal-bg-base); 401 padding: var(--wui-spacing-xxs); 402 } 403 404 .replace-tokens-button-container > button { 405 display: flex; 406 justify-content: center; 407 align-items: center; 408 height: 40px; 409 width: 40px; 410 padding: var(--wui-spacing-xs); 411 border: none; 412 border-radius: var(--wui-border-radius-xxs); 413 background: var(--wui-color-gray-glass-002); 414 transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1); 415 will-change: background-color; 416 z-index: 20; 417 } 418 419 .replace-tokens-button-container > button:hover { 420 background: var(--wui-color-gray-glass-005); 421 } 422 423 .details-container > wui-flex { 424 background: var(--wui-color-gray-glass-002); 425 border-radius: var(--wui-border-radius-xxs); 426 width: 100%; 427 } 428 429 .details-container > wui-flex > button { 430 border: none; 431 background: none; 432 padding: var(--wui-spacing-s); 433 border-radius: var(--wui-border-radius-xxs); 434 transition: background 0.2s linear; 435 } 436 437 .details-container > wui-flex > button:hover { 438 background: var(--wui-color-gray-glass-002); 439 } 440 441 .details-content-container { 442 padding: var(--wui-spacing-1xs); 443 display: flex; 444 align-items: center; 445 justify-content: center; 446 } 447 448 .details-content-container > wui-flex { 449 width: 100%; 450 } 451 452 .details-row { 453 width: 100%; 454 padding: var(--wui-spacing-s) var(--wui-spacing-xl); 455 border-radius: var(--wui-border-radius-xxs); 456 background: var(--wui-color-gray-glass-002); 457 } 458`;var A=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let D=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.initialParams=n.I.state.data?.swap,this.detailsOpen=!1,this.caipAddress=s.U.state.caipAddress,this.caipNetworkId=l.W.state.activeCaipNetwork?.caipNetworkId,this.initialized=c.GN.state.initialized,this.loadingQuote=c.GN.state.loadingQuote,this.loadingPrices=c.GN.state.loadingPrices,this.loadingTransaction=c.GN.state.loadingTransaction,this.sourceToken=c.GN.state.sourceToken,this.sourceTokenAmount=c.GN.state.sourceTokenAmount,this.sourceTokenPriceInUSD=c.GN.state.sourceTokenPriceInUSD,this.toToken=c.GN.state.toToken,this.toTokenAmount=c.GN.state.toTokenAmount,this.toTokenPriceInUSD=c.GN.state.toTokenPriceInUSD,this.inputError=c.GN.state.inputError,this.fetchError=c.GN.state.fetchError,this.onDebouncedGetSwapCalldata=u.w.debounce(async()=>{await c.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||c.GN.resetState()}),n.I.subscribeKey("view",t=>{t.includes("Swap")||c.GN.resetValues()}),c.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}))}async firstUpdated(){c.GN.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(t=>t?.()),clearInterval(this.interval)}render(){return(0,i.qy)` 459 <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s"> 460 ${this.initialized?this.templateSwap():this.templateLoading()} 461 </wui-flex> 462 `}watchTokensAndValues(){this.interval=setInterval(()=>{c.GN.getNetworkTokenPrice(),c.GN.getMyTokensWithBalance(),c.GN.swapTokens()},1e4)}templateSwap(){return(0,i.qy)` 463 <wui-flex flexDirection="column" gap="s"> 464 <wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container"> 465 ${this.templateTokenInput("sourceToken",this.sourceToken)} 466 ${this.templateTokenInput("toToken",this.toToken)} ${this.templateReplaceTokensButton()} 467 </wui-flex> 468 ${this.templateDetails()} ${this.templateActionButton()} 469 </wui-flex> 470 `}actionButtonLabel(){return this.fetchError?"Swap":this.sourceToken&&this.toToken?this.sourceTokenAmount?this.inputError?this.inputError:"Review swap":"Enter amount":"Select token"}templateReplaceTokensButton(){return(0,i.qy)` 471 <wui-flex class="replace-tokens-button-container"> 472 <button @click=${this.onSwitchTokens.bind(this)}> 473 <wui-icon name="recycleHorizontal" color="fg-250" size="lg"></wui-icon> 474 </button> 475 </wui-flex> 476 `}templateLoading(){return(0,i.qy)` 477 <wui-flex flexDirection="column" gap="l"> 478 <wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container"> 479 <w3m-swap-input-skeleton target="sourceToken"></w3m-swap-input-skeleton> 480 <w3m-swap-input-skeleton target="toToken"></w3m-swap-input-skeleton> 481 ${this.templateReplaceTokensButton()} 482 </wui-flex> 483 ${this.templateActionButton()} 484 </wui-flex> 485 `}templateTokenInput(t,e){let o=c.GN.state.myTokensWithBalance?.find(t=>t?.address===e?.address),r="toToken"===t?this.toTokenAmount:this.sourceTokenAmount,n="toToken"===t?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,s=a.S.parseLocalStringToNumber(r)*n;return(0,i.qy)`<w3m-swap-input 486 .value=${"toToken"===t?this.toTokenAmount:this.sourceTokenAmount} 487 .disabled=${"toToken"===t} 488 .onSetAmount=${this.handleChangeAmount.bind(this)} 489 target=${t} 490 .token=${e} 491 .balance=${o?.quantity?.numeric} 492 .price=${o?.price} 493 .marketValue=${s} 494 .onSetMaxValue=${this.onSetMaxValue.bind(this)} 495 ></w3m-swap-input>`}onSetMaxValue(t,e){let o=a.S.bigNumber(e||"0");this.handleChangeAmount(t,o.gt(0)?o.toFixed(20):"0")}templateDetails(){return this.sourceToken&&this.toToken&&!this.inputError?(0,i.qy)`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`:null}handleChangeAmount(t,e){c.GN.clearError(),"sourceToken"===t?c.GN.setSourceTokenAmount(e):c.GN.setToTokenAmount(e),this.onDebouncedGetSwapCalldata()}templateActionButton(){let t=!this.toToken||!this.sourceToken,e=!this.sourceTokenAmount,o=this.loadingQuote||this.loadingPrices||this.loadingTransaction,r=o||t||e||this.inputError;return(0,i.qy)` <wui-flex gap="xs"> 496 <wui-button 497 data-testid="swap-action-button" 498 class="action-button" 499 fullWidth 500 size="lg" 501 borderRadius="xs" 502 variant=${t?"neutral":"main"} 503 .loading=${o} 504 .disabled=${r} 505 @click=${this.onSwapPreview.bind(this)} 506 > 507 ${this.actionButtonLabel()} 508 </wui-button>
508 509 </wui-flex>`}onSwitchTokens(){c.GN.switchTokens()}async onSwapPreview(){let t=l.W.state.activeChain;this.fetchError&&await c.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:s.U.state.preferredAccountTypes?.[t]===h.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}}),n.I.push("SwapPreview")}async handleSwapParameters(){if(this.initialParams){if(!c.GN.state.initialized){let t=new Promise(t=>{let e=c.GN.subscribeKey("initialized",o=>{o&&(e?.(),t())})});await t}await this.setSwapParameters(this.initialParams)}}async setSwapParameters({amount:t,fromToken:e,toToken:o}){if(!c.GN.state.tokens||!c.GN.state.myTokensWithBalance){let t=new Promise(t=>{let e=c.GN.subscribeKey("myTokensWithBalance",o=>{o&&o.length>0&&(e?.(),t())});setTimeout(()=>{e?.(),t()},5e3)});await t}let i=[...c.GN.state.tokens||[],...c.GN.state.myTokensWithBalance||[]];if(e){let t=i.find(t=>t.symbol.toLowerCase()===e.toLowerCase());t&&c.GN.setSourceToken(t)}if(o){let t=i.find(t=>t.symbol.toLowerCase()===o.toLowerCase());t&&c.GN.setToToken(t)}t&&!isNaN(Number(t))&&c.GN.setSourceTokenAmount(t)}onCaipAddressChange({newCaipAddress:t,resetSwapState:e,initializeSwapState:o}){this.caipAddress!==t&&(this.caipAddress=t,e&&c.GN.resetState(),o&&c.GN.initializeState())}onCaipNetworkChange({newCaipNetwork:t,resetSwapState:e,initializeSwapState:o}){this.caipNetworkId!==t?.caipNetworkId&&(this.caipNetworkId=t?.caipNetworkId,e&&c.GN.resetState(),o&&c.GN.initializeState())}};D.styles=I,A([(0,r.MZ)({type:Object})],D.prototype,"initialParams",void 0),A([(0,r.wk)()],D.prototype,"interval",void 0),A([(0,r.wk)()],D.prototype,"detailsOpen",void 0),A([(0,r.wk)()],D.prototype,"caipAddress",void 0),A([(0,r.wk)()],D.prototype,"caipNetworkId",void 0),A([(0,r.wk)()],D.prototype,"initialized",void 0),A([(0,r.wk)()],D.prototype,"loadingQuote",void 0),A([(0,r.wk)()],D.prototype,"loadingPrices",void 0),A([(0,r.wk)()],D.prototype,"loadingTransaction",void 0),A([(0,r.wk)()],D.prototype,"sourceToken",void 0),A([(0,r.wk)()],D.prototype,"sourceTokenAmount",void 0),A([(0,r.wk)()],D.prototype,"sourceTokenPriceInUSD",void 0),A([(0,r.wk)()],D.prototype,"toToken",void 0),A([(0,r.wk)()],D.prototype,"toTokenAmount",void 0),A([(0,r.wk)()],D.prototype,"toTokenPriceInUSD",void 0),A([(0,r.wk)()],D.prototype,"inputError",void 0),A([(0,r.wk)()],D.prototype,"fetchError",void 0),D=A([(0,w.EM)("w3m-swap-view")],D);let P=(0,i.AH)` 510 :host > wui-flex:first-child { 511 overflow-y: auto; 512 overflow-x: hidden; 513 scrollbar-width: none; 514 } 515 516 :host > wui-flex:first-child::-webkit-scrollbar {
517 display: none; 518 } 519 520 .preview-container, 521 .details-container { 522 width: 100%; 523 } 524 525 .token-image { 526 width: 24px; 527 height: 24px; 528 box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005); 529 border-radius: 12px; 530 } 531 532 wui-loading-hexagon { 533 position: absolute; 534 } 535 536 .token-item { 537 display: flex; 538 align-items: center; 539 justify-content: center; 540 gap: var(--wui-spacing-xxs); 541 padding: var(--wui-spacing-xs); 542 height: 40px; 543 border: none; 544 border-radius: 80px; 545 background: var(--wui-color-gray-glass-002); 546 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002); 547 cursor: pointer; 548 transition: background 0.2s linear; 549 } 550 551 .token-item:hover { 552 background: var(--wui-color-gray-glass-005); 553 } 554 555 .preview-token-details-container { 556 width: 100%; 557 } 558 559 .details-row { 560 width: 100%; 561 padding: var(--wui-spacing-s) var(--wui-spacing-xl); 562 border-radius: var(--wui-border-radius-xxs); 563 background: var(--wui-color-gray-glass-002); 564 } 565 566 .action-buttons-container { 567 width: 100%; 568 gap: var(--wui-spacing-xs); 569 } 570 571 .action-buttons-container > button { 572 display: flex; 573 align-items: center; 574 justify-content: center; 575 background: transparent; 576 height: 48px; 577 border-radius: var(--wui-border-radius-xs); 578 border: none; 579 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 580 } 581 582 .action-buttons-container > button:disabled { 583 opacity: 0.8; 584 cursor: not-allowed; 585 } 586 587 .action-button > wui-loading-spinner { 588 display: inline-block; 589 } 590 591 .cancel-button:hover, 592 .action-button:hover { 593 cursor: pointer; 594 } 595 596 .action-buttons-container > wui-button.cancel-button { 597 flex: 2; 598 } 599 600 .action-buttons-container > wui-button.action-button { 601 flex: 4; 602 } 603 604 .action-buttons-container > button.action-button > wui-text { 605 color: white; 606 } 607 608 .details-container > wui-flex { 609 background: var(--wui-color-gray-glass-002); 610 border-radius: var(--wui-border-radius-xxs); 611 width: 100%; 612 } 613 614 .details-container > wui-flex > button { 615 border: none; 616 background: none; 617 padding: var(--wui-spacing-s); 618 border-radius: var(--wui-border-radius-xxs); 619 transition: background 0.2s linear; 620 } 621 622 .details-container > wui-flex > button:hover { 623 background: var(--wui-color-gray-glass-002); 624 } 625 626 .details-content-container { 627 padding: var(--wui-spacing-1xs); 628 display: flex; 629 align-items: center; 630 justify-content: center; 631 } 632 633 .details-content-container > wui-flex { 634 width: 100%; 635 } 636 637 .details-row { 638 width: 100%; 639 padding: var(--wui-spacing-s) var(--wui-spacing-xl); 640 border-radius: var(--wui-border-radius-xxs); 641 background: var(--wui-color-gray-glass-002); 642 } 643`;var C=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let G=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=c.GN.state.approvalTransaction,this.swapTransaction=c.GN.state.swapTransaction,this.sourceToken=c.GN.state.sourceToken,this.sourceTokenAmount=c.GN.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=c.GN.state.sourceTokenPriceInUSD,this.toToken=c.GN.state.toToken,this.toTokenAmount=c.GN.state.toTokenAmount??"",this.toTokenPriceInUSD=c.GN.state.toTokenPriceInUSD,this.caipNetwork=l.W.state.activeCaipNetwork,this.balanceSymbol=s.U.state.balanceSymbol,this.inputError=c.GN.state.inputError,this.loadingQuote=c.GN.state.loadingQuote,this.loadingApprovalTransaction=c.GN.state.loadingApprovalTransaction,this.loadingBuildTransaction=c.GN.state.loadingBuildTransaction,this.loadingTransaction=c.GN.state.loadingTransaction,this.unsubscribe.push(s.U.subscribeKey("balanceSymbol",t=>{this.balanceSymbol!==t&&n.I.goBack()}),l.W.subscribeKey("activeCaipNetwork",t=>{this.caipNetwork!==t&&(this.caipNetwork=t)}),c.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&&n.I.goBack(),this.loadingQuote=t.loadingQuote,this.loadingApprovalTransaction=t.loadingApprovalTransaction,this.loadingBuildTransaction=t.loadingBuildTransaction,this.loadingTransaction=t.loadingTransaction}))}firstUpdated(){c.GN.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(t=>t?.()),clearInterval(this.interval)}render(){return(0,i.qy)` 644 <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s"> 645 ${this.templateSwap()} 646 </wui-flex> 647 `}refreshTransaction(){this.interval=setInterval(()=>{c.GN.getApprovalLoadingState()||c.GN.getTransaction()},1e4)}templateSwap(){let t=`${w.Zv.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${this.sourceToken?.symbol}`,e=`${w.Zv.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${this.toToken?.symbol}`,o=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,r=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,a=w.Zv.formatNumberToLocalString(o),n=w.Zv.formatNumberToLocalString(r),s=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return(0,i.qy)` 648 <wui-flex flexDirection="column" alignItems="center" gap="l"> 649 <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="l"> 650 <wui-flex 651 class="preview-token-details-container" 652 alignItems="center" 653 justifyContent="space-between" 654 gap="l" 655 > 656 <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs"> 657 <wui-text variant="small-400" color="fg-150">Send</wui-text> 658 <wui-text variant="paragraph-400" color="fg-100">$${a}</wui-text> 659 </wui-flex> 660 <wui-token-button 661 flexDirection="row-reverse" 662 text=${t} 663 imageSrc=${this.sourceToken?.logoUri} 664 > 665 </wui-token-button>
665 666 </wui-flex> 667 <wui-icon name="recycleHorizontal" color="fg-200" size="md"></wui-icon> 668 <wui-flex 669 class="preview-token-details-container" 670 alignItems="center" 671 justifyContent="space-between" 672 gap="l" 673 > 674 <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs"> 675 <wui-text variant="small-400" color="fg-150">Receive</wui-text> 676 <wui-text variant="paragraph-400" color="fg-100">$${n}</wui-text> 677 </wui-flex> 678 <wui-token-button 679 flexDirection="row-reverse" 680 text=${e} 681 imageSrc=${this.toToken?.logoUri} 682 > 683 </wui-token-button> 684 </wui-flex> 685 </wui-flex> 686 687 ${this.templateDetails()} 688 689 <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="xs"> 690 <wui-icon size="sm" color="fg-200" name="infoCircle"></wui-icon> 691 <wui-text variant="small-400" color="fg-200">Review transaction carefully</wui-text> 692 </wui-flex> 693 694 <wui-flex 695 class="action-buttons-container" 696 flexDirection="row" 697 alignItems="center" 698 justifyContent="space-between" 699 gap="xs" 700 > 701 <wui-button 702 class="cancel-button" 703 fullWidth 704 size="lg" 705 borderRadius="xs" 706 variant="neutral" 707 @click=${this.onCancelTransaction.bind(this)} 708 > 709 <wui-text variant="paragraph-600" color="fg-200">Cancel</wui-text> 710 </wui-button> 711 <wui-button 712 class="action-button" 713 fullWidth 714 size="lg" 715 borderRadius="xs" 716 variant="main" 717 ?loading=${s} 718 ?disabled=${s} 719 @click=${this.onSendTransaction.bind(this)} 720 > 721 <wui-text variant="paragraph-600" color="inverse-100"> 722 ${this.actionButtonLabel()} 723 </wui-text> 724 </wui-button> 725 </wui-flex> 726 </wui-flex> 727 `}templateDetails(){return this.sourceToken&&this.toToken&&!this.inputError?(0,i.qy)`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`:null}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){n.I.goBack()}onSendTransaction(){this.approvalTransaction?c.GN.sendTransactionForApproval(this.approvalTransaction):c.GN.sendTransactionForSwap(this.swapTransaction)}};G.styles=P,C([(0,r.wk)()],G.prototype,"interval",void 0),C([(0,r.wk)()],G.prototype,"detailsOpen",void 0),C([(0,r.wk)()],G.prototype,"approvalTransaction",void 0),C([(0,r.wk)()],G.prototype,"swapTransaction",void 0),C([(0,r.wk)()],G.prototype,"sourceToken",void 0),C([(0,r.wk)()],G.prototype,"sourceTokenAmount",void 0),C([(0,r.wk)()],G.prototype,"sourceTokenPriceInUSD",void 0),C([(0,r.wk)()],G.prototype,"toToken",void 0),C([(0,r.wk)()],G.prototype,"toTokenAmount",void 0),C([(0,r.wk)()],G.prototype,"toTokenPriceInUSD",void 0),C([(0,r.wk)()],G.prototype,"caipNetwork",void 0),C([(0,r.wk)()],G.prototype,"balanceSymbol",void 0),C([(0,r.wk)()],G.prototype,"inputError",void 0),C([(0,r.wk)()],G.prototype,"loadingQuote",void 0),C([(0,r.wk)()],G.prototype,"loadingApprovalTransaction",void 0),C([(0,r.wk)()],G.prototype,"loadingBuildTransaction",void 0),C([(0,r.wk)()],G.prototype,"loadingTransaction",void 0),G=C([(0,w.EM)("w3m-swap-preview-view")],G),o(18584),o(405),o(93412),o(73854),o(95532);var E=o(13936),R=o(6769),j=o(36251);let U=(0,i.AH)` 728 :host { 729 height: 60px; 730 min-height: 60px; 731 } 732 733 :host > wui-flex { 734 cursor: pointer; 735 height: 100%; 736 display: flex; 737 column-gap: var(--wui-spacing-s); 738 padding: var(--wui-spacing-xs); 739 padding-right: var(--wui-spacing-l); 740 width: 100%; 741 background-color: transparent; 742 border-radius: var(--wui-border-radius-xs); 743 color: var(--wui-color-fg-250); 744 transition: 745 background-color var(--wui-ease-out-power-1) var(--wui-duration-lg), 746 opacity var(--wui-ease-out-power-1) var(--wui-duration-lg); 747 will-change: background-color, opacity; 748 } 749 750 @media (hover: hover) and (pointer: fine) { 751 :host > wui-flex:hover { 752 background-color: var(--wui-color-gray-glass-002); 753 } 754 755 :host > wui-flex:active { 756 background-color: var(--wui-color-gray-glass-005); 757 } 758 } 759 760 :host([disabled]) > wui-flex { 761 opacity: 0.6; 762 } 763 764 :host([disabled]) > wui-flex:hover { 765 background-color: transparent; 766 } 767 768 :host > wui-flex > wui-flex { 769 flex: 1; 770 } 771 772 :host > wui-flex > wui-image, 773 :host > wui-flex > .token-item-image-placeholder { 774 width: 40px; 775 max-width: 40px; 776 height: 40px; 777 border-radius: var(--wui-border-radius-3xl); 778 position: relative; 779 } 780 781 :host > wui-flex > .token-item-image-placeholder { 782 display: flex; 783 align-items: center; 784 justify-content: center; 785 } 786 787 :host > wui-flex > wui-image::after, 788 :host > wui-flex > .token-item-image-placeholder::after { 789 position: absolute; 790 content: ''; 791 inset: 0; 792 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 793 border-radius: var(--wui-border-radius-l); 794 } 795 796 button > wui-icon-box[data-variant='square-blue'] { 797 border-radius: var(--wui-border-radius-3xs); 798 position: relative; 799 border: none; 800 width: 36px; 801 height: 36px; 802 } 803`;var O=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let M=class extends i.WF{constructor(){super(),this.observer=new IntersectionObserver(()=>void 0),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()}
803render(){if(!this.visible)return null;let t=this.amount&&this.price?a.S.multiply(this.price,this.amount)?.toFixed(3):null;return(0,i.qy)` 804 <wui-flex alignItems="center"> 805 ${this.visualTemplate()} 806 <wui-flex flexDirection="column" gap="3xs"> 807 <wui-flex justifyContent="space-between"> 808 <wui-text variant="paragraph-500" color="fg-100" lineClamp="1">${this.name}</wui-text> 809 ${t?(0,i.qy)` 810 <wui-text variant="paragraph-500" color="fg-100"> 811 $${R.Z.formatNumberToLocalString(t,3)} 812 </wui-text> 813 `:null} 814 </wui-flex> 815 <wui-flex justifyContent="space-between"> 816 <wui-text variant="small-400" color="fg-200" lineClamp="1">${this.symbol}</wui-text> 817 ${this.amount?(0,i.qy)`<wui-text variant="small-400" color="fg-200"> 818 ${R.Z.formatNumberToLocalString(this.amount,4)} 819 </wui-text>`:null} 820 </wui-flex> 821 </wui-flex> 822 </wui-flex> 823 `}visualTemplate(){return this.imageError?(0,i.qy)`<wui-flex class="token-item-image-placeholder"> 824 <wui-icon name="image" color="inherit"></wui-icon> 825 </wui-flex>`:this.imageSrc?(0,i.qy)`<wui-image 826 width="40" 827 height="40" 828 src=${this.imageSrc} 829 @onLoadError=${this.imageLoadError} 830 ></wui-image>`:null}imageLoadError(){this.imageError=!0}};M.styles=[E.W5,E.fD,U],O([(0,r.MZ)()],M.prototype,"imageSrc",void 0),O([(0,r.MZ)()],M.prototype,"name",void 0),O([(0,r.MZ)()],M.prototype,"symbol",void 0),O([(0,r.MZ)()],M.prototype,"price",void 0),O([(0,r.MZ)()],M.prototype,"amount",void 0),O([(0,r.wk)()],M.prototype,"visible",void 0),O([(0,r.wk)()],M.prototype,"imageError",void 0),M=O([(0,j.E)("wui-token-list-item")],M);let q=(0,i.AH)` 831 :host { 832 --tokens-scroll--top-opacity: 0; 833 --tokens-scroll--bottom-opacity: 1; 834 --suggested-tokens-scroll--left-opacity: 0; 835 --suggested-tokens-scroll--right-opacity: 1; 836 } 837 838 :host > wui-flex:first-child { 839 overflow-y: hidden; 840 overflow-x: hidden; 841 scrollbar-width: none; 842 scrollbar-height: none; 843 } 844 845 :host > wui-flex:first-child::-webkit-scrollbar {
846 display: none; 847 } 848 849 wui-loading-hexagon { 850 position: absolute; 851 } 852 853 .suggested-tokens-container { 854 overflow-x: auto; 855 mask-image: linear-gradient( 856 to right, 857 rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 0px, 858 rgba(200, 200, 200, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 1px, 859 black 50px, 860 black 90px, 861 black calc(100% - 90px), 862 black calc(100% - 50px), 863 rgba(155, 155, 155, calc(1 - var(--suggested-tokens-scroll--right-opacity))) calc(100% - 1px), 864 rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--right-opacity))) 100% 865 ); 866 } 867 868 .suggested-tokens-container::-webkit-scrollbar { 869 display: none; 870 } 871 872 .tokens-container { 873 border-top: 1px solid var(--wui-color-gray-glass-005); 874 height: 100%; 875 max-height: 390px; 876 } 877 878 .tokens { 879 width: 100%; 880 overflow-y: auto; 881 mask-image: linear-gradient( 882 to bottom, 883 rgba(0, 0, 0, calc(1 - var(--tokens-scroll--top-opacity))) 0px, 884 rgba(200, 200, 200, calc(1 - var(--tokens-scroll--top-opacity))) 1px, 885 black 50px, 886 black 90px, 887 black calc(100% - 90px), 888 black calc(100% - 50px), 889 rgba(155, 155, 155, calc(1 - var(--tokens-scroll--bottom-opacity))) calc(100% - 1px), 890 rgba(0, 0, 0, calc(1 - var(--tokens-scroll--bottom-opacity))) 100% 891 ); 892 } 893 894 .network-search-input, 895 .select-network-button { 896 height: 40px; 897 } 898 899 .select-network-button { 900 border: none; 901 display: flex; 902 flex-direction: row; 903 align-items: center; 904 justify-content: center; 905 gap: var(--wui-spacing-xs); 906 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 907 background-color: transparent; 908 border-radius: var(--wui-border-radius-xxs); 909 padding: var(--wui-spacing-xs); 910 align-items: center; 911 transition: background-color 0.2s linear; 912 } 913 914 .select-network-button:hover { 915 background-color: var(--wui-color-gray-glass-002); 916 } 917 918 .select-network-button > wui-image { 919 width: 26px; 920 height: 26px; 921 border-radius: var(--wui-border-radius-xs); 922 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010); 923 } 924`;var B=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let L=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.targetToken=n.I.state.data?.target,this.sourceToken=c.GN.state.sourceToken,this.sourceTokenAmount=c.GN.state.sourceTokenAmount,this.toToken=c.GN.state.toToken,this.myTokensWithBalance=c.GN.state.myTokensWithBalance,this.popularTokens=c.GN.state.popularTokens,this.searchValue="",this.unsubscribe.push(c.GN.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.myTokensWithBalance=t.myTokensWithBalance}))}updated(){let t=this.renderRoot?.querySelector(".suggested-tokens-container");t?.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));let e=this.renderRoot?.querySelector(".tokens");e?.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){super.disconnectedCallback();let 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(0,i.qy)` 925 <wui-flex flexDirection="column" gap="s"> 926 ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()} 927 </wui-flex> 928 `}onSelectToken(t){"sourceToken"===this.targetToken?c.GN.setSourceToken(t):(c.GN.setToToken(t),this.sourceToken&&this.sourceTokenAmount&&c.GN.swapTokens()),n.I.goBack()}templateSearchInput(){return(0,i.qy)` 929 <wui-flex .padding=${["3xs","s","0","s"]} gap="xs"> 930 <wui-input-text 931 data-testid="swap-select-token-search-input" 932 class="network-search-input" 933 size="sm" 934 placeholder="Search token" 935 icon="search" 936 .value=${this.searchValue} 937 @inputChange=${this.onSearchInputChange.bind(this)} 938 ></wui-input-text> 939 </wui-flex> 940 `}templateTokens(){let t=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],e=this.popularTokens?this.popularTokens:[],o=this.filterTokensWithText(t,this.searchValue),r=this.filterTokensWithText(e,this.searchValue);return(0,i.qy)` 941 <wui-flex class="tokens-container"> 942 <wui-flex class="tokens" .padding=${["0","s","s","s"]} flexDirection="column"> 943 ${o?.length>0?(0,i.qy)` 944 <wui-flex justifyContent="flex-start" padding="s"> 945 <wui-text variant="paragraph-500" color="fg-200">Your tokens</wui-text> 946 </wui-flex> 947 ${o.map(t=>{let e=t.symbol===this.sourceToken?.symbol||t.symbol===this.toToken?.symbol;return(0,i.qy)` 948 <wui-token-list-item 949 data-testid="swap-select-token-item-${t.symbol}" 950 name=${t.name} 951 ?disabled=${e} 952 symbol=${t.symbol} 953 price=${t?.price} 954 amount=${t?.quantity?.numeric} 955 imageSrc=${t.logoUri} 956 @click=${()=>{e||this.onSelectToken(t)}} 957 > 958 </wui-token-list-item> 959 `})} 960 `:null} 961 962 <wui-flex justifyContent="flex-start" padding="s"> 963 <wui-text variant="paragraph-500" color="fg-200">Tokens</wui-text> 964 </wui-flex> 965 ${r?.length>0?r.map(t=>(0,i.qy)` 966 <wui-token-list-item 967 data-testid="swap-select-token-item-${t.symbol}" 968 name=${t.name} 969 symbol=${t.symbol} 970 imageSrc=${t.logoUri} 971 @click=${()=>this.onSelectToken(t)} 972 > 973 </wui-token-list-item> 974 `):null} 975 </wui-flex> 976 </wui-flex> 977 `}templateSuggestedTokens(){let t=c.GN.state.suggestedTokens?c.GN.state.suggestedTokens.slice(0,8):null;return t?(0,i.qy)` 978 <wui-flex class="suggested-tokens-container" .padding=${["0","s","0","s"]} gap="xs"> 979 ${t.map(t=>(0,i.qy)` 980 <wui-token-button 981 text=${t.symbol} 982 imageSrc=${t.logoUri} 983 @click=${()=>this.onSelectToken(t)} 984 > 985 </wui-token-button>
985 986 `)} 987 </wui-flex> 988 `:null}onSearchInputChange(t){this.searchValue=t.detail}handleSuggestedTokensScroll(){let t=this.renderRoot?.querySelector(".suggested-tokens-container");t&&(t.style.setProperty("--suggested-tokens-scroll--left-opacity",w.z8.interpolate([0,100],[0,1],t.scrollLeft).toString()),t.style.setProperty("--suggested-tokens-scroll--right-opacity",w.z8.interpolate([0,100],[0,1],t.scrollWidth-t.scrollLeft-t.offsetWidth).toString()))}handleTokenListScroll(){let t=this.renderRoot?.querySelector(".tokens");t&&(t.style.setProperty("--tokens-scroll--top-opacity",w.z8.interpolate([0,100],[0,1],t.scrollTop).toString()),t.style.setProperty("--tokens-scroll--bottom-opacity",w.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()))}};L.styles=q,B([(0,r.wk)()],L.prototype,"interval",void 0),B([(0,r.wk)()],L.prototype,"targetToken",void 0),B([(0,r.wk)()],L.prototype,"sourceToken",void 0),B([(0,r.wk)()],L.prototype,"sourceTokenAmount",void 0),B([(0,r.wk)()],L.prototype,"toToken",void 0),B([(0,r.wk)()],L.prototype,"myTokensWithBalance",void 0),B([(0,r.wk)()],L.prototype,"popularTokens",void 0),B([(0,r.wk)()],L.prototype,"searchValue",void 0),L=B([(0,w.EM)("w3m-swap-select-token-view")],L)},27943:(t,e,o)=>{o(70542)},46714:(t,e,o)=>{var i=o(78860),r=o(5830),a=o(51015),n=o(67619);o(28459),o(75081),o(59223);let s=(0,i.AH)` 989 :host { 990 pointer-events: none; 991 } 992 993 :host > wui-flex { 994 display: var(--w3m-tooltip-display); 995 opacity: var(--w3m-tooltip-opacity); 996 padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s); 997 border-radius: var(--wui-border-radius-xxs); 998 color: var(--wui-color-bg-100); 999 position: fixed; 1000 top: var(--w3m-tooltip-top); 1001 left: var(--w3m-tooltip-left); 1002 transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px)); 1003 max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl)); 1004 transition: opacity 0.2s var(--wui-ease-out-power-2); 1005 will-change: opacity; 1006 } 1007 1008 :host([data-variant='shade']) > wui-flex { 1009 background-color: var(--wui-color-bg-150); 1010 border: 1px solid var(--wui-color-gray-glass-005); 1011 } 1012 1013 :host([data-variant='shade']) > wui-flex > wui-text { 1014 color: var(--wui-color-fg-150); 1015 } 1016 1017 :host([data-variant='fill']) > wui-flex { 1018 background-color: var(--wui-color-fg-100); 1019 border: none; 1020 } 1021 1022 wui-icon { 1023 position: absolute; 1024 width: 12px !important; 1025 height: 4px !important; 1026 color: var(--wui-color-bg-150); 1027 } 1028 1029 wui-icon[data-placement='top'] { 1030 bottom: 0px; 1031 left: 50%; 1032 transform: translate(-50%, 95%); 1033 } 1034 1035 wui-icon[data-placement='bottom'] { 1036 top: 0; 1037 left: 50%; 1038 transform: translate(-50%, -95%) rotate(180deg); 1039 } 1040 1041 wui-icon[data-placement='right'] { 1042 top: 50%; 1043 left: 0; 1044 transform: translate(-65%, -50%) rotate(90deg); 1045 } 1046 1047 wui-icon[data-placement='left'] { 1048 top: 50%; 1049 right: 0%; 1050 transform: translate(65%, -50%) rotate(270deg); 1051 } 1052`;var l=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let c=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.open=a.I.state.open,this.message=a.I.state.message,this.triggerRect=a.I.state.triggerRect,this.variant=a.I.state.variant,this.unsubscribe.push(a.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;let t=this.triggerRect.top,e=this.triggerRect.left;return this.style.cssText=` 1053 --w3m-tooltip-top: ${t}px; 1054 --w3m-tooltip-left: ${e}px; 1055 --w3m-tooltip-parent-width: ${this.triggerRect.width/2}px; 1056 --w3m-tooltip-display: ${this.open?"flex":"none"}; 1057 --w3m-tooltip-opacity: ${+!!this.open}; 1058 `,(0,i.qy)`<wui-flex> 1059 <wui-icon data-placement="top" color="fg-100" size="inherit" name="cursor"></wui-icon> 1060 <wui-text color="inherit" variant="small-500">${this.message}</wui-text> 1061 </wui-flex>`}};c.styles=[s],l([(0,r.wk)()],c.prototype,"open",void 0),l([(0,r.wk)()],c.prototype,"message",void 0),l([(0,r.wk)()],c.prototype,"triggerRect",void 0),l([(0,r.wk)()],c.prototype,"variant",void 0),c=l([(0,n.EM)("w3m-tooltip"),(0,n.EM)("w3m-tooltip")],c)},51015:(t,e,o)=>{o.d(e,{I:()=>s});
1061var i=o(55340),r=o(89095),a=o(59341);let n=(0,i.BX)({message:"",open:!1,triggerRect:{width:0,height:0,top:0,left:0},variant:"shade"}),s=(0,a.X)({state:n,subscribe:t=>(0,i.B1)(n,()=>t(n)),subscribeKey:(t,e)=>(0,r.u$)(n,t,e),showTooltip({message:t,triggerRect:e,variant:o}){n.open=!0,n.message=t,n.triggerRect=e,n.variant=o},hide(){n.open=!1,n.message="",n.triggerRect={width:0,height:0,top:0,left:0}}})},70542:(t,e,o)=>{var i=o(78860),r=o(5830),a=o(36251);let n=(0,i.AH)` 1062 :host { 1063 display: block; 1064 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 1065 background: linear-gradient( 1066 120deg, 1067 var(--wui-color-bg-200) 5%, 1068 var(--wui-color-bg-200) 48%, 1069 var(--wui-color-bg-300) 55%, 1070 var(--wui-color-bg-300) 60%, 1071 var(--wui-color-bg-300) calc(60% + 10px), 1072 var(--wui-color-bg-200) calc(60% + 12px), 1073 var(--wui-color-bg-200) 100% 1074 ); 1075 background-size: 250%; 1076 animation: shimmer 3s linear infinite reverse; 1077 } 1078 1079 :host([variant='light']) { 1080 background: linear-gradient( 1081 120deg, 1082 var(--wui-color-bg-150) 5%, 1083 var(--wui-color-bg-150) 48%, 1084 var(--wui-color-bg-200) 55%, 1085 var(--wui-color-bg-200) 60%, 1086 var(--wui-color-bg-200) calc(60% + 10px), 1087 var(--wui-color-bg-150) calc(60% + 12px), 1088 var(--wui-color-bg-150) 100% 1089 ); 1090 background-size: 250%; 1091 } 1092 1093 @keyframes shimmer { 1094 from { 1095 background-position: -250% 0; 1096 } 1097 to { 1098 background-position: 250% 0; 1099 } 1100 } 1101`;var s=function(t,e,o,i){var r,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(a<3?r(n):a>3?r(e,o,n):r(e,o))||n);return a>3&&n&&Object.defineProperty(e,o,n),n};let l=class extends i.WF{constructor(){super(...arguments),this.width="",this.height="",this.borderRadius="m",this.variant="default"}render(){return this.style.cssText=` 1102 width: ${this.width}; 1103 height: ${this.height}; 1104 border-radius: clamp(0px,var(--wui-border-radius-${this.borderRadius}), 40px); 1105 `,(0,i.qy)`<slot></slot>`}};l.styles=[n],s([(0,r.MZ)()],l.prototype,"width",void 0),s([(0,r.MZ)()],l.prototype,"height",void 0),s([(0,r.MZ)()],l.prototype,"borderRadius",void 0),s([(0,r.MZ)()],l.prototype,"variant",void 0),l=s([(0,a.E)("wui-shimmer")],l)}}]);
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.