@multiversx/sdk-dapp-liquidity 1.0.12 → 1.0.14

package/swaps-DRUV6d3p.mjs

@@ -0,0 +1,1954 @@
+import { i, f as i$1, x, c as resetStyles, e as elementStyles } from "./bitcoin-dNBGbS2B.mjs";
+import { r, n, c as customElement, U as UiHelperUtil } from "./if-defined-DjC5UMfF.mjs";
+import "./index-DT_mc1hV.mjs";
+import { M as MathUtil } from "./index-CWIHaLkQ.mjs";
+import "./index-NNZ1lNuc.mjs";
+import { c as ChainController, N as NumberUtil, i as ConstantsUtil, E as EventsController, R as RouterController, A as AccountController, d as CoreHelperUtil, M as ModalController, g as getPreferredAccountType, W as W3mFrameRpcConstants } from "./react-BWxe90Ar.mjs";
+import { S as SwapController } from "./index-DN4fGDgg.mjs";
+import "./index-B-dx8l0g.mjs";
+import "./index-xBD0nXoB.mjs";
+import "./index--O5ypTeK.mjs";
+const InputUtil = {
+  numericInputKeyDown(event, currentValue, onChange) {
+    const allowedKeys = [
+      "Backspace",
+      "Meta",
+      "Ctrl",
+      "a",
+      "A",
+      "c",
+      "C",
+      "x",
+      "X",
+      "v",
+      "V",
+      "ArrowLeft",
+      "ArrowRight",
+      "Tab"
+    ];
+    const controlPressed = event.metaKey || event.ctrlKey;
+    const eventKey = event.key;
+    const lowercaseEventKey = eventKey.toLocaleLowerCase();
+    const selectAll = lowercaseEventKey === "a";
+    const copyKey = lowercaseEventKey === "c";
+    const pasteKey = lowercaseEventKey === "v";
+    const cutKey = lowercaseEventKey === "x";
+    const isComma = eventKey === ",";
+    const isDot = eventKey === ".";
+    const isNumericKey = eventKey >= "0" && eventKey <= "9";
+    if (!controlPressed && (selectAll || copyKey || pasteKey || cutKey)) {
+      event.preventDefault();
+    }
+    if (currentValue === "0" && !isComma && !isDot && eventKey === "0") {
+      event.preventDefault();
+    }
+    if (currentValue === "0" && isNumericKey) {
+      onChange(eventKey);
+      event.preventDefault();
+    }
+    if (isComma || isDot) {
+      if (!currentValue) {
+        onChange("0.");
+        event.preventDefault();
+      }
+      if ((currentValue == null ? void 0 : currentValue.includes(".")) || (currentValue == null ? void 0 : currentValue.includes(","))) {
+        event.preventDefault();
+      }
+    }
+    if (!isNumericKey && !allowedKeys.includes(eventKey) && !isDot && !isComma) {
+      event.preventDefault();
+    }
+  }
+};
+const styles$6 = i`
+  :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 __decorate$6 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const slippageRate = ConstantsUtil.CONVERT_SLIPPAGE_TOLERANCE;
+let WuiSwapDetails = class WuiSwapDetails2 extends i$1 {
+  constructor() {
+    var _a;
+    super();
+    this.unsubscribe = [];
+    this.networkName = (_a = ChainController.state.activeCaipNetwork) == null ? void 0 : _a.name;
+    this.detailsOpen = false;
+    this.sourceToken = SwapController.state.sourceToken;
+    this.toToken = SwapController.state.toToken;
+    this.toTokenAmount = SwapController.state.toTokenAmount;
+    this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
+    this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;
+    this.priceImpact = SwapController.state.priceImpact;
+    this.maxSlippage = SwapController.state.maxSlippage;
+    this.networkTokenSymbol = SwapController.state.networkTokenSymbol;
+    this.inputError = SwapController.state.inputError;
+    this.unsubscribe.push(...[
+      SwapController.subscribe((newState) => {
+        this.sourceToken = newState.sourceToken;
+        this.toToken = newState.toToken;
+        this.toTokenAmount = newState.toTokenAmount;
+        this.priceImpact = newState.priceImpact;
+        this.maxSlippage = newState.maxSlippage;
+        this.sourceTokenPriceInUSD = newState.sourceTokenPriceInUSD;
+        this.toTokenPriceInUSD = newState.toTokenPriceInUSD;
+        this.inputError = newState.inputError;
+      })
+    ]);
+  }
+  render() {
+    const minReceivedAmount = this.toTokenAmount && this.maxSlippage ? NumberUtil.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString() : null;
+    if (!this.sourceToken || !this.toToken || this.inputError) {
+      return null;
+    }
+    const toTokenSwappedAmount = this.sourceTokenPriceInUSD && this.toTokenPriceInUSD ? 1 / this.toTokenPriceInUSD * this.sourceTokenPriceInUSD : 0;
+    return x`
+      <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} =
+                  ${UiHelperUtil.formatNumberToLocalString(toTokenSwappedAmount, 3)}
+                  ${this.toToken.symbol}
+                </wui-text>
+                <wui-text variant="small-400" color="fg-200">
+                  $${UiHelperUtil.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
+                </wui-text>
+              </wui-flex>
+              <wui-icon name="chevronBottom"></wui-icon>
+            </wui-flex>
+          </button>
+          ${this.detailsOpen ? x`
+                <wui-flex flexDirection="column" gap="xs" class="details-content-container">
+                  ${this.priceImpact ? x` <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">
+                              ${UiHelperUtil.formatNumberToLocalString(this.priceImpact, 3)}%
+                            </wui-text>
+                          </wui-flex>
+                        </wui-flex>
+                      </wui-flex>` : null}
+                  ${this.maxSlippage && this.sourceToken.symbol ? x`<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. ${minReceivedAmount ? `Transaction will be reversed if you receive less than ${UiHelperUtil.formatNumberToLocalString(minReceivedAmount, 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">
+                              ${UiHelperUtil.formatNumberToLocalString(this.maxSlippage, 6)}
+                              ${this.toToken.symbol} ${slippageRate}%
+                            </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;
+  }
+};
+WuiSwapDetails.styles = [styles$6];
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "networkName", void 0);
+__decorate$6([
+  n()
+], WuiSwapDetails.prototype, "detailsOpen", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "sourceToken", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "toToken", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "toTokenAmount", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "sourceTokenPriceInUSD", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "toTokenPriceInUSD", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "priceImpact", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "maxSlippage", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "networkTokenSymbol", void 0);
+__decorate$6([
+  r()
+], WuiSwapDetails.prototype, "inputError", void 0);
+WuiSwapDetails = __decorate$6([
+  customElement("w3m-swap-details")
+], WuiSwapDetails);
+const styles$5 = i`
+  :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 __decorate$5 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mSwapInputSkeleton = class W3mSwapInputSkeleton2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.target = "sourceToken";
+  }
+  render() {
+    return x`
+      <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 x`
+      <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>
+    `;
+  }
+};
+W3mSwapInputSkeleton.styles = [styles$5];
+__decorate$5([
+  n()
+], W3mSwapInputSkeleton.prototype, "target", void 0);
+W3mSwapInputSkeleton = __decorate$5([
+  customElement("w3m-swap-input-skeleton")
+], W3mSwapInputSkeleton);
+const styles$4 = i`
+  :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 __decorate$4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+const MINIMUM_USD_VALUE_TO_CONVERT = 5e-5;
+let W3mSwapInput = class W3mSwapInput2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.focused = false;
+    this.price = 0;
+    this.target = "sourceToken";
+    this.onSetAmount = null;
+    this.onSetMaxValue = null;
+  }
+  render() {
+    const marketValue = this.marketValue || "0";
+    const isMarketValueGreaterThanZero = NumberUtil.bigNumber(marketValue).gt("0");
+    return x`
+      <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(true)}
+            @focusout=${() => this.onFocusChange(false)}
+            ?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">
+            ${isMarketValueGreaterThanZero ? `$${UiHelperUtil.formatNumberToLocalString(this.marketValue, 2)}` : null}
+          </wui-text>
+        </wui-flex>
+        ${this.templateTokenSelectButton()}
+      </wui-flex>
+    `;
+  }
+  handleKeydown(event) {
+    return InputUtil.numericInputKeyDown(event, this.value, (value) => {
+      var _a;
+      return (_a = this.onSetAmount) == null ? void 0 : _a.call(this, this.target, value);
+    });
+  }
+  dispatchInputChangeEvent(event) {
+    if (!this.onSetAmount) {
+      return;
+    }
+    const value = event.target.value.replace(/[^0-9.]/gu, "");
+    if (value === "," || value === ".") {
+      this.onSetAmount(this.target, "0.");
+    } else if (value.endsWith(",")) {
+      this.onSetAmount(this.target, value.replace(",", "."));
+    } else {
+      this.onSetAmount(this.target, value);
+    }
+  }
+  setMaxValueToInput() {
+    var _a;
+    (_a = this.onSetMaxValue) == null ? void 0 : _a.call(this, this.target, this.balance);
+  }
+  templateTokenSelectButton() {
+    if (!this.token) {
+      return x` <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>`;
+    }
+    return x`
+      <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>
+    `;
+  }
+  tokenBalanceTemplate() {
+    const balanceValueInUSD = NumberUtil.multiply(this.balance, this.price);
+    const haveBalance = balanceValueInUSD ? balanceValueInUSD == null ? void 0 : balanceValueInUSD.gt(MINIMUM_USD_VALUE_TO_CONVERT) : false;
+    return x`
+      ${haveBalance ? x`<wui-text variant="small-400" color="fg-200">
+            ${UiHelperUtil.formatNumberToLocalString(this.balance, 2)}
+          </wui-text>` : null}
+      ${this.target === "sourceToken" ? this.tokenActionButtonTemplate(haveBalance) : null}
+    `;
+  }
+  tokenActionButtonTemplate(haveBalance) {
+    if (haveBalance) {
+      return x` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
+        <wui-text color="accent-100" variant="small-600">Max</wui-text>
+      </button>`;
+    }
+    return x` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
+      <wui-text color="accent-100" variant="small-600">Buy</wui-text>
+    </button>`;
+  }
+  onFocusChange(state) {
+    this.focused = state;
+  }
+  onSelectToken() {
+    EventsController.sendEvent({ type: "track", event: "CLICK_SELECT_TOKEN_TO_SWAP" });
+    RouterController.push("SwapSelectToken", {
+      target: this.target
+    });
+  }
+  onBuyToken() {
+    RouterController.push("OnRampProviders");
+  }
+};
+W3mSwapInput.styles = [styles$4];
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "focused", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "balance", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "value", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "price", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "marketValue", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "disabled", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "target", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "token", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "onSetAmount", void 0);
+__decorate$4([
+  n()
+], W3mSwapInput.prototype, "onSetMaxValue", void 0);
+W3mSwapInput = __decorate$4([
+  customElement("w3m-swap-input")
+], W3mSwapInput);
+const styles$3 = i`
+  :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 __decorate$3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mSwapView = class W3mSwapView2 extends i$1 {
+  constructor() {
+    var _a, _b;
+    super();
+    this.unsubscribe = [];
+    this.initialParams = (_a = RouterController.state.data) == null ? void 0 : _a.swap;
+    this.detailsOpen = false;
+    this.caipAddress = AccountController.state.caipAddress;
+    this.caipNetworkId = (_b = ChainController.state.activeCaipNetwork) == null ? void 0 : _b.caipNetworkId;
+    this.initialized = SwapController.state.initialized;
+    this.loadingQuote = SwapController.state.loadingQuote;
+    this.loadingPrices = SwapController.state.loadingPrices;
+    this.loadingTransaction = SwapController.state.loadingTransaction;
+    this.sourceToken = SwapController.state.sourceToken;
+    this.sourceTokenAmount = SwapController.state.sourceTokenAmount;
+    this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
+    this.toToken = SwapController.state.toToken;
+    this.toTokenAmount = SwapController.state.toTokenAmount;
+    this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;
+    this.inputError = SwapController.state.inputError;
+    this.fetchError = SwapController.state.fetchError;
+    this.onDebouncedGetSwapCalldata = CoreHelperUtil.debounce(async () => {
+      await SwapController.swapTokens();
+    }, 200);
+    ChainController.subscribeKey("activeCaipNetwork", (newCaipNetwork) => this.onCaipNetworkChange({
+      newCaipNetwork,
+      resetSwapState: true,
+      initializeSwapState: false
+    }));
+    AccountController.subscribeKey("caipAddress", (newCaipAddress) => this.onCaipAddressChange({
+      newCaipAddress,
+      resetSwapState: true,
+      initializeSwapState: false
+    }));
+    this.unsubscribe.push(...[
+      ChainController.subscribeKey("activeCaipNetwork", (newCaipNetwork) => this.onCaipNetworkChange({
+        newCaipNetwork,
+        resetSwapState: false,
+        initializeSwapState: true
+      })),
+      AccountController.subscribeKey("caipAddress", (newCaipAddress) => this.onCaipAddressChange({
+        newCaipAddress,
+        resetSwapState: false,
+        initializeSwapState: true
+      })),
+      ModalController.subscribeKey("open", (isOpen) => {
+        if (!isOpen) {
+          SwapController.resetState();
+        }
+      }),
+      RouterController.subscribeKey("view", (newRoute) => {
+        if (!newRoute.includes("Swap")) {
+          SwapController.resetValues();
+        }
+      }),
+      SwapController.subscribe((newState) => {
+        this.initialized = newState.initialized;
+        this.loadingQuote = newState.loadingQuote;
+        this.loadingPrices = newState.loadingPrices;
+        this.loadingTransaction = newState.loadingTransaction;
+        this.sourceToken = newState.sourceToken;
+        this.sourceTokenAmount = newState.sourceTokenAmount;
+        this.sourceTokenPriceInUSD = newState.sourceTokenPriceInUSD;
+        this.toToken = newState.toToken;
+        this.toTokenAmount = newState.toTokenAmount;
+        this.toTokenPriceInUSD = newState.toTokenPriceInUSD;
+        this.inputError = newState.inputError;
+        this.fetchError = newState.fetchError;
+      })
+    ]);
+  }
+  async firstUpdated() {
+    SwapController.initializeState();
+    this.watchTokensAndValues();
+    await this.handleSwapParameters();
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe == null ? void 0 : unsubscribe());
+    clearInterval(this.interval);
+  }
+  render() {
+    return x`
+      <wui-flex flexDirection="column" .padding=${["0", "l", "l", "l"]} gap="s">
+        ${this.initialized ? this.templateSwap() : this.templateLoading()}
+      </wui-flex>
+    `;
+  }
+  watchTokensAndValues() {
+    this.interval = setInterval(() => {
+      SwapController.getNetworkTokenPrice();
+      SwapController.getMyTokensWithBalance();
+      SwapController.swapTokens();
+    }, 1e4);
+  }
+  templateSwap() {
+    return x`
+      <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() {
+    if (this.fetchError) {
+      return "Swap";
+    }
+    if (!this.sourceToken || !this.toToken) {
+      return "Select token";
+    }
+    if (!this.sourceTokenAmount) {
+      return "Enter amount";
+    }
+    if (this.inputError) {
+      return this.inputError;
+    }
+    return "Review swap";
+  }
+  templateReplaceTokensButton() {
+    return x`
+      <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 x`
+      <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(target, token) {
+    var _a, _b;
+    const myToken = (_a = SwapController.state.myTokensWithBalance) == null ? void 0 : _a.find((ct) => (ct == null ? void 0 : ct.address) === (token == null ? void 0 : token.address));
+    const amount = target === "toToken" ? this.toTokenAmount : this.sourceTokenAmount;
+    const price = target === "toToken" ? this.toTokenPriceInUSD : this.sourceTokenPriceInUSD;
+    const marketValue = NumberUtil.parseLocalStringToNumber(amount) * price;
+    return x`<w3m-swap-input
+      .value=${target === "toToken" ? this.toTokenAmount : this.sourceTokenAmount}
+      .disabled=${target === "toToken"}
+      .onSetAmount=${this.handleChangeAmount.bind(this)}
+      target=${target}
+      .token=${token}
+      .balance=${(_b = myToken == null ? void 0 : myToken.quantity) == null ? void 0 : _b.numeric}
+      .price=${myToken == null ? void 0 : myToken.price}
+      .marketValue=${marketValue}
+      .onSetMaxValue=${this.onSetMaxValue.bind(this)}
+    ></w3m-swap-input>`;
+  }
+  onSetMaxValue(target, balance) {
+    const maxValue = NumberUtil.bigNumber(balance || "0");
+    this.handleChangeAmount(target, maxValue.gt(0) ? maxValue.toFixed(20) : "0");
+  }
+  templateDetails() {
+    if (!this.sourceToken || !this.toToken || this.inputError) {
+      return null;
+    }
+    return x`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`;
+  }
+  handleChangeAmount(target, value) {
+    SwapController.clearError();
+    if (target === "sourceToken") {
+      SwapController.setSourceTokenAmount(value);
+    } else {
+      SwapController.setToTokenAmount(value);
+    }
+    this.onDebouncedGetSwapCalldata();
+  }
+  templateActionButton() {
+    const haveNoTokenSelected = !this.toToken || !this.sourceToken;
+    const haveNoAmount = !this.sourceTokenAmount;
+    const loading = this.loadingQuote || this.loadingPrices || this.loadingTransaction;
+    const disabled = loading || haveNoTokenSelected || haveNoAmount || this.inputError;
+    return x` <wui-flex gap="xs">
+      <wui-button
+        data-testid="swap-action-button"
+        class="action-button"
+        fullWidth
+        size="lg"
+        borderRadius="xs"
+        variant=${haveNoTokenSelected ? "neutral" : "main"}
+        .loading=${loading}
+        .disabled=${disabled}
+        @click=${this.onSwapPreview.bind(this)}
+      >
+        ${this.actionButtonLabel()}
+      </wui-button>
+    </wui-flex>`;
+  }
+  onSwitchTokens() {
+    SwapController.switchTokens();
+  }
+  async onSwapPreview() {
+    var _a, _b;
+    const activeChainNamespace = ChainController.state.activeChain;
+    if (this.fetchError) {
+      await SwapController.swapTokens();
+    }
+    EventsController.sendEvent({
+      type: "track",
+      event: "INITIATE_SWAP",
+      properties: {
+        network: this.caipNetworkId || "",
+        swapFromToken: ((_a = this.sourceToken) == null ? void 0 : _a.symbol) || "",
+        swapToToken: ((_b = this.toToken) == null ? void 0 : _b.symbol) || "",
+        swapFromAmount: this.sourceTokenAmount || "",
+        swapToAmount: this.toTokenAmount || "",
+        isSmartAccount: getPreferredAccountType(activeChainNamespace) === W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT
+      }
+    });
+    RouterController.push("SwapPreview");
+  }
+  async handleSwapParameters() {
+    if (!this.initialParams) {
+      return;
+    }
+    if (!SwapController.state.initialized) {
+      const waitForInitialization = new Promise((resolve) => {
+        const unsubscribe = SwapController.subscribeKey("initialized", (initialized) => {
+          if (initialized) {
+            unsubscribe == null ? void 0 : unsubscribe();
+            resolve();
+          }
+        });
+      });
+      await waitForInitialization;
+    }
+    await this.setSwapParameters(this.initialParams);
+  }
+  async setSwapParameters({ amount, fromToken, toToken }) {
+    if (!SwapController.state.tokens || !SwapController.state.myTokensWithBalance) {
+      const waitForTokens = new Promise((resolve) => {
+        const unsubscribe = SwapController.subscribeKey("myTokensWithBalance", (tokens) => {
+          if (tokens && tokens.length > 0) {
+            unsubscribe == null ? void 0 : unsubscribe();
+            resolve();
+          }
+        });
+        setTimeout(() => {
+          unsubscribe == null ? void 0 : unsubscribe();
+          resolve();
+        }, 5e3);
+      });
+      await waitForTokens;
+    }
+    const allTokens = [
+      ...SwapController.state.tokens || [],
+      ...SwapController.state.myTokensWithBalance || []
+    ];
+    if (fromToken) {
+      const token = allTokens.find((t) => t.symbol.toLowerCase() === fromToken.toLowerCase());
+      if (token) {
+        SwapController.setSourceToken(token);
+      }
+    }
+    if (toToken) {
+      const token = allTokens.find((t) => t.symbol.toLowerCase() === toToken.toLowerCase());
+      if (token) {
+        SwapController.setToToken(token);
+      }
+    }
+    if (amount && !isNaN(Number(amount))) {
+      SwapController.setSourceTokenAmount(amount);
+    }
+  }
+  onCaipAddressChange({ newCaipAddress, resetSwapState, initializeSwapState }) {
+    if (this.caipAddress !== newCaipAddress) {
+      this.caipAddress = newCaipAddress;
+      if (resetSwapState) {
+        SwapController.resetState();
+      }
+      if (initializeSwapState) {
+        SwapController.initializeState();
+      }
+    }
+  }
+  onCaipNetworkChange({ newCaipNetwork, resetSwapState, initializeSwapState }) {
+    if (this.caipNetworkId !== (newCaipNetwork == null ? void 0 : newCaipNetwork.caipNetworkId)) {
+      this.caipNetworkId = newCaipNetwork == null ? void 0 : newCaipNetwork.caipNetworkId;
+      if (resetSwapState) {
+        SwapController.resetState();
+      }
+      if (initializeSwapState) {
+        SwapController.initializeState();
+      }
+    }
+  }
+};
+W3mSwapView.styles = styles$3;
+__decorate$3([
+  n({ type: Object })
+], W3mSwapView.prototype, "initialParams", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "interval", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "detailsOpen", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "caipAddress", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "caipNetworkId", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "initialized", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "loadingQuote", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "loadingPrices", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "loadingTransaction", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "sourceToken", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "sourceTokenAmount", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "sourceTokenPriceInUSD", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "toToken", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "toTokenAmount", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "toTokenPriceInUSD", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "inputError", void 0);
+__decorate$3([
+  r()
+], W3mSwapView.prototype, "fetchError", void 0);
+W3mSwapView = __decorate$3([
+  customElement("w3m-swap-view")
+], W3mSwapView);
+const styles$2 = i`
+  :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 __decorate$2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mSwapPreviewView = class W3mSwapPreviewView2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.detailsOpen = true;
+    this.approvalTransaction = SwapController.state.approvalTransaction;
+    this.swapTransaction = SwapController.state.swapTransaction;
+    this.sourceToken = SwapController.state.sourceToken;
+    this.sourceTokenAmount = SwapController.state.sourceTokenAmount ?? "";
+    this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
+    this.toToken = SwapController.state.toToken;
+    this.toTokenAmount = SwapController.state.toTokenAmount ?? "";
+    this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;
+    this.caipNetwork = ChainController.state.activeCaipNetwork;
+    this.balanceSymbol = AccountController.state.balanceSymbol;
+    this.inputError = SwapController.state.inputError;
+    this.loadingQuote = SwapController.state.loadingQuote;
+    this.loadingApprovalTransaction = SwapController.state.loadingApprovalTransaction;
+    this.loadingBuildTransaction = SwapController.state.loadingBuildTransaction;
+    this.loadingTransaction = SwapController.state.loadingTransaction;
+    this.unsubscribe.push(...[
+      AccountController.subscribeKey("balanceSymbol", (newBalanceSymbol) => {
+        if (this.balanceSymbol !== newBalanceSymbol) {
+          RouterController.goBack();
+        }
+      }),
+      ChainController.subscribeKey("activeCaipNetwork", (newCaipNetwork) => {
+        if (this.caipNetwork !== newCaipNetwork) {
+          this.caipNetwork = newCaipNetwork;
+        }
+      }),
+      SwapController.subscribe((newState) => {
+        this.approvalTransaction = newState.approvalTransaction;
+        this.swapTransaction = newState.swapTransaction;
+        this.sourceToken = newState.sourceToken;
+        this.toToken = newState.toToken;
+        this.toTokenPriceInUSD = newState.toTokenPriceInUSD;
+        this.sourceTokenAmount = newState.sourceTokenAmount ?? "";
+        this.toTokenAmount = newState.toTokenAmount ?? "";
+        this.inputError = newState.inputError;
+        if (newState.inputError) {
+          RouterController.goBack();
+        }
+        this.loadingQuote = newState.loadingQuote;
+        this.loadingApprovalTransaction = newState.loadingApprovalTransaction;
+        this.loadingBuildTransaction = newState.loadingBuildTransaction;
+        this.loadingTransaction = newState.loadingTransaction;
+      })
+    ]);
+  }
+  firstUpdated() {
+    SwapController.getTransaction();
+    this.refreshTransaction();
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe == null ? void 0 : unsubscribe());
+    clearInterval(this.interval);
+  }
+  render() {
+    return x`
+      <wui-flex flexDirection="column" .padding=${["0", "l", "l", "l"]} gap="s">
+        ${this.templateSwap()}
+      </wui-flex>
+    `;
+  }
+  refreshTransaction() {
+    this.interval = setInterval(() => {
+      if (!SwapController.getApprovalLoadingState()) {
+        SwapController.getTransaction();
+      }
+    }, 1e4);
+  }
+  templateSwap() {
+    var _a, _b, _c, _d;
+    const sourceTokenText = `${UiHelperUtil.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${(_a = this.sourceToken) == null ? void 0 : _a.symbol}`;
+    const toTokenText = `${UiHelperUtil.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${(_b = this.toToken) == null ? void 0 : _b.symbol}`;
+    const sourceTokenValue = parseFloat(this.sourceTokenAmount) * this.sourceTokenPriceInUSD;
+    const toTokenValue = parseFloat(this.toTokenAmount) * this.toTokenPriceInUSD;
+    const sentPrice = UiHelperUtil.formatNumberToLocalString(sourceTokenValue);
+    const receivePrice = UiHelperUtil.formatNumberToLocalString(toTokenValue);
+    const loading = this.loadingQuote || this.loadingBuildTransaction || this.loadingTransaction || this.loadingApprovalTransaction;
+    return x`
+      <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">$${sentPrice}</wui-text>
+            </wui-flex>
+            <wui-token-button
+              flexDirection="row-reverse"
+              text=${sourceTokenText}
+              imageSrc=${(_c = this.sourceToken) == null ? void 0 : _c.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">$${receivePrice}</wui-text>
+            </wui-flex>
+            <wui-token-button
+              flexDirection="row-reverse"
+              text=${toTokenText}
+              imageSrc=${(_d = this.toToken) == null ? void 0 : _d.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=${loading}
+            ?disabled=${loading}
+            @click=${this.onSendTransaction.bind(this)}
+          >
+            <wui-text variant="paragraph-600" color="inverse-100">
+              ${this.actionButtonLabel()}
+            </wui-text>
+          </wui-button>
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  templateDetails() {
+    if (!this.sourceToken || !this.toToken || this.inputError) {
+      return null;
+    }
+    return x`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`;
+  }
+  actionButtonLabel() {
+    if (this.loadingApprovalTransaction) {
+      return "Approving...";
+    }
+    if (this.approvalTransaction) {
+      return "Approve";
+    }
+    return "Swap";
+  }
+  onCancelTransaction() {
+    RouterController.goBack();
+  }
+  onSendTransaction() {
+    if (this.approvalTransaction) {
+      SwapController.sendTransactionForApproval(this.approvalTransaction);
+    } else {
+      SwapController.sendTransactionForSwap(this.swapTransaction);
+    }
+  }
+};
+W3mSwapPreviewView.styles = styles$2;
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "interval", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "detailsOpen", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "approvalTransaction", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "swapTransaction", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "sourceToken", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "sourceTokenAmount", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "sourceTokenPriceInUSD", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "toToken", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "toTokenAmount", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "toTokenPriceInUSD", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "caipNetwork", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "balanceSymbol", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "inputError", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "loadingQuote", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "loadingApprovalTransaction", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "loadingBuildTransaction", void 0);
+__decorate$2([
+  r()
+], W3mSwapPreviewView.prototype, "loadingTransaction", void 0);
+W3mSwapPreviewView = __decorate$2([
+  customElement("w3m-swap-preview-view")
+], W3mSwapPreviewView);
+const styles$1 = i`
+  :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 __decorate$1 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiTokenListItem = class WuiTokenListItem2 extends i$1 {
+  constructor() {
+    super();
+    this.observer = new IntersectionObserver(() => void 0);
+    this.imageSrc = void 0;
+    this.name = void 0;
+    this.symbol = void 0;
+    this.price = void 0;
+    this.amount = void 0;
+    this.visible = false;
+    this.imageError = false;
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.visible = true;
+        } else {
+          this.visible = false;
+        }
+      });
+    }, { threshold: 0.1 });
+  }
+  firstUpdated() {
+    this.observer.observe(this);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    var _a;
+    if (!this.visible) {
+      return null;
+    }
+    const value = this.amount && this.price ? (_a = NumberUtil.multiply(this.price, this.amount)) == null ? void 0 : _a.toFixed(3) : null;
+    return x`
+      <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>
+            ${value ? x`
+                  <wui-text variant="paragraph-500" color="fg-100">
+                    $${UiHelperUtil.formatNumberToLocalString(value, 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 ? x`<wui-text variant="small-400" color="fg-200">
+                  ${UiHelperUtil.formatNumberToLocalString(this.amount, 4)}
+                </wui-text>` : null}
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  visualTemplate() {
+    if (this.imageError) {
+      return x`<wui-flex class="token-item-image-placeholder">
+        <wui-icon name="image" color="inherit"></wui-icon>
+      </wui-flex>`;
+    }
+    if (this.imageSrc) {
+      return x`<wui-image
+        width="40"
+        height="40"
+        src=${this.imageSrc}
+        @onLoadError=${this.imageLoadError}
+      ></wui-image>`;
+    }
+    return null;
+  }
+  imageLoadError() {
+    this.imageError = true;
+  }
+};
+WuiTokenListItem.styles = [resetStyles, elementStyles, styles$1];
+__decorate$1([
+  n()
+], WuiTokenListItem.prototype, "imageSrc", void 0);
+__decorate$1([
+  n()
+], WuiTokenListItem.prototype, "name", void 0);
+__decorate$1([
+  n()
+], WuiTokenListItem.prototype, "symbol", void 0);
+__decorate$1([
+  n()
+], WuiTokenListItem.prototype, "price", void 0);
+__decorate$1([
+  n()
+], WuiTokenListItem.prototype, "amount", void 0);
+__decorate$1([
+  r()
+], WuiTokenListItem.prototype, "visible", void 0);
+__decorate$1([
+  r()
+], WuiTokenListItem.prototype, "imageError", void 0);
+WuiTokenListItem = __decorate$1([
+  customElement("wui-token-list-item")
+], WuiTokenListItem);
+const styles = i`
+  :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 __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mSwapSelectTokenView = class W3mSwapSelectTokenView2 extends i$1 {
+  constructor() {
+    var _a;
+    super();
+    this.unsubscribe = [];
+    this.targetToken = (_a = RouterController.state.data) == null ? void 0 : _a.target;
+    this.sourceToken = SwapController.state.sourceToken;
+    this.sourceTokenAmount = SwapController.state.sourceTokenAmount;
+    this.toToken = SwapController.state.toToken;
+    this.myTokensWithBalance = SwapController.state.myTokensWithBalance;
+    this.popularTokens = SwapController.state.popularTokens;
+    this.searchValue = "";
+    this.unsubscribe.push(...[
+      SwapController.subscribe((newState) => {
+        this.sourceToken = newState.sourceToken;
+        this.toToken = newState.toToken;
+        this.myTokensWithBalance = newState.myTokensWithBalance;
+      })
+    ]);
+  }
+  updated() {
+    var _a, _b;
+    const suggestedTokensContainer = (_a = this.renderRoot) == null ? void 0 : _a.querySelector(".suggested-tokens-container");
+    suggestedTokensContainer == null ? void 0 : suggestedTokensContainer.addEventListener("scroll", this.handleSuggestedTokensScroll.bind(this));
+    const tokensList = (_b = this.renderRoot) == null ? void 0 : _b.querySelector(".tokens");
+    tokensList == null ? void 0 : tokensList.addEventListener("scroll", this.handleTokenListScroll.bind(this));
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    super.disconnectedCallback();
+    const suggestedTokensContainer = (_a = this.renderRoot) == null ? void 0 : _a.querySelector(".suggested-tokens-container");
+    const tokensList = (_b = this.renderRoot) == null ? void 0 : _b.querySelector(".tokens");
+    suggestedTokensContainer == null ? void 0 : suggestedTokensContainer.removeEventListener("scroll", this.handleSuggestedTokensScroll.bind(this));
+    tokensList == null ? void 0 : tokensList.removeEventListener("scroll", this.handleTokenListScroll.bind(this));
+    clearInterval(this.interval);
+  }
+  render() {
+    return x`
+      <wui-flex flexDirection="column" gap="s">
+        ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
+      </wui-flex>
+    `;
+  }
+  onSelectToken(token) {
+    if (this.targetToken === "sourceToken") {
+      SwapController.setSourceToken(token);
+    } else {
+      SwapController.setToToken(token);
+      if (this.sourceToken && this.sourceTokenAmount) {
+        SwapController.swapTokens();
+      }
+    }
+    RouterController.goBack();
+  }
+  templateSearchInput() {
+    return x`
+      <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 yourTokens = this.myTokensWithBalance ? Object.values(this.myTokensWithBalance) : [];
+    const tokens = this.popularTokens ? this.popularTokens : [];
+    const filteredYourTokens = this.filterTokensWithText(yourTokens, this.searchValue);
+    const filteredTokens = this.filterTokensWithText(tokens, this.searchValue);
+    return x`
+      <wui-flex class="tokens-container">
+        <wui-flex class="tokens" .padding=${["0", "s", "s", "s"]} flexDirection="column">
+          ${(filteredYourTokens == null ? void 0 : filteredYourTokens.length) > 0 ? x`
+                <wui-flex justifyContent="flex-start" padding="s">
+                  <wui-text variant="paragraph-500" color="fg-200">Your tokens</wui-text>
+                </wui-flex>
+                ${filteredYourTokens.map((token) => {
+      var _a, _b, _c;
+      const selected = token.symbol === ((_a = this.sourceToken) == null ? void 0 : _a.symbol) || token.symbol === ((_b = this.toToken) == null ? void 0 : _b.symbol);
+      return x`
+                    <wui-token-list-item
+                      data-testid="swap-select-token-item-${token.symbol}"
+                      name=${token.name}
+                      ?disabled=${selected}
+                      symbol=${token.symbol}
+                      price=${token == null ? void 0 : token.price}
+                      amount=${(_c = token == null ? void 0 : token.quantity) == null ? void 0 : _c.numeric}
+                      imageSrc=${token.logoUri}
+                      @click=${() => {
+        if (!selected) {
+          this.onSelectToken(token);
+        }
+      }}
+                    >
+                    </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>
+          ${(filteredTokens == null ? void 0 : filteredTokens.length) > 0 ? filteredTokens.map((token) => x`
+                  <wui-token-list-item
+                    data-testid="swap-select-token-item-${token.symbol}"
+                    name=${token.name}
+                    symbol=${token.symbol}
+                    imageSrc=${token.logoUri}
+                    @click=${() => this.onSelectToken(token)}
+                  >
+                  </wui-token-list-item>
+                `) : null}
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  templateSuggestedTokens() {
+    const tokens = SwapController.state.suggestedTokens ? SwapController.state.suggestedTokens.slice(0, 8) : null;
+    if (!tokens) {
+      return null;
+    }
+    return x`
+      <wui-flex class="suggested-tokens-container" .padding=${["0", "s", "0", "s"]} gap="xs">
+        ${tokens.map((token) => x`
+            <wui-token-button
+              text=${token.symbol}
+              imageSrc=${token.logoUri}
+              @click=${() => this.onSelectToken(token)}
+            >
+            </wui-token-button>
+          `)}
+      </wui-flex>
+    `;
+  }
+  onSearchInputChange(event) {
+    this.searchValue = event.detail;
+  }
+  handleSuggestedTokensScroll() {
+    var _a;
+    const container = (_a = this.renderRoot) == null ? void 0 : _a.querySelector(".suggested-tokens-container");
+    if (!container) {
+      return;
+    }
+    container.style.setProperty("--suggested-tokens-scroll--left-opacity", MathUtil.interpolate([0, 100], [0, 1], container.scrollLeft).toString());
+    container.style.setProperty("--suggested-tokens-scroll--right-opacity", MathUtil.interpolate([0, 100], [0, 1], container.scrollWidth - container.scrollLeft - container.offsetWidth).toString());
+  }
+  handleTokenListScroll() {
+    var _a;
+    const container = (_a = this.renderRoot) == null ? void 0 : _a.querySelector(".tokens");
+    if (!container) {
+      return;
+    }
+    container.style.setProperty("--tokens-scroll--top-opacity", MathUtil.interpolate([0, 100], [0, 1], container.scrollTop).toString());
+    container.style.setProperty("--tokens-scroll--bottom-opacity", MathUtil.interpolate([0, 100], [0, 1], container.scrollHeight - container.scrollTop - container.offsetHeight).toString());
+  }
+  filterTokensWithText(tokens, text) {
+    return tokens.filter((token) => `${token.symbol} ${token.name} ${token.address}`.toLowerCase().includes(text.toLowerCase()));
+  }
+};
+W3mSwapSelectTokenView.styles = styles;
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "interval", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "targetToken", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "sourceToken", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "sourceTokenAmount", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "toToken", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "myTokensWithBalance", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "popularTokens", void 0);
+__decorate([
+  r()
+], W3mSwapSelectTokenView.prototype, "searchValue", void 0);
+W3mSwapSelectTokenView = __decorate([
+  customElement("w3m-swap-select-token-view")
+], W3mSwapSelectTokenView);
+export {
+  W3mSwapPreviewView,
+  W3mSwapSelectTokenView,
+  W3mSwapView
+};