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