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