1import{bU as P,bX as I,by as v,bH as h,bY as u,bF as z,bz as R,c3 as $,bA as M,cx as K,c6 as F,c7 as Q,bV as O,bW as H}from"./WalletRuntimeProvider-BNIzIaNC.js";import{r as l,n as w}from"./class-map-CLoBDneg.js";import{c as A}from"./index-ii8MHqyJ.js";import"./index-bxt2dVpX.js";import"./index-Bm1BR82k.js";import"./index-CAgfb0Kb.js";import{S as r}from"./SwapController-B85w6qMw.js";import"./index-BQ8uqcJR.js";import"./index-DyJy9Qtc.js";import{M as L}from"./MathUtil-BGCe3rZ3.js";import"./index-aKi69Nlv.js";import"./index-C_OdvTsy.js";import"./index-DWJckWyN.js";import"./keccak256-D_fHeLaR.js";import"./encodeFunctionData-B9mqFnXK.js";import"./useChains-FrlaiQHn.js";import"./pools-BD5ccE-8.js";import"./rangeApr-Dx-Q3T8j.js";import"./walletChain-DRpH1oq-.js";import"./useGroupPositions-CHRmWtSB.js";import"./poolIdentity-B23meXyS.js";import"./useSignSettings-CL1nviCq.js";import"./decodeFunctionResult-ByLyuJgW.js";import"./index-CI9BI-UW.js";import"./if-defined-CK6965_i.js";import"./ref-CbtDIAP5.js";const q={numericInputKeyDown(e,t,o){const n=["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"],s=e.metaKey||e.ctrlKey,i=e.key,a=i.toLocaleLowerCase(),c=a==="a",C=a==="c",V=a==="v",W=a==="x",E=i===",",_=i===".",N=i>="0"&&i<="9";!s&&(c||C||V||W)&&e.preventDefault(),t==="0"&&!E&&!_&&i==="0"&&e.preventDefault(),t==="0"&&N&&(o(i),e.preventDefault()),(E||_)&&(t||(o("0."),e.preventDefault()),(t?.includes(".")||t?.includes(","))&&e.preventDefault()),!N&&!n.includes(i)&&!_&&!E&&e.preventDefault()}},G=P` 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 x=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};const Y=z.CONVERT_SLIPPAGE_TOLERANCE;let g=class extends I{constructor(){super(),this.unsubscribe=[],this.networkName=v.state.activeCaipNetwork?.name,this.detailsOpen=!1,this.sourceToken=r.state.sourceToken,this.toToken=r.state.toToken,this.toTokenAmount=r.state.toTokenAmount,this.sourceTokenPriceInUSD=r.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=r.state.toTokenPriceInUSD,this.priceImpact=r.state.priceImpact,this.maxSlippage=r.state.maxSlippage,this.networkTokenSymbol=r.state.networkTokenSymbol,this.inputError=r.state.inputError,this.unsubscribe.push(r.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.toTokenAmount=t.toTokenAmount,this.priceImpact=t.priceImpact,this.maxSlippage=t.maxSlippage,this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.inputError=t.inputError}))}render(){const t=this.toTokenAmount&&this.maxSlippage?h.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const o=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return u` 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 ${h.formatNumberToLocalString(o,3)} 59 ${this.toToken.symbol} 60 </wui-text> 61 <wui-text variant="sm-regular" color="secondary"> 62 $${h.formatNumberToLocalString(this.sourceTokenPriceInUSD)} 63 </wui-text> 64 </wui-flex> 65 <wui-icon name="chevronBottom"></wui-icon> 66 </wui-flex> 67 </button> 68 ${this.detailsOpen?u` 69 <wui-flex flexDirection="column" gap="2" class="details-content-container"> 70 ${this.priceImpact?u` <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 ${h.formatNumberToLocalString(this.priceImpact,3)}% 93 </wui-text> 94 </wui-flex> 95 </wui-flex> 96 </wui-flex>`:null} 97 ${this.maxSlippage&&this.sourceToken.symbol?u`<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. ${t?`Transaction will be reversed if you receive less than ${h.formatNumberToLocalString(t,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 ${h.formatNumberToLocalString(this.maxSlippage,6)} 120 ${this.toToken.symbol} ${Y}% 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}};g.styles=[G];x([l()],g.prototype,"networkName",void 0);x([w()],g.prototype,"detailsOpen",void 0);x([l()],g.prototype,"sourceToken",void 0);x([l()],g.prototype,"toToken",void 0);x([l()],g.prototype,"toTokenAmount",void 0);x([l()],g.prototype,"sourceTokenPriceInUSD",void 0);x([l()],g.prototype,"toTokenPriceInUSD",void 0);x([l()],g.prototype,"priceImpact",void 0);x([l()],g.prototype,"maxSlippage",void 0);x([l()],g.prototype,"networkTokenSymbol",void 0);x([l()],g.prototype,"inputError",void 0);g=x([A("w3m-swap-details")],g);const X=P` 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 B=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};let U=class extends I{constructor(){super(...arguments),this.target="sourceToken"}render(){return u` 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 u` 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 `}};U.styles=[X];B([w()],U.prototype,"target",void 0);U=B([A("w3m-swap-input-skeleton")],U);const Z=P` 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 T=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};const J=5e-5;let k=class extends I{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const t=this.marketValue||"0",o=h.bigNumber(t).gt("0");return u` 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 ${o?`$${h.formatNumberToLocalString(this.marketValue,2)}`:null} 329 </wui-text> 330 </wui-flex> 331 ${this.templateTokenSelectButton()} 332 </wui-flex> 333 `}handleKeydown(t){return q.numericInputKeyDown(t,this.value,o=>this.onSetAmount?.(this.target,o))}dispatchInputChangeEvent(t){if(!this.onSetAmount)return;const o=t.target.value.replace(/[^0-9.]/gu,"");o===","||o==="."?this.onSetAmount(this.target,"0."):o.endsWith(",")?this.onSetAmount(this.target,o.replace(",",".")):this.onSetAmount(this.target,o)}setMaxValueToInput(){this.onSetMaxValue?.(this.target,this.balance)}templateTokenSelectButton(){return this.token?u` 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>
347 348 <wui-flex alignItems="center" gap="1"> ${this.tokenBalanceTemplate()} </wui-flex> 349 </wui-flex> 350 `:u` <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(){const t=h.multiply(this.balance,this.price),o=t?t?.gt(J):!1;return u` 359 ${o?u`<wui-text variant="sm-regular" color="secondary"> 360 ${h.formatNumberToLocalString(this.balance,2)} 361 </wui-text>`:null} 362 ${this.target==="sourceToken"?this.tokenActionButtonTemplate(o):null} 363 `}tokenActionButtonTemplate(t){return t?u` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}> 364 <wui-text color="accent-primary" variant="sm-medium">Max</wui-text> 365 </button>`:u` <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(t){this.focused=t}onSelectToken(){R.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),$.push("SwapSelectToken",{target:this.target})}onBuyToken(){$.push("OnRampProviders")}};k.styles=[Z];T([w()],k.prototype,"focused",void 0);T([w()],k.prototype,"balance",void 0);T([w()],k.prototype,"value",void 0);T([w()],k.prototype,"price",void 0);T([w()],k.prototype,"marketValue",void 0);T([w()],k.prototype,"disabled",void 0);T([w()],k.prototype,"target",void 0);T([w()],k.prototype,"token",void 0);T([w()],k.prototype,"onSetAmount",void 0);T([w()],k.prototype,"onSetMaxValue",void 0);k=T([A("w3m-swap-input")],k);const ee=P` 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 m=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};let p=class extends I{subscribe({resetSwapState:t,initializeSwapState:o}){return()=>{v.subscribeKey("activeCaipNetwork",n=>this.onCaipNetworkChange({newCaipNetwork:n,resetSwapState:t,initializeSwapState:o})),v.subscribeChainProp("accountState",n=>{this.onCaipAddressChange({newCaipAddress:n?.caipAddress,resetSwapState:t,initializeSwapState:o})})}}constructor(){super(),this.unsubscribe=[],this.initialParams=$.state.data?.swap,this.detailsOpen=!1,this.caipAddress=v.getAccountData()?.caipAddress,this.caipNetworkId=v.state.activeCaipNetwork?.caipNetworkId,this.initialized=r.state.initialized,this.loadingQuote=r.state.loadingQuote,this.loadingPrices=r.state.loadingPrices,this.loadingTransaction=r.state.loadingTransaction,this.sourceToken=r.state.sourceToken,this.sourceTokenAmount=r.state.sourceTokenAmount,this.sourceTokenPriceInUSD=r.state.sourceTokenPriceInUSD,this.toToken=r.state.toToken,this.toTokenAmount=r.state.toTokenAmount,this.toTokenPriceInUSD=r.state.toTokenPriceInUSD,this.inputError=r.state.inputError,this.fetchError=r.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=M.debounce(async()=>{await r.swapTokens()},200),this.subscribe({resetSwapState:!0,initializeSwapState:!1})(),this.unsubscribe.push(this.subscribe({resetSwapState:!1,initializeSwapState:!0}),K.subscribeKey("open",t=>{t||r.resetState()}),$.subscribeKey("view",t=>{t.includes("Swap")||r.resetValues()}),r.subscribe(t=>{this.initialized=t.initialized,this.loadingQuote=t.loadingQuote,this.loadingPrices=t.loadingPrices,this.loadingTransaction=t.loadingTransaction,this.sourceToken=t.sourceToken,this.sourceTokenAmount=t.sourceTokenAmount,this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD,this.toToken=t.toToken,this.toTokenAmount=t.toTokenAmount,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.inputError=t.inputError,this.fetchError=t.fetchError,t.sourceToken&&t.toToken&&this.watchTokensAndValues()}))}async firstUpdated(){r.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(t=>t?.()),clearInterval(this.interval),document?.removeEventListener("visibilitychange",this.visibilityChangeHandler)}render(){return u` 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(){r.getNetworkTokenPrice(),r.getMyTokensWithBalance(),r.swapTokens(),this.lastTokenPriceUpdate=Date.now()}templateSwap(){return u` 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(){const t=!this.sourceTokenAmount||this.sourceTokenAmount==="0";return this.fetchError?"Swap":!this.sourceToken||!this.toToken?"Select token":t?"Enter amount":this.inputError?this.inputError:"Review swap"}templateReplaceTokensButton(){return u` 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 u` 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(t,o){const n=r.state.myTokensWithBalance?.find(c=>c?.address===o?.address),s=t==="toToken"?this.toTokenAmount:this.sourceTokenAmount,i=t==="toToken"?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,a=h.parseLocalStringToNumber(s)*i;return u`<w3m-swap-input 490 .value=${t==="toToken"?this.toTokenAmount:this.sourceTokenAmount} 491 .disabled=${t==="toToken"} 492 .onSetAmount=${this.handleChangeAmount.bind(this)} 493 target=${t} 494 .token=${o} 495 .balance=${n?.quantity?.numeric} 496 .price=${n?.price} 497 .marketValue=${a} 498 .onSetMaxValue=${this.onSetMaxValue.bind(this)} 499 ></w3m-swap-input>`}onSetMaxValue(t,o){const n=h.bigNumber(o||"0");this.handleChangeAmount(t,n.gt(0)?n.toFixed(20):"0")}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:u`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}handleChangeAmount(t,o){r.clearError(),t==="sourceToken"?r.setSourceTokenAmount(o):r.setToTokenAmount(o),this.onDebouncedGetSwapCalldata()}templateActionButton(){const t=!this.toToken||!this.sourceToken,o=!this.sourceTokenAmount||this.sourceTokenAmount==="0",n=this.loadingQuote||this.loadingPrices||this.loadingTransaction,s=n||t||o||this.inputError;return u` <wui-flex gap="2"> 500 <wui-button 501 data-testid="swap-action-button" 502 class="action-button" 503 fullWidth 504 size="lg" 505 borderRadius="xs" 506 variant="accent-primary" 507 ?loading=${!!n} 508 ?disabled=${!!s} 509 @click=${this.onSwapPreview.bind(this)} 510 > 511 ${this.actionButtonLabel()} 512 </wui-button>
512 513 </wui-flex>`}async onSwitchTokens(){await r.switchTokens()}async onSwapPreview(){this.fetchError&&await r.swapTokens(),R.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:F(v.state.activeChain)===Q.ACCOUNT_TYPES.SMART_ACCOUNT}}),$.push("SwapPreview")}async handleSwapParameters(){this.initialParams&&(r.state.initialized||await new Promise(o=>{const n=r.subscribeKey("initialized",s=>{s&&(n?.(),o())})}),await this.setSwapParameters(this.initialParams))}async setSwapParameters({amount:t,fromToken:o,toToken:n}){(!r.state.tokens||!r.state.myTokensWithBalance)&&await new Promise(a=>{const c=r.subscribeKey("myTokensWithBalance",C=>{C&&C.length>0&&(c?.(),a())});setTimeout(()=>{c?.(),a()},5e3)});const s=[...r.state.tokens||[],...r.state.myTokensWithBalance||[]];if(o){const i=s.find(a=>a.symbol.toLowerCase()===o.toLowerCase());i&&r.setSourceToken(i)}if(n){const i=s.find(a=>a.symbol.toLowerCase()===n.toLowerCase());i&&r.setToToken(i)}t&&!isNaN(Number(t))&&r.setSourceTokenAmount(t)}onCaipAddressChange({newCaipAddress:t,resetSwapState:o,initializeSwapState:n}){this.caipAddress!==t&&(this.caipAddress=t,o&&r.resetState(),n&&r.initializeState())}onCaipNetworkChange({newCaipNetwork:t,resetSwapState:o,initializeSwapState:n}){this.caipNetworkId!==t?.caipNetworkId&&(this.caipNetworkId=t?.caipNetworkId,o&&r.resetState(),n&&r.initializeState())}};p.styles=ee;m([w({type:Object})],p.prototype,"initialParams",void 0);m([l()],p.prototype,"interval",void 0);m([l()],p.prototype,"detailsOpen",void 0);m([l()],p.prototype,"caipAddress",void 0);m([l()],p.prototype,"caipNetworkId",void 0);m([l()],p.prototype,"initialized",void 0);m([l()],p.prototype,"loadingQuote",void 0);m([l()],p.prototype,"loadingPrices",void 0);m([l()],p.prototype,"loadingTransaction",void 0);m([l()],p.prototype,"sourceToken",void 0);m([l()],p.prototype,"sourceTokenAmount",void 0);m([l()],p.prototype,"sourceTokenPriceInUSD",void 0);m([l()],p.prototype,"toToken",void 0);m([l()],p.prototype,"toTokenAmount",void 0);m([l()],p.prototype,"toTokenPriceInUSD",void 0);m([l()],p.prototype,"inputError",void 0);m([l()],p.prototype,"fetchError",void 0);m([l()],p.prototype,"lastTokenPriceUpdate",void 0);p=m([A("w3m-swap-view")],p);const te=P` 514 :host > wui-flex:first-child { 515 overflow-y: auto; 516 overflow-x: hidden; 517 scrollbar-width: none; 518 } 519 520 :host > wui-flex:first-child::-webkit-scrollbar {
521 display: none; 522 } 523 524 .preview-container, 525 .details-container { 526 width: 100%; 527 } 528 529 .token-image { 530 width: 24px; 531 height: 24px; 532 box-shadow: 0 0 0 2px ${({tokens:e})=>e.core.glass010}; 533 border-radius: 12px; 534 } 535 536 wui-loading-hexagon { 537 position: absolute; 538 } 539 540 .token-item { 541 display: flex; 542 align-items: center; 543 justify-content: center; 544 gap: ${({spacing:e})=>e[2]}; 545 padding: ${({spacing:e})=>e[2]}; 546 height: 40px; 547 border: none; 548 border-radius: 80px; 549 background: ${({tokens:e})=>e.theme.foregroundPrimary}; 550 box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.theme.foregroundPrimary}; 551 cursor: pointer; 552 transition: background ${({durations:e})=>e.lg} 553 ${({easings:e})=>e["ease-out-power-2"]}; 554 will-change: background; 555 } 556 557 .token-item:hover { 558 background: ${({tokens:e})=>e.core.glass010}; 559 } 560 561 .preview-token-details-container { 562 width: 100%; 563 } 564 565 .details-row { 566 width: 100%; 567 padding: ${({spacing:e})=>e[3]} ${({spacing:e})=>e[5]}; 568 border-radius: ${({borderRadius:e})=>e[3]}; 569 background: ${({tokens:e})=>e.theme.foregroundPrimary}; 570 } 571 572 .action-buttons-container { 573 width: 100%; 574 gap: ${({spacing:e})=>e[2]}; 575 } 576 577 .action-buttons-container > button { 578 display: flex; 579 align-items: center; 580 justify-content: center; 581 background: transparent; 582 height: 48px; 583 border-radius: ${({borderRadius:e})=>e[4]}; 584 border: none; 585 box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010}; 586 } 587 588 .action-buttons-container > button:disabled { 589 opacity: 0.8; 590 cursor: not-allowed; 591 } 592 593 .action-button > wui-loading-spinner { 594 display: inline-block; 595 } 596 597 .cancel-button:hover, 598 .action-button:hover { 599 cursor: pointer; 600 } 601 602 .action-buttons-container > wui-button.cancel-button { 603 flex: 2; 604 } 605 606 .action-buttons-container > wui-button.action-button { 607 flex: 4; 608 } 609 610 .action-buttons-container > button.action-button > wui-text { 611 color: white; 612 } 613 614 .details-container > wui-flex { 615 background: ${({tokens:e})=>e.theme.foregroundPrimary}; 616 border-radius: ${({borderRadius:e})=>e[3]}; 617 width: 100%; 618 } 619 620 .details-container > wui-flex > button { 621 border: none; 622 background: none; 623 padding: ${({spacing:e})=>e[3]}; 624 border-radius: ${({borderRadius:e})=>e[3]}; 625 transition: background ${({durations:e})=>e.lg} 626 ${({easings:e})=>e["ease-out-power-2"]}; 627 will-change: background; 628 } 629 630 .details-container > wui-flex > button:hover { 631 background: ${({tokens:e})=>e.theme.foregroundPrimary}; 632 } 633 634 .details-content-container { 635 padding: ${({spacing:e})=>e[2]}; 636 display: flex; 637 align-items: center; 638 justify-content: center; 639 } 640 641 .details-content-container > wui-flex { 642 width: 100%; 643 } 644 645 .details-row { 646 width: 100%; 647 padding: ${({spacing:e})=>e[3]} ${({spacing:e})=>e[5]}; 648 border-radius: ${({borderRadius:e})=>e[3]}; 649 background: ${({tokens:e})=>e.theme.foregroundPrimary}; 650 } 651`;var f=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};let d=class extends I{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=r.state.approvalTransaction,this.swapTransaction=r.state.swapTransaction,this.sourceToken=r.state.sourceToken,this.sourceTokenAmount=r.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=r.state.sourceTokenPriceInUSD,this.balanceSymbol=v.getAccountData()?.balanceSymbol,this.toToken=r.state.toToken,this.toTokenAmount=r.state.toTokenAmount??"",this.toTokenPriceInUSD=r.state.toTokenPriceInUSD,this.caipNetwork=v.state.activeCaipNetwork,this.inputError=r.state.inputError,this.loadingQuote=r.state.loadingQuote,this.loadingApprovalTransaction=r.state.loadingApprovalTransaction,this.loadingBuildTransaction=r.state.loadingBuildTransaction,this.loadingTransaction=r.state.loadingTransaction,this.unsubscribe.push(v.subscribeChainProp("accountState",t=>{t?.balanceSymbol!==this.balanceSymbol&&$.goBack()}),v.subscribeKey("activeCaipNetwork",t=>{this.caipNetwork!==t&&(this.caipNetwork=t)}),r.subscribe(t=>{this.approvalTransaction=t.approvalTransaction,this.swapTransaction=t.swapTransaction,this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.sourceTokenAmount=t.sourceTokenAmount??"",this.toTokenAmount=t.toTokenAmount??"",this.inputError=t.inputError,t.inputError&&$.goBack(),this.loadingQuote=t.loadingQuote,this.loadingApprovalTransaction=t.loadingApprovalTransaction,this.loadingBuildTransaction=t.loadingBuildTransaction,this.loadingTransaction=t.loadingTransaction}))}firstUpdated(){r.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(t=>t?.()),clearInterval(this.interval)}render(){return u` 652 <wui-flex flexDirection="column" .padding=${["0","4","4","4"]} gap="3"> 653 ${this.templateSwap()} 654 </wui-flex> 655 `}refreshTransaction(){this.interval=setInterval(()=>{r.getApprovalLoadingState()||r.getTransaction()},1e4)}templateSwap(){const t=`${h.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${this.sourceToken?.symbol}`,o=`${h.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${this.toToken?.symbol}`,n=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,s=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,i=h.formatNumberToLocalString(n),a=h.formatNumberToLocalString(s),c=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return u` 656 <wui-flex flexDirection="column" alignItems="center" gap="4"> 657 <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="4"> 658 <wui-flex 659 class="preview-token-details-container" 660 alignItems="center" 661 justifyContent="space-between" 662 gap="4" 663 > 664 <wui-flex flexDirection="column" alignItems="flex-start" gap="01"> 665 <wui-text variant="sm-regular" color="secondary">Send</wui-text> 666 <wui-text variant="md-regular" color="primary">$${i}</wui-text> 667 </wui-flex> 668 <wui-token-button 669 flexDirection="row-reverse" 670 text=${t} 671 imageSrc=${this.sourceToken?.logoUri} 672 > 673 </wui-token-button>
673 674 </wui-flex> 675 <wui-icon name="recycleHorizontal" color="default" size="md"></wui-icon> 676 <wui-flex 677 class="preview-token-details-container" 678 alignItems="center" 679 justifyContent="space-between" 680 gap="4" 681 > 682 <wui-flex flexDirection="column" alignItems="flex-start" gap="01"> 683 <wui-text variant="sm-regular" color="secondary">Receive</wui-text> 684 <wui-text variant="md-regular" color="primary">$${a}</wui-text> 685 </wui-flex> 686 <wui-token-button 687 flexDirection="row-reverse" 688 text=${o} 689 imageSrc=${this.toToken?.logoUri} 690 > 691 </wui-token-button> 692 </wui-flex> 693 </wui-flex> 694 695 ${this.templateDetails()} 696 697 <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="2"> 698 <wui-icon size="sm" color="default" name="info"></wui-icon> 699 <wui-text variant="sm-regular" color="secondary">Review transaction carefully</wui-text> 700 </wui-flex> 701 702 <wui-flex 703 class="action-buttons-container" 704 flexDirection="row" 705 alignItems="center" 706 justifyContent="space-between" 707 gap="2" 708 > 709 <wui-button 710 class="cancel-button" 711 fullWidth 712 size="lg" 713 borderRadius="xs" 714 variant="neutral-secondary" 715 @click=${this.onCancelTransaction.bind(this)} 716 > 717 <wui-text variant="md-medium" color="secondary">Cancel</wui-text> 718 </wui-button> 719 <wui-button 720 class="action-button" 721 fullWidth 722 size="lg" 723 borderRadius="xs" 724 variant="accent-primary" 725 ?loading=${c} 726 ?disabled=${c} 727 @click=${this.onSendTransaction.bind(this)} 728 > 729 <wui-text variant="md-medium" color="invert"> ${this.actionButtonLabel()} </wui-text> 730 </wui-button> 731 </wui-flex> 732 </wui-flex> 733 `}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:u`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){$.goBack()}onSendTransaction(){this.approvalTransaction?r.sendTransactionForApproval(this.approvalTransaction):r.sendTransactionForSwap(this.swapTransaction)}};d.styles=te;f([l()],d.prototype,"interval",void 0);f([l()],d.prototype,"detailsOpen",void 0);f([l()],d.prototype,"approvalTransaction",void 0);f([l()],d.prototype,"swapTransaction",void 0);f([l()],d.prototype,"sourceToken",void 0);f([l()],d.prototype,"sourceTokenAmount",void 0);f([l()],d.prototype,"sourceTokenPriceInUSD",void 0);f([l()],d.prototype,"balanceSymbol",void 0);f([l()],d.prototype,"toToken",void 0);f([l()],d.prototype,"toTokenAmount",void 0);f([l()],d.prototype,"toTokenPriceInUSD",void 0);f([l()],d.prototype,"caipNetwork",void 0);f([l()],d.prototype,"inputError",void 0);f([l()],d.prototype,"loadingQuote",void 0);f([l()],d.prototype,"loadingApprovalTransaction",void 0);f([l()],d.prototype,"loadingBuildTransaction",void 0);f([l()],d.prototype,"loadingTransaction",void 0);d=f([A("w3m-swap-preview-view")],d);const oe=P` 734 :host { 735 width: 100%; 736 height: 60px; 737 min-height: 60px; 738 } 739 740 :host > wui-flex { 741 cursor: pointer; 742 height: 100%; 743 display: flex; 744 column-gap: ${({spacing:e})=>e[3]}; 745 padding: ${({spacing:e})=>e[2]}; 746 padding-right: ${({spacing:e})=>e[4]}; 747 width: 100%; 748 background-color: transparent; 749 border-radius: ${({borderRadius:e})=>e[4]}; 750 color: ${({tokens:e})=>e.theme.foregroundSecondary}; 751 transition: 752 background-color ${({durations:e})=>e.lg} 753 ${({easings:e})=>e["ease-out-power-2"]}, 754 opacity ${({durations:e})=>e.lg} ${({easings:e})=>e["ease-out-power-2"]}; 755 will-change: background-color, opacity; 756 } 757 758 @media (hover: hover) and (pointer: fine) { 759 :host > wui-flex:hover { 760 background-color: ${({tokens:e})=>e.theme.foregroundPrimary}; 761 } 762 763 :host > wui-flex:active { 764 background-color: ${({tokens:e})=>e.core.glass010}; 765 } 766 } 767 768 :host([disabled]) > wui-flex { 769 opacity: 0.6; 770 } 771 772 :host([disabled]) > wui-flex:hover { 773 background-color: transparent; 774 } 775 776 :host > wui-flex > wui-flex { 777 flex: 1; 778 } 779 780 :host > wui-flex > wui-image, 781 :host > wui-flex > .token-item-image-placeholder { 782 width: 40px; 783 max-width: 40px; 784 height: 40px; 785 border-radius: ${({borderRadius:e})=>e[20]}; 786 position: relative; 787 } 788 789 :host > wui-flex > .token-item-image-placeholder { 790 display: flex; 791 align-items: center; 792 justify-content: center; 793 } 794 795 :host > wui-flex > wui-image::after, 796 :host > wui-flex > .token-item-image-placeholder::after { 797 position: absolute; 798 content: ''; 799 inset: 0; 800 box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010}; 801 border-radius: ${({borderRadius:e})=>e[8]}; 802 } 803 804 button > wui-icon-box[data-variant='square-blue'] { 805 border-radius: ${({borderRadius:e})=>e[2]}; 806 position: relative; 807 border: none; 808 width: 36px; 809 height: 36px; 810 } 811`;var D=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};let S=class extends I{constructor(){super(),this.observer=new IntersectionObserver(()=>{}),this.imageSrc=void 0,this.name=void 0,this.symbol=void 0,this.price=void 0,this.amount=void 0,this.visible=!1,this.imageError=!1,this.observer=new IntersectionObserver(t=>{t.forEach(o=>{o.isIntersecting?this.visible=!0:this.visible=!1})},{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}
811render(){if(!this.visible)return null;const t=this.amount&&this.price?h.multiply(this.price,this.amount)?.toFixed(3):null;return u` 812 <wui-flex alignItems="center"> 813 ${this.visualTemplate()} 814 <wui-flex flexDirection="column" gap="1"> 815 <wui-flex justifyContent="space-between"> 816 <wui-text variant="md-medium" color="primary" lineClamp="1">${this.name}</wui-text> 817 ${t?u` 818 <wui-text variant="md-medium" color="primary"> 819 $${h.formatNumberToLocalString(t,3)} 820 </wui-text> 821 `:null} 822 </wui-flex> 823 <wui-flex justifyContent="space-between"> 824 <wui-text variant="sm-regular" color="secondary" lineClamp="1">${this.symbol}</wui-text> 825 ${this.amount?u`<wui-text variant="sm-regular" color="secondary"> 826 ${h.formatNumberToLocalString(this.amount,5)} 827 </wui-text>`:null} 828 </wui-flex> 829 </wui-flex> 830 </wui-flex> 831 `}visualTemplate(){return this.imageError?u`<wui-flex class="token-item-image-placeholder"> 832 <wui-icon name="image" color="inherit"></wui-icon> 833 </wui-flex>`:this.imageSrc?u`<wui-image 834 width="40" 835 height="40" 836 src=${this.imageSrc} 837 @onLoadError=${this.imageLoadError} 838 ></wui-image>`:null}imageLoadError(){this.imageError=!0}};S.styles=[O,H,oe];D([w()],S.prototype,"imageSrc",void 0);D([w()],S.prototype,"name",void 0);D([w()],S.prototype,"symbol",void 0);D([w()],S.prototype,"price",void 0);D([w()],S.prototype,"amount",void 0);D([l()],S.prototype,"visible",void 0);D([l()],S.prototype,"imageError",void 0);S=D([A("wui-token-list-item")],S);const ie=P` 839 :host { 840 width: 100%; 841 } 842 843 :host > wui-flex { 844 cursor: pointer; 845 height: 100%; 846 width: 100%; 847 display: flex; 848 column-gap: ${({spacing:e})=>e[3]}; 849 padding: ${({spacing:e})=>e[2]}; 850 padding-right: ${({spacing:e})=>e[4]}; 851 } 852 853 wui-flex { 854 display: flex; 855 flex: 1; 856 } 857`;var ne=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};let j=class extends I{render(){return u` 858 <wui-flex alignItems="center"> 859 <wui-shimmer width="40px" height="40px"></wui-shimmer> 860 <wui-flex flexDirection="column" gap="1"> 861 <wui-shimmer width="72px" height="16px" borderRadius="4xs"></wui-shimmer> 862 <wui-shimmer width="148px" height="14px" borderRadius="4xs"></wui-shimmer> 863 </wui-flex> 864 <wui-flex flexDirection="column" gap="1" alignItems="flex-end"> 865 <wui-shimmer width="24px" height="12px" borderRadius="4xs"></wui-shimmer> 866 <wui-shimmer width="32px" height="12px" borderRadius="4xs"></wui-shimmer> 867 </wui-flex> 868 </wui-flex> 869 `}};j.styles=[O,ie];j=ne([A("wui-token-list-item-loader")],j);const re=P` 870 :host { 871 --tokens-scroll--top-opacity: 0; 872 --tokens-scroll--bottom-opacity: 1; 873 --suggested-tokens-scroll--left-opacity: 0; 874 --suggested-tokens-scroll--right-opacity: 1; 875 } 876 877 :host > wui-flex:first-child { 878 overflow-y: hidden; 879 overflow-x: hidden; 880 scrollbar-width: none; 881 scrollbar-height: none; 882 } 883 884 :host > wui-flex:first-child::-webkit-scrollbar {
885 display: none; 886 } 887 888 wui-loading-hexagon { 889 position: absolute; 890 } 891 892 .suggested-tokens-container { 893 overflow-x: auto; 894 mask-image: linear-gradient( 895 to right, 896 rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 0px, 897 rgba(200, 200, 200, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 1px, 898 black 50px, 899 black 90px, 900 black calc(100% - 90px), 901 black calc(100% - 50px), 902 rgba(155, 155, 155, calc(1 - var(--suggested-tokens-scroll--right-opacity))) calc(100% - 1px), 903 rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--right-opacity))) 100% 904 ); 905 } 906 907 .suggested-tokens-container::-webkit-scrollbar { 908 display: none; 909 } 910 911 .tokens-container { 912 border-top: 1px solid ${({tokens:e})=>e.core.glass010}; 913 height: 100%; 914 max-height: 390px; 915 } 916 917 .tokens { 918 width: 100%; 919 overflow-y: auto; 920 mask-image: linear-gradient( 921 to bottom, 922 rgba(0, 0, 0, calc(1 - var(--tokens-scroll--top-opacity))) 0px, 923 rgba(200, 200, 200, calc(1 - var(--tokens-scroll--top-opacity))) 1px, 924 black 50px, 925 black 90px, 926 black calc(100% - 90px), 927 black calc(100% - 50px), 928 rgba(155, 155, 155, calc(1 - var(--tokens-scroll--bottom-opacity))) calc(100% - 1px), 929 rgba(0, 0, 0, calc(1 - var(--tokens-scroll--bottom-opacity))) 100% 930 ); 931 } 932 933 .network-search-input, 934 .select-network-button { 935 height: 40px; 936 } 937 938 .select-network-button { 939 border: none; 940 display: flex; 941 flex-direction: row; 942 align-items: center; 943 justify-content: center; 944 gap: ${({spacing:e})=>e[2]}; 945 box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010}; 946 background-color: transparent; 947 border-radius: ${({borderRadius:e})=>e[3]}; 948 padding: ${({spacing:e})=>e[2]}; 949 align-items: center; 950 transition: background-color ${({durations:e})=>e.lg} 951 ${({easings:e})=>e["ease-out-power-2"]}; 952 will-change: background-color; 953 } 954 955 .select-network-button:hover { 956 background-color: ${({tokens:e})=>e.theme.foregroundPrimary}; 957 } 958 959 .select-network-button > wui-image { 960 width: 26px; 961 height: 26px; 962 border-radius: ${({borderRadius:e})=>e[4]}; 963 box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010}; 964 } 965`;var y=function(e,t,o,n){var s=arguments.length,i=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,o,n);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(i=(s<3?a(i):s>3?a(t,o,i):a(t,o))||i);return s>3&&i&&Object.defineProperty(t,o,i),i};let b=class extends I{constructor(){super(),this.unsubscribe=[],this.targetToken=$.state.data?.target,this.sourceToken=r.state.sourceToken,this.sourceTokenAmount=r.state.sourceTokenAmount,this.toToken=r.state.toToken,this.myTokensWithBalance=r.state.myTokensWithBalance,this.popularTokens=r.state.popularTokens,this.suggestedTokens=r.state.suggestedTokens,this.tokensLoading=r.state.tokensLoading,this.searchValue="",this.unsubscribe.push(r.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.myTokensWithBalance=t.myTokensWithBalance,this.popularTokens=t.popularTokens,this.suggestedTokens=t.suggestedTokens,this.tokensLoading=t.tokensLoading}))}async firstUpdated(){await r.getTokenList()}updated(){this.renderRoot?.querySelector(".suggested-tokens-container")?.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),this.renderRoot?.querySelector(".tokens")?.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){super.disconnectedCallback();const t=this.renderRoot?.querySelector(".suggested-tokens-container"),o=this.renderRoot?.querySelector(".tokens");t?.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),o?.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return u` 966 <wui-flex flexDirection="column" gap="3"> 967 ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()} 968 </wui-flex> 969 `}onSelectToken(t){this.targetToken==="sourceToken"?r.setSourceToken(t):(r.setToToken(t),this.sourceToken&&this.sourceTokenAmount&&r.swapTokens()),$.goBack()}templateSearchInput(){return u` 970 <wui-flex .padding=${["1","3","0","3"]} gap="2"> 971 <wui-input-text 972 data-testid="swap-select-token-search-input" 973 class="network-search-input" 974 size="sm" 975 placeholder="Search token" 976 icon="search" 977 .value=${this.searchValue} 978 @inputChange=${this.onSearchInputChange.bind(this)} 979 ></wui-input-text> 980 </wui-flex> 981 `}templateMyTokens(){const t=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],o=this.filterTokensWithText(t,this.searchValue);return o?.length>0?u`<wui-flex justifyContent="flex-start" padding="2"> 982 <wui-text variant="md-medium" color="secondary">Your tokens</wui-text> 983 </wui-flex> 984 ${o.map(n=>{const s=n.symbol===this.sourceToken?.symbol||n.symbol===this.toToken?.symbol;return u` 985 <wui-token-list-item 986 data-testid="swap-select-token-item-${n.symbol}" 987 name=${n.name} 988 ?disabled=${s} 989 symbol=${n.symbol} 990 price=${n?.price} 991 amount=${n?.quantity?.numeric} 992 imageSrc=${n.logoUri} 993 @click=${()=>{s||this.onSelectToken(n)}} 994 > 995 </wui-token-list-item> 996 `})}`:null}templateAllTokens(){const t=this.popularTokens?this.popularTokens:[],o=this.filterTokensWithText(t,this.searchValue);return this.tokensLoading?u` 997 <wui-token-list-item-loader></wui-token-list-item-loader> 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 `:o?.length>0?u` 1003 ${o.map(n=>u` 1004 <wui-token-list-item 1005 data-testid="swap-select-token-item-${n.symbol}" 1006 name=${n.name} 1007 symbol=${n.symbol} 1008 imageSrc=${n.logoUri} 1009 @click=${()=>this.onSelectToken(n)} 1010 > 1011 </wui-token-list-item> 1012 `)} 1013 `:null}templateTokens(){return u` 1014 <wui-flex class="tokens-container"> 1015 <wui-flex class="tokens" .padding=${["0","2","2","2"]} flexDirection="column"> 1016 ${this.templateMyTokens()} 1017 <wui-flex justifyContent="flex-start" padding="3"> 1018 <wui-text variant="md-medium" color="secondary">Tokens</wui-text> 1019 </wui-flex> 1020 ${this.templateAllTokens()} 1021 </wui-flex> 1022 </wui-flex> 1023 `}templateSuggestedTokens(){const t=this.suggestedTokens?this.suggestedTokens.slice(0,8):null;return this.tokensLoading?u` 1024 <wui-flex 1025 class="suggested-tokens-container" 1026 .padding=${["0","3","0","3"]} 1027 gap="2" 1028 > 1029 <wui-token-button loading></wui-token-button>
1029 1030 <wui-token-button loading></wui-token-button> 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-flex> 1035 `:t?u` 1036 <wui-flex 1037 class="suggested-tokens-container" 1038 .padding=${["0","3","0","3"]} 1039 gap="2" 1040 > 1041 ${t.map(o=>u` 1042 <wui-token-button 1043 text=${o.symbol} 1044 imageSrc=${o.logoUri} 1045 @click=${()=>this.onSelectToken(o)} 1046 > 1047 </wui-token-button> 1048 `)} 1049 </wui-flex> 1050 `:null}onSearchInputChange(t){this.searchValue=t.detail}handleSuggestedTokensScroll(){const t=this.renderRoot?.querySelector(".suggested-tokens-container");t&&(t.style.setProperty("--suggested-tokens-scroll--left-opacity",L.interpolate([0,100],[0,1],t.scrollLeft).toString()),t.style.setProperty("--suggested-tokens-scroll--right-opacity",L.interpolate([0,100],[0,1],t.scrollWidth-t.scrollLeft-t.offsetWidth).toString()))}handleTokenListScroll(){const t=this.renderRoot?.querySelector(".tokens");t&&(t.style.setProperty("--tokens-scroll--top-opacity",L.interpolate([0,100],[0,1],t.scrollTop).toString()),t.style.setProperty("--tokens-scroll--bottom-opacity",L.interpolate([0,100],[0,1],t.scrollHeight-t.scrollTop-t.offsetHeight).toString()))}filterTokensWithText(t,o){return t.filter(n=>`${n.symbol} ${n.name} ${n.address}`.toLowerCase().includes(o.toLowerCase())).sort((n,s)=>{const i=`${n.symbol} ${n.name} ${n.address}`.toLowerCase(),a=`${s.symbol} ${s.name} ${s.address}`.toLowerCase(),c=i.indexOf(o.toLowerCase()),C=a.indexOf(o.toLowerCase());return c-C})}};b.styles=re;y([l()],b.prototype,"interval",void 0);y([l()],b.prototype,"targetToken",void 0);y([l()],b.prototype,"sourceToken",void 0);y([l()],b.prototype,"sourceTokenAmount",void 0);y([l()],b.prototype,"toToken",void 0);y([l()],b.prototype,"myTokensWithBalance",void 0);y([l()],b.prototype,"popularTokens",void 0);y([l()],b.prototype,"suggestedTokens",void 0);y([l()],b.prototype,"tokensLoading",void 0);y([l()],b.prototype,"searchValue",void 0);b=y([A("w3m-swap-select-token-view")],b);export{d as W3mSwapPreviewView,b as W3mSwapSelectTokenView,p as W3mSwapView};
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.