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