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