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