logos-messaging/OpChan
1
0
Fork 0
mirror of https://github.com/logos-messaging/OpChan.git synced 2026-01-05 22:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity
OpChan/dist/assets/swaps-2zeCrlxq.js
Danish Arora 75dd710c11
chore: setup workspace
2025-09-11 14:29:55 +05:30

977 lines
50 KiB
JavaScript
Raw Permalink Blame History

import{i as A,aa as s,a5 as w,c as P,a as C,K as I,N as D,x as u,a7 as x,F as z,a0 as O,T,Y as U,L as K,ap as F,a1 as M,a2 as Q,a3 as H,a4 as q,aF as L}from"./index-Cr5N_0pd.js";import{S as o}from"./index-DUeQylCA.js";const G={numericInputKeyDown(l,e,i){const n=["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"],r=l.metaKey||l.ctrlKey,t=l.key,a=t.toLocaleLowerCase(),c=a==="a",E=a==="c",V=a==="v",W=a==="x",N=t===",",j=t===".",R=t>="0"&&t<="9";!r&&(c||E||V||W)&&l.preventDefault(),e==="0"&&!N&&!j&&t==="0"&&l.preventDefault(),e==="0"&&R&&(i(t),l.preventDefault()),(N||j)&&(e||(i("0."),l.preventDefault()),(e?.includes(".")||e?.includes(","))&&l.preventDefault()),!R&&!n.includes(t)&&!j&&!N&&l.preventDefault()}},Y=A`
:host {
width: 100%;
}
.details-container > wui-flex {
background: var(--wui-color-gray-glass-002);
border-radius: var(--wui-border-radius-xxs);
width: 100%;
}
.details-container > wui-flex > button {
border: none;
background: none;
padding: var(--wui-spacing-s);
border-radius: var(--wui-border-radius-xxs);
cursor: pointer;
}
.details-content-container {
padding: var(--wui-spacing-1xs);
padding-top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.details-content-container > wui-flex {
width: 100%;
}
.details-row {
width: 100%;
padding: var(--wui-spacing-s);
padding-left: var(--wui-spacing-s);
padding-right: var(--wui-spacing-1xs);
border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs));
background: var(--wui-color-gray-glass-002);
}
.details-row-title {
white-space: nowrap;
}
.details-row.provider-free-row {
padding-right: var(--wui-spacing-xs);
}
`;var b=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};const X=z.CONVERT_SLIPPAGE_TOLERANCE;let f=class extends C{constructor(){super(),this.unsubscribe=[],this.networkName=I.state.activeCaipNetwork?.name,this.detailsOpen=!1,this.sourceToken=o.state.sourceToken,this.toToken=o.state.toToken,this.toTokenAmount=o.state.toTokenAmount,this.sourceTokenPriceInUSD=o.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=o.state.toTokenPriceInUSD,this.priceImpact=o.state.priceImpact,this.maxSlippage=o.state.maxSlippage,this.networkTokenSymbol=o.state.networkTokenSymbol,this.inputError=o.state.inputError,this.unsubscribe.push(o.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(){const e=this.toTokenAmount&&this.maxSlippage?D.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const i=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return u`
<wui-flex flexDirection="column" alignItems="center" gap="1xs" class="details-container">
<wui-flex flexDirection="column">
<button @click=${this.toggleDetails.bind(this)}>
<wui-flex justifyContent="space-between" .padding=${["0","xs","0","xs"]}>
<wui-flex justifyContent="flex-start" flexGrow="1" gap="xs">
<wui-text variant="small-400" color="fg-100">
1 ${this.sourceToken.symbol} =
${x.formatNumberToLocalString(i,3)}
${this.toToken.symbol}
</wui-text>
<wui-text variant="small-400" color="fg-200">
$${x.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
</wui-text>
</wui-flex>
<wui-icon name="chevronBottom"></wui-icon>
</wui-flex>
</button>
${this.detailsOpen?u`
<wui-flex flexDirection="column" gap="xs" class="details-content-container">
${this.priceImpact?u` <wui-flex flexDirection="column" gap="xs">
<wui-flex
justifyContent="space-between"
alignItems="center"
class="details-row"
>
<wui-flex alignItems="center" gap="xs">
<wui-text class="details-row-title" variant="small-400" color="fg-150">
Price impact
</wui-text>
<w3m-tooltip-trigger
text="Price impact reflects the change in market price due to your trade"
>
<wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
</w3m-tooltip-trigger>
</wui-flex>
<wui-flex>
<wui-text variant="small-400" color="fg-200">
${x.formatNumberToLocalString(this.priceImpact,3)}%
</wui-text>
</wui-flex>
</wui-flex>
</wui-flex>`:null}
${this.maxSlippage&&this.sourceToken.symbol?u`<wui-flex flexDirection="column" gap="xs">
<wui-flex
justifyContent="space-between"
alignItems="center"
class="details-row"
>
<wui-flex alignItems="center" gap="xs">
<wui-text class="details-row-title" variant="small-400" color="fg-150">
Max. slippage
</wui-text>
<w3m-tooltip-trigger
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 ${x.formatNumberToLocalString(e,6)} ${this.toToken.symbol} due to price changes.`:""}`}
>
<wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
</w3m-tooltip-trigger>
</wui-flex>
<wui-flex>
<wui-text variant="small-400" color="fg-200">
${x.formatNumberToLocalString(this.maxSlippage,6)}
${this.toToken.symbol} ${X}%
</wui-text>
</wui-flex>
</wui-flex>
</wui-flex>`:null}
<wui-flex flexDirection="column" gap="xs">
<wui-flex
justifyContent="space-between"
alignItems="center"
class="details-row provider-free-row"
>
<wui-flex alignItems="center" gap="xs">
<wui-text class="details-row-title" variant="small-400" color="fg-150">
Provider fee
</wui-text>
</wui-flex>
<wui-flex>
<wui-text variant="small-400" color="fg-200">0.85%</wui-text>
</wui-flex>
</wui-flex>
</wui-flex>
</wui-flex>
`:null}
</wui-flex>
</wui-flex>
`}toggleDetails(){this.detailsOpen=!this.detailsOpen}};f.styles=[Y];b([s()],f.prototype,"networkName",void 0);b([w()],f.prototype,"detailsOpen",void 0);b([s()],f.prototype,"sourceToken",void 0);b([s()],f.prototype,"toToken",void 0);b([s()],f.prototype,"toTokenAmount",void 0);b([s()],f.prototype,"sourceTokenPriceInUSD",void 0);b([s()],f.prototype,"toTokenPriceInUSD",void 0);b([s()],f.prototype,"priceImpact",void 0);b([s()],f.prototype,"maxSlippage",void 0);b([s()],f.prototype,"networkTokenSymbol",void 0);b([s()],f.prototype,"inputError",void 0);f=b([P("w3m-swap-details")],f);const Z=A`
:host {
width: 100%;
}
:host > wui-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: var(--wui-border-radius-s);
padding: var(--wui-spacing-xl);
padding-right: var(--wui-spacing-s);
background-color: var(--wui-color-gray-glass-002);
box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
width: 100%;
height: 100px;
box-sizing: border-box;
position: relative;
}
wui-shimmer.market-value {
opacity: 0;
}
:host > wui-flex > svg.input_mask {
position: absolute;
inset: 0;
z-index: 5;
}
:host wui-flex .input_mask__border,
:host wui-flex .input_mask__background {
transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1);
will-change: fill;
}
:host wui-flex .input_mask__border {
fill: var(--wui-color-gray-glass-020);
}
:host wui-flex .input_mask__background {
fill: var(--wui-color-gray-glass-002);
}
`;var B=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};let _=class extends C{constructor(){super(...arguments),this.target="sourceToken"}render(){return u`
<wui-flex class justifyContent="space-between">
<wui-flex
flex="1"
flexDirection="column"
alignItems="flex-start"
justifyContent="center"
class="swap-input"
gap="xxs"
>
<wui-shimmer width="80px" height="40px" borderRadius="xxs" variant="light"></wui-shimmer>
</wui-flex>
${this.templateTokenSelectButton()}
</wui-flex>
`}templateTokenSelectButton(){return u`
<wui-flex
class="swap-token-button"
flexDirection="column"
alignItems="flex-end"
justifyContent="center"
gap="xxs"
>
<wui-shimmer width="80px" height="40px" borderRadius="3xl" variant="light"></wui-shimmer>
</wui-flex>
`}};_.styles=[Z];B([w()],_.prototype,"target",void 0);_=B([P("w3m-swap-input-skeleton")],_);const J=A`
:host > wui-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: var(--wui-border-radius-s);
background-color: var(--wui-color-gray-glass-002);
padding: var(--wui-spacing-xl);
padding-right: var(--wui-spacing-s);
width: 100%;
height: 100px;
box-sizing: border-box;
box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
position: relative;
transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg);
will-change: background-color;
}
:host wui-flex.focus {
box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005);
}
:host > wui-flex .swap-input,
:host > wui-flex .swap-token-button {
z-index: 10;
}
:host > wui-flex .swap-input {
-webkit-mask-image: linear-gradient(
270deg,
transparent 0px,
transparent 8px,
black 24px,
black 25px,
black 32px,
black 100%
);
mask-image: linear-gradient(
270deg,
transparent 0px,
transparent 8px,
black 24px,
black 25px,
black 32px,
black 100%
);
}
:host > wui-flex .swap-input input {
background: none;
border: none;
height: 42px;
width: 100%;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 130%;
letter-spacing: -1.28px;
outline: none;
caret-color: var(--wui-color-accent-100);
color: var(--wui-color-fg-100);
padding: 0px;
}
:host > wui-flex .swap-input input:focus-visible {
outline: none;
}
:host > wui-flex .swap-input input::-webkit-outer-spin-button,
:host > wui-flex .swap-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.max-value-button {
background-color: transparent;
border: none;
cursor: pointer;
color: var(--wui-color-gray-glass-020);
padding-left: 0px;
}
.market-value {
min-height: 18px;
}
`;var v=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};const ee=5e-5;let m=class extends C{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const e=this.marketValue||"0",i=D.bigNumber(e).gt("0");return u`
<wui-flex class="${this.focused?"focus":""}" justifyContent="space-between">
<wui-flex
flex="1"
flexDirection="column"
alignItems="flex-start"
justifyContent="center"
class="swap-input"
>
<input
data-testid="swap-input-${this.target}"
@focusin=${()=>this.onFocusChange(!0)}
@focusout=${()=>this.onFocusChange(!1)}
?disabled=${this.disabled}
.value=${this.value}
@input=${this.dispatchInputChangeEvent}
@keydown=${this.handleKeydown}
placeholder="0"
type="text"
inputmode="decimal"
/>
<wui-text class="market-value" variant="small-400" color="fg-200">
${i?`$${x.formatNumberToLocalString(this.marketValue,2)}`:null}
</wui-text>
</wui-flex>
${this.templateTokenSelectButton()}
</wui-flex>
`}handleKeydown(e){return G.numericInputKeyDown(e,this.value,i=>this.onSetAmount?.(this.target,i))}dispatchInputChangeEvent(e){if(!this.onSetAmount)return;const i=e.target.value.replace(/[^0-9.]/gu,"");i===","||i==="."?this.onSetAmount(this.target,"0."):i.endsWith(",")?this.onSetAmount(this.target,i.replace(",",".")):this.onSetAmount(this.target,i)}setMaxValueToInput(){this.onSetMaxValue?.(this.target,this.balance)}templateTokenSelectButton(){return this.token?u`
<wui-flex
class="swap-token-button"
flexDirection="column"
alignItems="flex-end"
justifyContent="center"
gap="xxs"
>
<wui-token-button
data-testid="swap-input-token-${this.target}"
text=${this.token.symbol}
imageSrc=${this.token.logoUri}
@click=${this.onSelectToken.bind(this)}
>
</wui-token-button>
<wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex>
</wui-flex>
`:u` <wui-button
data-testid="swap-select-token-button-${this.target}"
class="swap-token-button"
size="md"
variant="accent"
@click=${this.onSelectToken.bind(this)}
>
Select token
</wui-button>`}tokenBalanceTemplate(){const e=D.multiply(this.balance,this.price),i=e?e?.gt(ee):!1;return u`
${i?u`<wui-text variant="small-400" color="fg-200">
${x.formatNumberToLocalString(this.balance,2)}
</wui-text>`:null}
${this.target==="sourceToken"?this.tokenActionButtonTemplate(i):null}
`}tokenActionButtonTemplate(e){return e?u` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
<wui-text color="accent-100" variant="small-600">Max</wui-text>
</button>`:u` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
<wui-text color="accent-100" variant="small-600">Buy</wui-text>
</button>`}onFocusChange(e){this.focused=e}onSelectToken(){O.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),T.push("SwapSelectToken",{target:this.target})}onBuyToken(){T.push("OnRampProviders")}};m.styles=[J];v([w()],m.prototype,"focused",void 0);v([w()],m.prototype,"balance",void 0);v([w()],m.prototype,"value",void 0);v([w()],m.prototype,"price",void 0);v([w()],m.prototype,"marketValue",void 0);v([w()],m.prototype,"disabled",void 0);v([w()],m.prototype,"target",void 0);v([w()],m.prototype,"token",void 0);v([w()],m.prototype,"onSetAmount",void 0);v([w()],m.prototype,"onSetMaxValue",void 0);m=v([P("w3m-swap-input")],m);const te=A`
:host > wui-flex:first-child {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
:host > wui-flex:first-child::-webkit-scrollbar {
display: none;
}
wui-loading-hexagon {
position: absolute;
}
.action-button {
width: 100%;
border-radius: var(--wui-border-radius-xs);
}
.action-button:disabled {
border-color: 1px solid var(--wui-color-gray-glass-005);
}
.swap-inputs-container {
position: relative;
}
.replace-tokens-button-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: var(--wui-spacing-1xs);
border-radius: var(--wui-border-radius-xs);
background-color: var(--wui-color-modal-bg-base);
padding: var(--wui-spacing-xxs);
}
.replace-tokens-button-container > button {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
padding: var(--wui-spacing-xs);
border: none;
border-radius: var(--wui-border-radius-xxs);
background: var(--wui-color-gray-glass-002);
transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1);
will-change: background-color;
z-index: 20;
}
.replace-tokens-button-container > button:hover {
background: var(--wui-color-gray-glass-005);
}
.details-container > wui-flex {
background: var(--wui-color-gray-glass-002);
border-radius: var(--wui-border-radius-xxs);
width: 100%;
}
.details-container > wui-flex > button {
border: none;
background: none;
padding: var(--wui-spacing-s);
border-radius: var(--wui-border-radius-xxs);
transition: background 0.2s linear;
}
.details-container > wui-flex > button:hover {
background: var(--wui-color-gray-glass-002);
}
.details-content-container {
padding: var(--wui-spacing-1xs);
display: flex;
align-items: center;
justify-content: center;
}
.details-content-container > wui-flex {
width: 100%;
}
.details-row {
width: 100%;
padding: var(--wui-spacing-s) var(--wui-spacing-xl);
border-radius: var(--wui-border-radius-xxs);
background: var(--wui-color-gray-glass-002);
}
`;var h=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};let p=class extends C{constructor(){super(),this.unsubscribe=[],this.initialParams=T.state.data?.swap,this.detailsOpen=!1,this.caipAddress=U.state.caipAddress,this.caipNetworkId=I.state.activeCaipNetwork?.caipNetworkId,this.initialized=o.state.initialized,this.loadingQuote=o.state.loadingQuote,this.loadingPrices=o.state.loadingPrices,this.loadingTransaction=o.state.loadingTransaction,this.sourceToken=o.state.sourceToken,this.sourceTokenAmount=o.state.sourceTokenAmount,this.sourceTokenPriceInUSD=o.state.sourceTokenPriceInUSD,this.toToken=o.state.toToken,this.toTokenAmount=o.state.toTokenAmount,this.toTokenPriceInUSD=o.state.toTokenPriceInUSD,this.inputError=o.state.inputError,this.fetchError=o.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=K.debounce(async()=>{await o.swapTokens()},200),I.subscribeKey("activeCaipNetwork",e=>this.onCaipNetworkChange({newCaipNetwork:e,resetSwapState:!0,initializeSwapState:!1})),U.subscribeKey("caipAddress",e=>this.onCaipAddressChange({newCaipAddress:e,resetSwapState:!0,initializeSwapState:!1})),this.unsubscribe.push(I.subscribeKey("activeCaipNetwork",e=>this.onCaipNetworkChange({newCaipNetwork:e,resetSwapState:!1,initializeSwapState:!0})),U.subscribeKey("caipAddress",e=>this.onCaipAddressChange({newCaipAddress:e,resetSwapState:!1,initializeSwapState:!0})),F.subscribeKey("open",e=>{e||o.resetState()}),T.subscribeKey("view",e=>{e.includes("Swap")||o.resetValues()}),o.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.sourceToken&&e.toToken&&this.watchTokensAndValues()}))}async firstUpdated(){o.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(e=>e?.()),clearInterval(this.interval),document?.removeEventListener("visibilitychange",this.visibilityChangeHandler)}render(){return u`
<wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s">
${this.initialized?this.templateSwap():this.templateLoading()}
</wui-flex>
`}subscribeToVisibilityChange(){document?.removeEventListener("visibilitychange",this.visibilityChangeHandler),document?.addEventListener("visibilitychange",this.visibilityChangeHandler)}fetchTokensAndValues(){o.getNetworkTokenPrice(),o.getMyTokensWithBalance(),o.swapTokens(),this.lastTokenPriceUpdate=Date.now()}templateSwap(){return u`
<wui-flex flexDirection="column" gap="s">
<wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container">
${this.templateTokenInput("sourceToken",this.sourceToken)}
${this.templateTokenInput("toToken",this.toToken)} ${this.templateReplaceTokensButton()}
</wui-flex>
${this.templateDetails()} ${this.templateActionButton()}
</wui-flex>
`}actionButtonLabel(){return this.fetchError?"Swap":!this.sourceToken||!this.toToken?"Select token":this.sourceTokenAmount?this.inputError?this.inputError:"Review swap":"Enter amount"}templateReplaceTokensButton(){return u`
<wui-flex class="replace-tokens-button-container">
<button @click=${this.onSwitchTokens.bind(this)}>
<wui-icon name="recycleHorizontal" color="fg-250" size="lg"></wui-icon>
</button>
</wui-flex>
`}templateLoading(){return u`
<wui-flex flexDirection="column" gap="l">
<wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container">
<w3m-swap-input-skeleton target="sourceToken"></w3m-swap-input-skeleton>
<w3m-swap-input-skeleton target="toToken"></w3m-swap-input-skeleton>
${this.templateReplaceTokensButton()}
</wui-flex>
${this.templateActionButton()}
</wui-flex>
`}templateTokenInput(e,i){const n=o.state.myTokensWithBalance?.find(c=>c?.address===i?.address),r=e==="toToken"?this.toTokenAmount:this.sourceTokenAmount,t=e==="toToken"?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,a=D.parseLocalStringToNumber(r)*t;return u`<w3m-swap-input
.value=${e==="toToken"?this.toTokenAmount:this.sourceTokenAmount}
.disabled=${e==="toToken"}
.onSetAmount=${this.handleChangeAmount.bind(this)}
target=${e}
.token=${i}
.balance=${n?.quantity?.numeric}
.price=${n?.price}
.marketValue=${a}
.onSetMaxValue=${this.onSetMaxValue.bind(this)}
></w3m-swap-input>`}onSetMaxValue(e,i){const n=D.bigNumber(i||"0");this.handleChangeAmount(e,n.gt(0)?n.toFixed(20):"0")}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:u`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}handleChangeAmount(e,i){o.clearError(),e==="sourceToken"?o.setSourceTokenAmount(i):o.setToTokenAmount(i),this.onDebouncedGetSwapCalldata()}templateActionButton(){const e=!this.toToken||!this.sourceToken,i=!this.sourceTokenAmount,n=this.loadingQuote||this.loadingPrices||this.loadingTransaction,r=n||e||i||this.inputError;return u` <wui-flex gap="xs">
<wui-button
data-testid="swap-action-button"
class="action-button"
fullWidth
size="lg"
borderRadius="xs"
variant=${e?"neutral":"main"}
.loading=${n}
.disabled=${r}
@click=${this.onSwapPreview.bind(this)}
>
${this.actionButtonLabel()}
</wui-button>
</wui-flex>`}onSwitchTokens(){o.switchTokens()}async onSwapPreview(){this.fetchError&&await o.swapTokens(),O.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:M(I.state.activeChain)===Q.ACCOUNT_TYPES.SMART_ACCOUNT}}),T.push("SwapPreview")}async handleSwapParameters(){this.initialParams&&(o.state.initialized||await new Promise(i=>{const n=o.subscribeKey("initialized",r=>{r&&(n?.(),i())})}),await this.setSwapParameters(this.initialParams))}async setSwapParameters({amount:e,fromToken:i,toToken:n}){(!o.state.tokens||!o.state.myTokensWithBalance)&&await new Promise(a=>{const c=o.subscribeKey("myTokensWithBalance",E=>{E&&E.length>0&&(c?.(),a())});setTimeout(()=>{c?.(),a()},5e3)});const r=[...o.state.tokens||[],...o.state.myTokensWithBalance||[]];if(i){const t=r.find(a=>a.symbol.toLowerCase()===i.toLowerCase());t&&o.setSourceToken(t)}if(n){const t=r.find(a=>a.symbol.toLowerCase()===n.toLowerCase());t&&o.setToToken(t)}e&&!isNaN(Number(e))&&o.setSourceTokenAmount(e)}onCaipAddressChange({newCaipAddress:e,resetSwapState:i,initializeSwapState:n}){this.caipAddress!==e&&(this.caipAddress=e,i&&o.resetState(),n&&o.initializeState())}onCaipNetworkChange({newCaipNetwork:e,resetSwapState:i,initializeSwapState:n}){this.caipNetworkId!==e?.caipNetworkId&&(this.caipNetworkId=e?.caipNetworkId,i&&o.resetState(),n&&o.initializeState())}};p.styles=te;h([w({type:Object})],p.prototype,"initialParams",void 0);h([s()],p.prototype,"interval",void 0);h([s()],p.prototype,"detailsOpen",void 0);h([s()],p.prototype,"caipAddress",void 0);h([s()],p.prototype,"caipNetworkId",void 0);h([s()],p.prototype,"initialized",void 0);h([s()],p.prototype,"loadingQuote",void 0);h([s()],p.prototype,"loadingPrices",void 0);h([s()],p.prototype,"loadingTransaction",void 0);h([s()],p.prototype,"sourceToken",void 0);h([s()],p.prototype,"sourceTokenAmount",void 0);h([s()],p.prototype,"sourceTokenPriceInUSD",void 0);h([s()],p.prototype,"toToken",void 0);h([s()],p.prototype,"toTokenAmount",void 0);h([s()],p.prototype,"toTokenPriceInUSD",void 0);h([s()],p.prototype,"inputError",void 0);h([s()],p.prototype,"fetchError",void 0);h([s()],p.prototype,"lastTokenPriceUpdate",void 0);p=h([P("w3m-swap-view")],p);const ie=A`
:host > wui-flex:first-child {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
:host > wui-flex:first-child::-webkit-scrollbar {
display: none;
}
.preview-container,
.details-container {
width: 100%;
}
.token-image {
width: 24px;
height: 24px;
box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
border-radius: 12px;
}
wui-loading-hexagon {
position: absolute;
}
.token-item {
display: flex;
align-items: center;
justify-content: center;
gap: var(--wui-spacing-xxs);
padding: var(--wui-spacing-xs);
height: 40px;
border: none;
border-radius: 80px;
background: var(--wui-color-gray-glass-002);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
cursor: pointer;
transition: background 0.2s linear;
}
.token-item:hover {
background: var(--wui-color-gray-glass-005);
}
.preview-token-details-container {
width: 100%;
}
.details-row {
width: 100%;
padding: var(--wui-spacing-s) var(--wui-spacing-xl);
border-radius: var(--wui-border-radius-xxs);
background: var(--wui-color-gray-glass-002);
}
.action-buttons-container {
width: 100%;
gap: var(--wui-spacing-xs);
}
.action-buttons-container > button {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
height: 48px;
border-radius: var(--wui-border-radius-xs);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
}
.action-buttons-container > button:disabled {
opacity: 0.8;
cursor: not-allowed;
}
.action-button > wui-loading-spinner {
display: inline-block;
}
.cancel-button:hover,
.action-button:hover {
cursor: pointer;
}
.action-buttons-container > wui-button.cancel-button {
flex: 2;
}
.action-buttons-container > wui-button.action-button {
flex: 4;
}
.action-buttons-container > button.action-button > wui-text {
color: white;
}
.details-container > wui-flex {
background: var(--wui-color-gray-glass-002);
border-radius: var(--wui-border-radius-xxs);
width: 100%;
}
.details-container > wui-flex > button {
border: none;
background: none;
padding: var(--wui-spacing-s);
border-radius: var(--wui-border-radius-xxs);
transition: background 0.2s linear;
}
.details-container > wui-flex > button:hover {
background: var(--wui-color-gray-glass-002);
}
.details-content-container {
padding: var(--wui-spacing-1xs);
display: flex;
align-items: center;
justify-content: center;
}
.details-content-container > wui-flex {
width: 100%;
}
.details-row {
width: 100%;
padding: var(--wui-spacing-s) var(--wui-spacing-xl);
border-radius: var(--wui-border-radius-xxs);
background: var(--wui-color-gray-glass-002);
}
`;var g=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};let d=class extends C{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=o.state.approvalTransaction,this.swapTransaction=o.state.swapTransaction,this.sourceToken=o.state.sourceToken,this.sourceTokenAmount=o.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=o.state.sourceTokenPriceInUSD,this.toToken=o.state.toToken,this.toTokenAmount=o.state.toTokenAmount??"",this.toTokenPriceInUSD=o.state.toTokenPriceInUSD,this.caipNetwork=I.state.activeCaipNetwork,this.balanceSymbol=U.state.balanceSymbol,this.inputError=o.state.inputError,this.loadingQuote=o.state.loadingQuote,this.loadingApprovalTransaction=o.state.loadingApprovalTransaction,this.loadingBuildTransaction=o.state.loadingBuildTransaction,this.loadingTransaction=o.state.loadingTransaction,this.unsubscribe.push(U.subscribeKey("balanceSymbol",e=>{this.balanceSymbol!==e&&T.goBack()}),I.subscribeKey("activeCaipNetwork",e=>{this.caipNetwork!==e&&(this.caipNetwork=e)}),o.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&&T.goBack(),this.loadingQuote=e.loadingQuote,this.loadingApprovalTransaction=e.loadingApprovalTransaction,this.loadingBuildTransaction=e.loadingBuildTransaction,this.loadingTransaction=e.loadingTransaction}))}firstUpdated(){o.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(e=>e?.()),clearInterval(this.interval)}render(){return u`
<wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s">
${this.templateSwap()}
</wui-flex>
`}refreshTransaction(){this.interval=setInterval(()=>{o.getApprovalLoadingState()||o.getTransaction()},1e4)}templateSwap(){const e=`${x.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${this.sourceToken?.symbol}`,i=`${x.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${this.toToken?.symbol}`,n=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,r=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,t=x.formatNumberToLocalString(n),a=x.formatNumberToLocalString(r),c=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return u`
<wui-flex flexDirection="column" alignItems="center" gap="l">
<wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="l">
<wui-flex
class="preview-token-details-container"
alignItems="center"
justifyContent="space-between"
gap="l"
>
<wui-flex flexDirection="column" alignItems="flex-start" gap="4xs">
<wui-text variant="small-400" color="fg-150">Send</wui-text>
<wui-text variant="paragraph-400" color="fg-100">$${t}</wui-text>
</wui-flex>
<wui-token-button
flexDirection="row-reverse"
text=${e}
imageSrc=${this.sourceToken?.logoUri}
>
</wui-token-button>
</wui-flex>
<wui-icon name="recycleHorizontal" color="fg-200" size="md"></wui-icon>
<wui-flex
class="preview-token-details-container"
alignItems="center"
justifyContent="space-between"
gap="l"
>
<wui-flex flexDirection="column" alignItems="flex-start" gap="4xs">
<wui-text variant="small-400" color="fg-150">Receive</wui-text>
<wui-text variant="paragraph-400" color="fg-100">$${a}</wui-text>
</wui-flex>
<wui-token-button
flexDirection="row-reverse"
text=${i}
imageSrc=${this.toToken?.logoUri}
>
</wui-token-button>
</wui-flex>
</wui-flex>
${this.templateDetails()}
<wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="xs">
<wui-icon size="sm" color="fg-200" name="infoCircle"></wui-icon>
<wui-text variant="small-400" color="fg-200">Review transaction carefully</wui-text>
</wui-flex>
<wui-flex
class="action-buttons-container"
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap="xs"
>
<wui-button
class="cancel-button"
fullWidth
size="lg"
borderRadius="xs"
variant="neutral"
@click=${this.onCancelTransaction.bind(this)}
>
<wui-text variant="paragraph-600" color="fg-200">Cancel</wui-text>
</wui-button>
<wui-button
class="action-button"
fullWidth
size="lg"
borderRadius="xs"
variant="main"
?loading=${c}
?disabled=${c}
@click=${this.onSendTransaction.bind(this)}
>
<wui-text variant="paragraph-600" color="inverse-100">
${this.actionButtonLabel()}
</wui-text>
</wui-button>
</wui-flex>
</wui-flex>
`}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:u`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){T.goBack()}onSendTransaction(){this.approvalTransaction?o.sendTransactionForApproval(this.approvalTransaction):o.sendTransactionForSwap(this.swapTransaction)}};d.styles=ie;g([s()],d.prototype,"interval",void 0);g([s()],d.prototype,"detailsOpen",void 0);g([s()],d.prototype,"approvalTransaction",void 0);g([s()],d.prototype,"swapTransaction",void 0);g([s()],d.prototype,"sourceToken",void 0);g([s()],d.prototype,"sourceTokenAmount",void 0);g([s()],d.prototype,"sourceTokenPriceInUSD",void 0);g([s()],d.prototype,"toToken",void 0);g([s()],d.prototype,"toTokenAmount",void 0);g([s()],d.prototype,"toTokenPriceInUSD",void 0);g([s()],d.prototype,"caipNetwork",void 0);g([s()],d.prototype,"balanceSymbol",void 0);g([s()],d.prototype,"inputError",void 0);g([s()],d.prototype,"loadingQuote",void 0);g([s()],d.prototype,"loadingApprovalTransaction",void 0);g([s()],d.prototype,"loadingBuildTransaction",void 0);g([s()],d.prototype,"loadingTransaction",void 0);d=g([P("w3m-swap-preview-view")],d);const oe=A`
:host {
height: 60px;
min-height: 60px;
}
:host > wui-flex {
cursor: pointer;
height: 100%;
display: flex;
column-gap: var(--wui-spacing-s);
padding: var(--wui-spacing-xs);
padding-right: var(--wui-spacing-l);
width: 100%;
background-color: transparent;
border-radius: var(--wui-border-radius-xs);
color: var(--wui-color-fg-250);
transition:
background-color var(--wui-ease-out-power-1) var(--wui-duration-lg),
opacity var(--wui-ease-out-power-1) var(--wui-duration-lg);
will-change: background-color, opacity;
}
@media (hover: hover) and (pointer: fine) {
:host > wui-flex:hover {
background-color: var(--wui-color-gray-glass-002);
}
:host > wui-flex:active {
background-color: var(--wui-color-gray-glass-005);
}
}
:host([disabled]) > wui-flex {
opacity: 0.6;
}
:host([disabled]) > wui-flex:hover {
background-color: transparent;
}
:host > wui-flex > wui-flex {
flex: 1;
}
:host > wui-flex > wui-image,
:host > wui-flex > .token-item-image-placeholder {
width: 40px;
max-width: 40px;
height: 40px;
border-radius: var(--wui-border-radius-3xl);
position: relative;
}
:host > wui-flex > .token-item-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
:host > wui-flex > wui-image::after,
:host > wui-flex > .token-item-image-placeholder::after {
position: absolute;
content: '';
inset: 0;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
border-radius: var(--wui-border-radius-l);
}
button > wui-icon-box[data-variant='square-blue'] {
border-radius: var(--wui-border-radius-3xs);
position: relative;
border: none;
width: 36px;
height: 36px;
}
`;var $=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};let y=class extends C{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(e=>{e.forEach(i=>{i.isIntersecting?this.visible=!0:this.visible=!1})},{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}render(){if(!this.visible)return null;const e=this.amount&&this.price?D.multiply(this.price,this.amount)?.toFixed(3):null;return u`
<wui-flex alignItems="center">
${this.visualTemplate()}
<wui-flex flexDirection="column" gap="3xs">
<wui-flex justifyContent="space-between">
<wui-text variant="paragraph-500" color="fg-100" lineClamp="1">${this.name}</wui-text>
${e?u`
<wui-text variant="paragraph-500" color="fg-100">
$${x.formatNumberToLocalString(e,3)}
</wui-text>
`:null}
</wui-flex>
<wui-flex justifyContent="space-between">
<wui-text variant="small-400" color="fg-200" lineClamp="1">${this.symbol}</wui-text>
${this.amount?u`<wui-text variant="small-400" color="fg-200">
${x.formatNumberToLocalString(this.amount,3)}
</wui-text>`:null}
</wui-flex>
</wui-flex>
</wui-flex>
`}visualTemplate(){return this.imageError?u`<wui-flex class="token-item-image-placeholder">
<wui-icon name="image" color="inherit"></wui-icon>
</wui-flex>`:this.imageSrc?u`<wui-image
width="40"
height="40"
src=${this.imageSrc}
@onLoadError=${this.imageLoadError}
></wui-image>`:null}imageLoadError(){this.imageError=!0}};y.styles=[H,q,oe];$([w()],y.prototype,"imageSrc",void 0);$([w()],y.prototype,"name",void 0);$([w()],y.prototype,"symbol",void 0);$([w()],y.prototype,"price",void 0);$([w()],y.prototype,"amount",void 0);$([s()],y.prototype,"visible",void 0);$([s()],y.prototype,"imageError",void 0);y=$([P("wui-token-list-item")],y);const ne=A`
:host {
--tokens-scroll--top-opacity: 0;
--tokens-scroll--bottom-opacity: 1;
--suggested-tokens-scroll--left-opacity: 0;
--suggested-tokens-scroll--right-opacity: 1;
}
:host > wui-flex:first-child {
overflow-y: hidden;
overflow-x: hidden;
scrollbar-width: none;
scrollbar-height: none;
}
:host > wui-flex:first-child::-webkit-scrollbar {
display: none;
}
wui-loading-hexagon {
position: absolute;
}
.suggested-tokens-container {
overflow-x: auto;
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 0px,
rgba(200, 200, 200, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 1px,
black 50px,
black 90px,
black calc(100% - 90px),
black calc(100% - 50px),
rgba(155, 155, 155, calc(1 - var(--suggested-tokens-scroll--right-opacity))) calc(100% - 1px),
rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--right-opacity))) 100%
);
}
.suggested-tokens-container::-webkit-scrollbar {
display: none;
}
.tokens-container {
border-top: 1px solid var(--wui-color-gray-glass-005);
height: 100%;
max-height: 390px;
}
.tokens {
width: 100%;
overflow-y: auto;
mask-image: linear-gradient(
to bottom,
rgba(0, 0, 0, calc(1 - var(--tokens-scroll--top-opacity))) 0px,
rgba(200, 200, 200, calc(1 - var(--tokens-scroll--top-opacity))) 1px,
black 50px,
black 90px,
black calc(100% - 90px),
black calc(100% - 50px),
rgba(155, 155, 155, calc(1 - var(--tokens-scroll--bottom-opacity))) calc(100% - 1px),
rgba(0, 0, 0, calc(1 - var(--tokens-scroll--bottom-opacity))) 100%
);
}
.network-search-input,
.select-network-button {
height: 40px;
}
.select-network-button {
border: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--wui-spacing-xs);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
background-color: transparent;
border-radius: var(--wui-border-radius-xxs);
padding: var(--wui-spacing-xs);
align-items: center;
transition: background-color 0.2s linear;
}
.select-network-button:hover {
background-color: var(--wui-color-gray-glass-002);
}
.select-network-button > wui-image {
width: 26px;
height: 26px;
border-radius: var(--wui-border-radius-xs);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
}
`;var S=function(l,e,i,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(l,e,i,n);else for(var c=l.length-1;c>=0;c--)(a=l[c])&&(t=(r<3?a(t):r>3?a(e,i,t):a(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};let k=class extends C{constructor(){super(),this.unsubscribe=[],this.targetToken=T.state.data?.target,this.sourceToken=o.state.sourceToken,this.sourceTokenAmount=o.state.sourceTokenAmount,this.toToken=o.state.toToken,this.myTokensWithBalance=o.state.myTokensWithBalance,this.popularTokens=o.state.popularTokens,this.searchValue="",this.unsubscribe.push(o.subscribe(e=>{this.sourceToken=e.sourceToken,this.toToken=e.toToken,this.myTokensWithBalance=e.myTokensWithBalance}))}updated(){this.renderRoot?.querySelector(".suggested-tokens-container")?.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),this.renderRoot?.querySelector(".tokens")?.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){super.disconnectedCallback();const e=this.renderRoot?.querySelector(".suggested-tokens-container"),i=this.renderRoot?.querySelector(".tokens");e?.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),i?.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return u`
<wui-flex flexDirection="column" gap="s">
${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
</wui-flex>
`}onSelectToken(e){this.targetToken==="sourceToken"?o.setSourceToken(e):(o.setToToken(e),this.sourceToken&&this.sourceTokenAmount&&o.swapTokens()),T.goBack()}templateSearchInput(){return u`
<wui-flex .padding=${["3xs","s","0","s"]} gap="xs">
<wui-input-text
data-testid="swap-select-token-search-input"
class="network-search-input"
size="sm"
placeholder="Search token"
icon="search"
.value=${this.searchValue}
@inputChange=${this.onSearchInputChange.bind(this)}
></wui-input-text>
</wui-flex>
`}templateTokens(){const e=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],i=this.popularTokens?this.popularTokens:[],n=this.filterTokensWithText(e,this.searchValue),r=this.filterTokensWithText(i,this.searchValue);return u`
<wui-flex class="tokens-container">
<wui-flex class="tokens" .padding=${["0","s","s","s"]} flexDirection="column">
${n?.length>0?u`
<wui-flex justifyContent="flex-start" padding="s">
<wui-text variant="paragraph-500" color="fg-200">Your tokens</wui-text>
</wui-flex>
${n.map(t=>{const a=t.symbol===this.sourceToken?.symbol||t.symbol===this.toToken?.symbol;return u`
<wui-token-list-item
data-testid="swap-select-token-item-${t.symbol}"
name=${t.name}
?disabled=${a}
symbol=${t.symbol}
price=${t?.price}
amount=${t?.quantity?.numeric}
imageSrc=${t.logoUri}
@click=${()=>{a||this.onSelectToken(t)}}
>
</wui-token-list-item>
`})}
`:null}
<wui-flex justifyContent="flex-start" padding="s">
<wui-text variant="paragraph-500" color="fg-200">Tokens</wui-text>
</wui-flex>
${r?.length>0?r.map(t=>u`
<wui-token-list-item
data-testid="swap-select-token-item-${t.symbol}"
name=${t.name}
symbol=${t.symbol}
imageSrc=${t.logoUri}
@click=${()=>this.onSelectToken(t)}
>
</wui-token-list-item>
`):null}
</wui-flex>
</wui-flex>
`}templateSuggestedTokens(){const e=o.state.suggestedTokens?o.state.suggestedTokens.slice(0,8):null;return e?u`
<wui-flex class="suggested-tokens-container" .padding=${["0","s","0","s"]} gap="xs">
${e.map(i=>u`
<wui-token-button
text=${i.symbol}
imageSrc=${i.logoUri}
@click=${()=>this.onSelectToken(i)}
>
</wui-token-button>
`)}
</wui-flex>
`:null}onSearchInputChange(e){this.searchValue=e.detail}handleSuggestedTokensScroll(){const e=this.renderRoot?.querySelector(".suggested-tokens-container");e&&(e.style.setProperty("--suggested-tokens-scroll--left-opacity",L.interpolate([0,100],[0,1],e.scrollLeft).toString()),e.style.setProperty("--suggested-tokens-scroll--right-opacity",L.interpolate([0,100],[0,1],e.scrollWidth-e.scrollLeft-e.offsetWidth).toString()))}handleTokenListScroll(){const e=this.renderRoot?.querySelector(".tokens");e&&(e.style.setProperty("--tokens-scroll--top-opacity",L.interpolate([0,100],[0,1],e.scrollTop).toString()),e.style.setProperty("--tokens-scroll--bottom-opacity",L.interpolate([0,100],[0,1],e.scrollHeight-e.scrollTop-e.offsetHeight).toString()))}filterTokensWithText(e,i){return e.filter(n=>`${n.symbol} ${n.name} ${n.address}`.toLowerCase().includes(i.toLowerCase()))}};k.styles=ne;S([s()],k.prototype,"interval",void 0);S([s()],k.prototype,"targetToken",void 0);S([s()],k.prototype,"sourceToken",void 0);S([s()],k.prototype,"sourceTokenAmount",void 0);S([s()],k.prototype,"toToken",void 0);S([s()],k.prototype,"myTokensWithBalance",void 0);S([s()],k.prototype,"popularTokens",void 0);S([s()],k.prototype,"searchValue",void 0);k=S([P("w3m-swap-select-token-view")],k);export{d as W3mSwapPreviewView,k as W3mSwapSelectTokenView,p as W3mSwapView};
Reference in New Issue View Git Blame Copy Permalink