@multiversx/sdk-dapp-liquidity 1.0.12 → 1.0.14

package/index-CZSDJd0P.mjs

@@ -0,0 +1,1070 @@
+import { p as proxy, a as subscribeKey, s as subscribe, i, f as i$1, x } from "./bitcoin-dNBGbS2B.mjs";
+import { o, r, c as customElement } from "./if-defined-DjC5UMfF.mjs";
+import "./index-DT_mc1hV.mjs";
+import "./index-D0mOfznC.mjs";
+import "./index-CQaHcTZM.mjs";
+import "./index--O5ypTeK.mjs";
+import "./index-BB0nW9RB.mjs";
+import "./index-Dx7NyDyv.mjs";
+import "./index-CZaV8JgR.mjs";
+import { O as OptionsController, P as ParseUtil, d as CoreHelperUtil, c as ChainController, l as ConstantsUtil, C as ConnectionController, p as ContractUtil, E as EventsController, S as SnackController, A as AccountController, R as RouterController, M as ModalController, T as ThemeController } from "./react-BWxe90Ar.mjs";
+import { P as ProviderUtil } from "./index-H5b7UTeJ.mjs";
+import "./index-BirWzf8c.mjs";
+const AppKitPayErrorCodes = {
+  INVALID_PAYMENT_CONFIG: "INVALID_PAYMENT_CONFIG",
+  INVALID_RECIPIENT: "INVALID_RECIPIENT",
+  INVALID_ASSET: "INVALID_ASSET",
+  INVALID_AMOUNT: "INVALID_AMOUNT",
+  UNKNOWN_ERROR: "UNKNOWN_ERROR",
+  UNABLE_TO_INITIATE_PAYMENT: "UNABLE_TO_INITIATE_PAYMENT",
+  INVALID_CHAIN_NAMESPACE: "INVALID_CHAIN_NAMESPACE",
+  GENERIC_PAYMENT_ERROR: "GENERIC_PAYMENT_ERROR",
+  UNABLE_TO_GET_EXCHANGES: "UNABLE_TO_GET_EXCHANGES",
+  ASSET_NOT_SUPPORTED: "ASSET_NOT_SUPPORTED",
+  UNABLE_TO_GET_PAY_URL: "UNABLE_TO_GET_PAY_URL",
+  UNABLE_TO_GET_BUY_STATUS: "UNABLE_TO_GET_BUY_STATUS"
+};
+const AppKitPayErrorMessages = {
+  [AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG]: "Invalid payment configuration",
+  [AppKitPayErrorCodes.INVALID_RECIPIENT]: "Invalid recipient address",
+  [AppKitPayErrorCodes.INVALID_ASSET]: "Invalid asset specified",
+  [AppKitPayErrorCodes.INVALID_AMOUNT]: "Invalid payment amount",
+  [AppKitPayErrorCodes.UNKNOWN_ERROR]: "Unknown payment error occurred",
+  [AppKitPayErrorCodes.UNABLE_TO_INITIATE_PAYMENT]: "Unable to initiate payment",
+  [AppKitPayErrorCodes.INVALID_CHAIN_NAMESPACE]: "Invalid chain namespace",
+  [AppKitPayErrorCodes.GENERIC_PAYMENT_ERROR]: "Unable to process payment",
+  [AppKitPayErrorCodes.UNABLE_TO_GET_EXCHANGES]: "Unable to get exchanges",
+  [AppKitPayErrorCodes.ASSET_NOT_SUPPORTED]: "Asset not supported by the selected exchange",
+  [AppKitPayErrorCodes.UNABLE_TO_GET_PAY_URL]: "Unable to get payment URL",
+  [AppKitPayErrorCodes.UNABLE_TO_GET_BUY_STATUS]: "Unable to get buy status"
+};
+class AppKitPayError extends Error {
+  get message() {
+    return AppKitPayErrorMessages[this.code];
+  }
+  constructor(code, details) {
+    super(AppKitPayErrorMessages[code]);
+    this.name = "AppKitPayError";
+    this.code = code;
+    this.details = details;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, AppKitPayError);
+    }
+  }
+}
+const API_URL = "https://rpc.walletconnect.org/v1/json-rpc";
+class JsonRpcError extends Error {
+}
+function getApiUrl() {
+  const projectId = OptionsController.getSnapshot().projectId;
+  return `${API_URL}?projectId=${projectId}`;
+}
+async function sendRequest(method, params) {
+  const url = getApiUrl();
+  const requestBody = {
+    jsonrpc: "2.0",
+    id: 1,
+    method,
+    params
+  };
+  const response = await fetch(url, {
+    method: "POST",
+    body: JSON.stringify(requestBody),
+    headers: { "Content-Type": "application/json" }
+  });
+  const json = await response.json();
+  if (json.error) {
+    throw new JsonRpcError(json.error.message);
+  }
+  return json;
+}
+async function getExchanges$1(params) {
+  const response = await sendRequest("reown_getExchanges", params);
+  return response.result;
+}
+async function getPayUrl(params) {
+  const response = await sendRequest("reown_getExchangePayUrl", params);
+  return response.result;
+}
+async function getBuyStatus(params) {
+  const response = await sendRequest("reown_getExchangeBuyStatus", params);
+  return response.result;
+}
+const SUPPORT_PAY_WITH_WALLET_CHAIN_NAMESPACES = ["eip155"];
+const CHAIN_ASSET_INFO_MAP = {
+  eip155: {
+    native: { assetNamespace: "slip44", assetReference: "60" },
+    defaultTokenNamespace: "erc20"
+  },
+  solana: {
+    native: { assetNamespace: "slip44", assetReference: "501" },
+    defaultTokenNamespace: "token"
+  }
+};
+function formatCaip19Asset(caipNetworkId, asset) {
+  const { chainNamespace, chainId } = ParseUtil.parseCaipNetworkId(caipNetworkId);
+  const chainInfo = CHAIN_ASSET_INFO_MAP[chainNamespace];
+  if (!chainInfo) {
+    throw new Error(`Unsupported chain namespace for CAIP-19 formatting: ${chainNamespace}`);
+  }
+  let assetNamespace = chainInfo.native.assetNamespace;
+  let assetReference = chainInfo.native.assetReference;
+  if (asset !== "native") {
+    assetNamespace = chainInfo.defaultTokenNamespace;
+    assetReference = asset;
+  }
+  const networkPart = `${chainNamespace}:${chainId}`;
+  return `${networkPart}/${assetNamespace}:${assetReference}`;
+}
+function isPayWithWalletSupported(networkId) {
+  const { chainNamespace } = ParseUtil.parseCaipNetworkId(networkId);
+  return SUPPORT_PAY_WITH_WALLET_CHAIN_NAMESPACES.includes(chainNamespace);
+}
+async function ensureCorrectNetwork(options) {
+  const { paymentAssetNetwork, activeCaipNetwork, approvedCaipNetworkIds, requestedCaipNetworks } = options;
+  const sortedNetworks = CoreHelperUtil.sortRequestedNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
+  const assetCaipNetwork = sortedNetworks.find((network) => network.caipNetworkId === paymentAssetNetwork);
+  if (!assetCaipNetwork) {
+    throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG);
+  }
+  if (assetCaipNetwork.caipNetworkId === activeCaipNetwork.caipNetworkId) {
+    return;
+  }
+  const isSupportingAllNetworks = ChainController.getNetworkProp("supportsAllNetworks", assetCaipNetwork.chainNamespace);
+  const isSwitchAllowed = (approvedCaipNetworkIds == null ? void 0 : approvedCaipNetworkIds.includes(assetCaipNetwork.caipNetworkId)) || isSupportingAllNetworks;
+  if (!isSwitchAllowed) {
+    throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG);
+  }
+  try {
+    await ChainController.switchActiveNetwork(assetCaipNetwork);
+  } catch (error) {
+    throw new AppKitPayError(AppKitPayErrorCodes.GENERIC_PAYMENT_ERROR, error);
+  }
+}
+async function processEvmNativePayment(paymentAsset, chainNamespace, params) {
+  var _a;
+  if (chainNamespace !== ConstantsUtil.CHAIN.EVM) {
+    throw new AppKitPayError(AppKitPayErrorCodes.INVALID_CHAIN_NAMESPACE);
+  }
+  if (!params.fromAddress) {
+    throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG, "fromAddress is required for native EVM payments.");
+  }
+  const amountValue = typeof params.amount === "string" ? parseFloat(params.amount) : params.amount;
+  if (isNaN(amountValue)) {
+    throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG);
+  }
+  const decimals = ((_a = paymentAsset.metadata) == null ? void 0 : _a.decimals) ?? 18;
+  const amountBigInt = ConnectionController.parseUnits(amountValue.toString(), decimals);
+  if (typeof amountBigInt !== "bigint") {
+    throw new AppKitPayError(AppKitPayErrorCodes.GENERIC_PAYMENT_ERROR);
+  }
+  const txResponse = await ConnectionController.sendTransaction({
+    chainNamespace,
+    to: params.recipient,
+    address: params.fromAddress,
+    value: amountBigInt,
+    data: "0x"
+  });
+  return txResponse ?? void 0;
+}
+async function processEvmErc20Payment(paymentAsset, params) {
+  if (!params.fromAddress) {
+    throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG, "fromAddress is required for ERC20 EVM payments.");
+  }
+  const tokenAddress = paymentAsset.asset;
+  const recipientAddress = params.recipient;
+  const decimals = Number(paymentAsset.metadata.decimals);
+  const amountBigInt = ConnectionController.parseUnits(params.amount.toString(), decimals);
+  if (amountBigInt === void 0) {
+    throw new AppKitPayError(AppKitPayErrorCodes.GENERIC_PAYMENT_ERROR);
+  }
+  const txResponse = await ConnectionController.writeContract({
+    fromAddress: params.fromAddress,
+    tokenAddress,
+    args: [recipientAddress, amountBigInt],
+    method: "transfer",
+    abi: ContractUtil.getERC20Abi(tokenAddress),
+    chainNamespace: ConstantsUtil.CHAIN.EVM
+  });
+  return txResponse ?? void 0;
+}
+const DEFAULT_PAGE = 0;
+const DEFAULT_PAYMENT_ID = "unknown";
+const state = proxy({
+  paymentAsset: {
+    network: "eip155:1",
+    asset: "0x0",
+    metadata: {
+      name: "0x0",
+      symbol: "0x0",
+      decimals: 0
+    }
+  },
+  recipient: "0x0",
+  amount: 0,
+  isConfigured: false,
+  error: null,
+  isPaymentInProgress: false,
+  exchanges: [],
+  isLoading: false,
+  openInNewTab: true,
+  redirectUrl: void 0,
+  payWithExchange: void 0,
+  currentPayment: void 0,
+  analyticsSet: false,
+  paymentId: void 0
+});
+const PayController = {
+  state,
+  subscribe(callback) {
+    return subscribe(state, () => callback(state));
+  },
+  subscribeKey(key, callback) {
+    return subscribeKey(state, key, callback);
+  },
+  async handleOpenPay(options) {
+    this.resetState();
+    this.setPaymentConfig(options);
+    this.subscribeEvents();
+    this.initializeAnalytics();
+    state.isConfigured = true;
+    EventsController.sendEvent({
+      type: "track",
+      event: "PAY_MODAL_OPEN",
+      properties: {
+        exchanges: state.exchanges,
+        configuration: {
+          network: state.paymentAsset.network,
+          asset: state.paymentAsset.asset,
+          recipient: state.recipient,
+          amount: state.amount
+        }
+      }
+    });
+    await ModalController.open({
+      view: "Pay"
+    });
+  },
+  resetState() {
+    state.paymentAsset = {
+      network: "eip155:1",
+      asset: "0x0",
+      metadata: { name: "0x0", symbol: "0x0", decimals: 0 }
+    };
+    state.recipient = "0x0";
+    state.amount = 0;
+    state.isConfigured = false;
+    state.error = null;
+    state.isPaymentInProgress = false;
+    state.isLoading = false;
+    state.currentPayment = void 0;
+  },
+  setPaymentConfig(config) {
+    if (!config.paymentAsset) {
+      throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG);
+    }
+    try {
+      state.paymentAsset = config.paymentAsset;
+      state.recipient = config.recipient;
+      state.amount = config.amount;
+      state.openInNewTab = config.openInNewTab ?? true;
+      state.redirectUrl = config.redirectUrl;
+      state.payWithExchange = config.payWithExchange;
+      state.error = null;
+    } catch (error) {
+      throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG, error.message);
+    }
+  },
+  getPaymentAsset() {
+    return state.paymentAsset;
+  },
+  getExchanges() {
+    return state.exchanges;
+  },
+  async fetchExchanges() {
+    try {
+      state.isLoading = true;
+      const response = await getExchanges$1({
+        page: DEFAULT_PAGE,
+        asset: formatCaip19Asset(state.paymentAsset.network, state.paymentAsset.asset),
+        amount: state.amount.toString()
+      });
+      state.exchanges = response.exchanges.slice(0, 2);
+    } catch (error) {
+      SnackController.showError(AppKitPayErrorMessages.UNABLE_TO_GET_EXCHANGES);
+      throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_GET_EXCHANGES);
+    } finally {
+      state.isLoading = false;
+    }
+  },
+  async getAvailableExchanges(params) {
+    var _a;
+    try {
+      const asset = (params == null ? void 0 : params.asset) && (params == null ? void 0 : params.network) ? formatCaip19Asset(params.network, params.asset) : void 0;
+      const response = await getExchanges$1({
+        page: (params == null ? void 0 : params.page) ?? DEFAULT_PAGE,
+        asset,
+        amount: (_a = params == null ? void 0 : params.amount) == null ? void 0 : _a.toString()
+      });
+      return response;
+    } catch (error) {
+      throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_GET_EXCHANGES);
+    }
+  },
+  async getPayUrl(exchangeId, params, headless = false) {
+    try {
+      const numericAmount = Number(params.amount);
+      const response = await getPayUrl({
+        exchangeId,
+        asset: formatCaip19Asset(params.network, params.asset),
+        amount: numericAmount.toString(),
+        recipient: `${params.network}:${params.recipient}`
+      });
+      EventsController.sendEvent({
+        type: "track",
+        event: "PAY_EXCHANGE_SELECTED",
+        properties: {
+          exchange: {
+            id: exchangeId
+          },
+          configuration: {
+            network: params.network,
+            asset: params.asset,
+            recipient: params.recipient,
+            amount: numericAmount
+          },
+          currentPayment: {
+            type: "exchange",
+            exchangeId
+          },
+          headless
+        }
+      });
+      if (headless) {
+        this.initiatePayment();
+        EventsController.sendEvent({
+          type: "track",
+          event: "PAY_INITIATED",
+          properties: {
+            paymentId: state.paymentId || DEFAULT_PAYMENT_ID,
+            configuration: {
+              network: params.network,
+              asset: params.asset,
+              recipient: params.recipient,
+              amount: numericAmount
+            },
+            currentPayment: {
+              type: "exchange",
+              exchangeId
+            }
+          }
+        });
+      }
+      return response;
+    } catch (error) {
+      if (error instanceof Error && error.message.includes("is not supported")) {
+        throw new AppKitPayError(AppKitPayErrorCodes.ASSET_NOT_SUPPORTED);
+      }
+      throw new Error(error.message);
+    }
+  },
+  async openPayUrl(openParams, params, headless = false) {
+    try {
+      const payUrl = await this.getPayUrl(openParams.exchangeId, params, headless);
+      if (!payUrl) {
+        throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_GET_PAY_URL);
+      }
+      const shouldOpenInNewTab = openParams.openInNewTab ?? true;
+      const target = shouldOpenInNewTab ? "_blank" : "_self";
+      CoreHelperUtil.openHref(payUrl.url, target);
+      return payUrl;
+    } catch (error) {
+      if (error instanceof AppKitPayError) {
+        state.error = error.message;
+      } else {
+        state.error = AppKitPayErrorMessages.GENERIC_PAYMENT_ERROR;
+      }
+      throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_GET_PAY_URL);
+    }
+  },
+  subscribeEvents() {
+    if (state.isConfigured) {
+      return;
+    }
+    ProviderUtil.subscribeProviders(async (_) => {
+      const chainNamespace = ChainController.state.activeChain;
+      const provider = ProviderUtil.getProvider(chainNamespace);
+      if (!provider) {
+        return;
+      }
+      await this.handlePayment();
+    });
+    AccountController.subscribeKey("caipAddress", async (caipAddress) => {
+      if (!caipAddress) {
+        return;
+      }
+      await this.handlePayment();
+    });
+  },
+  async handlePayment() {
+    state.currentPayment = {
+      type: "wallet",
+      status: "IN_PROGRESS"
+    };
+    const caipAddress = AccountController.state.caipAddress;
+    if (!caipAddress) {
+      return;
+    }
+    const { chainId, address } = ParseUtil.parseCaipAddress(caipAddress);
+    const chainNamespace = ChainController.state.activeChain;
+    if (!address || !chainId || !chainNamespace) {
+      return;
+    }
+    const provider = ProviderUtil.getProvider(chainNamespace);
+    if (!provider) {
+      return;
+    }
+    const caipNetwork = ChainController.state.activeCaipNetwork;
+    if (!caipNetwork) {
+      return;
+    }
+    if (state.isPaymentInProgress) {
+      return;
+    }
+    try {
+      this.initiatePayment();
+      const requestedCaipNetworks = ChainController.getAllRequestedCaipNetworks();
+      const approvedCaipNetworkIds = ChainController.getAllApprovedCaipNetworkIds();
+      await ensureCorrectNetwork({
+        paymentAssetNetwork: state.paymentAsset.network,
+        activeCaipNetwork: caipNetwork,
+        approvedCaipNetworkIds,
+        requestedCaipNetworks
+      });
+      await ModalController.open({
+        view: "PayLoading"
+      });
+      switch (chainNamespace) {
+        case ConstantsUtil.CHAIN.EVM:
+          if (state.paymentAsset.asset === "native") {
+            state.currentPayment.result = await processEvmNativePayment(state.paymentAsset, chainNamespace, {
+              recipient: state.recipient,
+              amount: state.amount,
+              fromAddress: address
+            });
+          }
+          if (state.paymentAsset.asset.startsWith("0x")) {
+            state.currentPayment.result = await processEvmErc20Payment(state.paymentAsset, {
+              recipient: state.recipient,
+              amount: state.amount,
+              fromAddress: address
+            });
+          }
+          state.currentPayment.status = "SUCCESS";
+          break;
+        default:
+          throw new AppKitPayError(AppKitPayErrorCodes.INVALID_CHAIN_NAMESPACE);
+      }
+    } catch (error) {
+      if (error instanceof AppKitPayError) {
+        state.error = error.message;
+      } else {
+        state.error = AppKitPayErrorMessages.GENERIC_PAYMENT_ERROR;
+      }
+      state.currentPayment.status = "FAILED";
+      SnackController.showError(state.error);
+    } finally {
+      state.isPaymentInProgress = false;
+    }
+  },
+  getExchangeById(exchangeId) {
+    return state.exchanges.find((exchange) => exchange.id === exchangeId);
+  },
+  validatePayConfig(config) {
+    const { paymentAsset, recipient, amount } = config;
+    if (!paymentAsset) {
+      throw new AppKitPayError(AppKitPayErrorCodes.INVALID_PAYMENT_CONFIG);
+    }
+    if (!recipient) {
+      throw new AppKitPayError(AppKitPayErrorCodes.INVALID_RECIPIENT);
+    }
+    if (!paymentAsset.asset) {
+      throw new AppKitPayError(AppKitPayErrorCodes.INVALID_ASSET);
+    }
+    if (amount === void 0 || amount === null || amount <= 0) {
+      throw new AppKitPayError(AppKitPayErrorCodes.INVALID_AMOUNT);
+    }
+  },
+  handlePayWithWallet() {
+    const caipAddress = AccountController.state.caipAddress;
+    if (!caipAddress) {
+      RouterController.push("Connect");
+      return;
+    }
+    const { chainId, address } = ParseUtil.parseCaipAddress(caipAddress);
+    const chainNamespace = ChainController.state.activeChain;
+    if (!address || !chainId || !chainNamespace) {
+      RouterController.push("Connect");
+      return;
+    }
+    this.handlePayment();
+  },
+  async handlePayWithExchange(exchangeId) {
+    try {
+      state.currentPayment = {
+        type: "exchange",
+        exchangeId
+      };
+      const { network, asset } = state.paymentAsset;
+      const payUrlParams = {
+        network,
+        asset,
+        amount: state.amount,
+        recipient: state.recipient
+      };
+      const payUrl = await this.getPayUrl(exchangeId, payUrlParams);
+      if (!payUrl) {
+        throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_INITIATE_PAYMENT);
+      }
+      state.currentPayment.sessionId = payUrl.sessionId;
+      state.currentPayment.status = "IN_PROGRESS";
+      state.currentPayment.exchangeId = exchangeId;
+      this.initiatePayment();
+      return {
+        url: payUrl.url,
+        openInNewTab: state.openInNewTab
+      };
+    } catch (error) {
+      if (error instanceof AppKitPayError) {
+        state.error = error.message;
+      } else {
+        state.error = AppKitPayErrorMessages.GENERIC_PAYMENT_ERROR;
+      }
+      state.isPaymentInProgress = false;
+      SnackController.showError(state.error);
+      return null;
+    }
+  },
+  async getBuyStatus(exchangeId, sessionId) {
+    var _a, _b;
+    try {
+      const status = await getBuyStatus({ sessionId, exchangeId });
+      if (status.status === "SUCCESS" || status.status === "FAILED") {
+        EventsController.sendEvent({
+          type: "track",
+          event: status.status === "SUCCESS" ? "PAY_SUCCESS" : "PAY_ERROR",
+          properties: {
+            paymentId: state.paymentId || DEFAULT_PAYMENT_ID,
+            configuration: {
+              network: state.paymentAsset.network,
+              asset: state.paymentAsset.asset,
+              recipient: state.recipient,
+              amount: state.amount
+            },
+            currentPayment: {
+              type: "exchange",
+              exchangeId: (_a = state.currentPayment) == null ? void 0 : _a.exchangeId,
+              sessionId: (_b = state.currentPayment) == null ? void 0 : _b.sessionId,
+              result: status.txHash
+            }
+          }
+        });
+      }
+      return status;
+    } catch (error) {
+      throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_GET_BUY_STATUS);
+    }
+  },
+  async updateBuyStatus(exchangeId, sessionId) {
+    try {
+      const status = await this.getBuyStatus(exchangeId, sessionId);
+      if (state.currentPayment) {
+        state.currentPayment.status = status.status;
+        state.currentPayment.result = status.txHash;
+      }
+      if (status.status === "SUCCESS" || status.status === "FAILED") {
+        state.isPaymentInProgress = false;
+      }
+    } catch (error) {
+      throw new AppKitPayError(AppKitPayErrorCodes.UNABLE_TO_GET_BUY_STATUS);
+    }
+  },
+  initiatePayment() {
+    state.isPaymentInProgress = true;
+    state.paymentId = crypto.randomUUID();
+  },
+  initializeAnalytics() {
+    if (state.analyticsSet) {
+      return;
+    }
+    state.analyticsSet = true;
+    this.subscribeKey("isPaymentInProgress", (_) => {
+      var _a;
+      if (((_a = state.currentPayment) == null ? void 0 : _a.status) && state.currentPayment.status !== "UNKNOWN") {
+        const eventType = {
+          IN_PROGRESS: "PAY_INITIATED",
+          SUCCESS: "PAY_SUCCESS",
+          FAILED: "PAY_ERROR"
+        }[state.currentPayment.status];
+        EventsController.sendEvent({
+          type: "track",
+          event: eventType,
+          properties: {
+            paymentId: state.paymentId || DEFAULT_PAYMENT_ID,
+            configuration: {
+              network: state.paymentAsset.network,
+              asset: state.paymentAsset.asset,
+              recipient: state.recipient,
+              amount: state.amount
+            },
+            currentPayment: {
+              type: state.currentPayment.type,
+              exchangeId: state.currentPayment.exchangeId,
+              sessionId: state.currentPayment.sessionId,
+              result: state.currentPayment.result
+            }
+          }
+        });
+      }
+    });
+  }
+};
+const styles$1 = i`
+  wui-separator {
+    margin: var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1) var(--wui-spacing-xs)
+      calc(var(--wui-spacing-m) * -1);
+    width: calc(100% + var(--wui-spacing-s) * 2);
+  }
+
+  .token-display {
+    padding: var(--wui-spacing-s) var(--wui-spacing-m);
+    border-radius: var(--wui-border-radius-s);
+    background-color: var(--wui-color-bg-125);
+    margin-top: var(--wui-spacing-s);
+    margin-bottom: var(--wui-spacing-s);
+  }
+
+  .token-display wui-text {
+    text-transform: none;
+  }
+
+  wui-loading-spinner {
+    padding: var(--wui-spacing-xs);
+  }
+`;
+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 W3mPayView = class W3mPayView2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.amount = "";
+    this.tokenSymbol = "";
+    this.networkName = "";
+    this.exchanges = PayController.state.exchanges;
+    this.isLoading = PayController.state.isLoading;
+    this.loadingExchangeId = null;
+    this.connectedWalletInfo = AccountController.state.connectedWalletInfo;
+    this.initializePaymentDetails();
+    this.unsubscribe.push(PayController.subscribeKey("exchanges", (val) => this.exchanges = val));
+    this.unsubscribe.push(PayController.subscribeKey("isLoading", (val) => this.isLoading = val));
+    this.unsubscribe.push(AccountController.subscribe((newState) => this.connectedWalletInfo = newState.connectedWalletInfo));
+    PayController.fetchExchanges();
+  }
+  get isWalletConnected() {
+    return AccountController.state.status === "connected";
+  }
+  render() {
+    return x`
+      <wui-flex flexDirection="column">
+        <wui-flex flexDirection="column" .padding=${["0", "l", "l", "l"]} gap="s">
+          ${this.renderPaymentHeader()}
+
+          <wui-flex flexDirection="column" gap="s">
+            ${this.renderPayWithWallet()} ${this.renderExchangeOptions()}
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  initializePaymentDetails() {
+    const paymentAsset = PayController.getPaymentAsset();
+    this.networkName = paymentAsset.network;
+    this.tokenSymbol = paymentAsset.metadata.symbol;
+    this.amount = PayController.state.amount.toString();
+  }
+  renderPayWithWallet() {
+    if (!isPayWithWalletSupported(this.networkName)) {
+      return x``;
+    }
+    return x`<wui-flex flexDirection="column" gap="s">
+        ${this.isWalletConnected ? this.renderConnectedView() : this.renderDisconnectedView()}
+      </wui-flex>
+      <wui-separator text="or"></wui-separator>`;
+  }
+  renderPaymentHeader() {
+    let displayNetworkName = this.networkName;
+    if (this.networkName) {
+      const allNetworks = ChainController.getAllRequestedCaipNetworks();
+      const targetNetwork = allNetworks.find((net) => net.caipNetworkId === this.networkName);
+      if (targetNetwork) {
+        displayNetworkName = targetNetwork.name;
+      }
+    }
+    return x`
+      <wui-flex flexDirection="column" alignItems="center">
+        <wui-flex alignItems="center" gap="xs">
+          <wui-text variant="large-700" color="fg-100">${this.amount || "0.0000"}</wui-text>
+          <wui-flex class="token-display" alignItems="center" gap="xxs">
+            <wui-text variant="paragraph-600" color="fg-100">
+              ${this.tokenSymbol || "Unknown Asset"}
+            </wui-text>
+            ${displayNetworkName ? x`
+                  <wui-text variant="small-500" color="fg-200"> on ${displayNetworkName} </wui-text>
+                ` : ""}
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  renderConnectedView() {
+    var _a, _b, _c;
+    const walletName = ((_a = this.connectedWalletInfo) == null ? void 0 : _a.name) || "connected wallet";
+    return x`
+      <wui-list-item
+        @click=${this.onWalletPayment}
+        ?chevron=${true}
+        data-testid="wallet-payment-option"
+      >
+        <wui-flex alignItems="center" gap="s">
+          <wui-wallet-image
+            size="sm"
+            imageSrc=${o((_b = this.connectedWalletInfo) == null ? void 0 : _b.icon)}
+            name=${o((_c = this.connectedWalletInfo) == null ? void 0 : _c.name)}
+          ></wui-wallet-image>
+          <wui-text variant="paragraph-500" color="inherit">Pay with ${walletName}</wui-text>
+        </wui-flex>
+      </wui-list-item>
+
+      <wui-list-item
+        variant="icon"
+        iconVariant="overlay"
+        icon="disconnect"
+        @click=${this.onDisconnect}
+        data-testid="disconnect-button"
+        ?chevron=${false}
+      >
+        <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
+      </wui-list-item>
+    `;
+  }
+  renderDisconnectedView() {
+    return x`<wui-list-item
+      variant="icon"
+      iconVariant="overlay"
+      icon="walletPlaceholder"
+      @click=${this.onWalletPayment}
+      ?chevron=${true}
+      data-testid="wallet-payment-option"
+    >
+      <wui-text variant="paragraph-500" color="inherit">Pay from wallet</wui-text>
+    </wui-list-item>`;
+  }
+  renderExchangeOptions() {
+    if (this.isLoading) {
+      return x`<wui-flex justifyContent="center" alignItems="center">
+        <wui-spinner size="md"></wui-spinner>
+      </wui-flex>`;
+    }
+    if (this.exchanges.length === 0) {
+      return x`<wui-flex justifyContent="center" alignItems="center">
+        <wui-text variant="paragraph-500" color="fg-100">No exchanges available</wui-text>
+      </wui-flex>`;
+    }
+    return this.exchanges.map((exchange) => x`
+        <wui-list-item
+          @click=${() => this.onExchangePayment(exchange.id)}
+          data-testid="exchange-option-${exchange.id}"
+          ?chevron=${true}
+          ?disabled=${this.loadingExchangeId !== null}
+        >
+          <wui-flex alignItems="center" gap="s">
+            ${this.loadingExchangeId === exchange.id ? x`<wui-loading-spinner color="accent-100" size="md"></wui-loading-spinner>` : x`<wui-wallet-image
+                  size="sm"
+                  imageSrc=${o(exchange.imageUrl)}
+                  name=${exchange.name}
+                ></wui-wallet-image>`}
+            <wui-text flexGrow="1" variant="paragraph-500" color="inherit"
+              >Pay with ${exchange.name} <wui-spinner size="sm" color="fg-200"></wui-spinner
+            ></wui-text>
+          </wui-flex>
+        </wui-list-item>
+      `);
+  }
+  onWalletPayment() {
+    PayController.handlePayWithWallet();
+  }
+  async onExchangePayment(exchangeId) {
+    try {
+      this.loadingExchangeId = exchangeId;
+      const result = await PayController.handlePayWithExchange(exchangeId);
+      if (result) {
+        await ModalController.open({
+          view: "PayLoading"
+        });
+        CoreHelperUtil.openHref(result.url, result.openInNewTab ? "_blank" : "_self");
+      }
+    } catch (error) {
+      console.error("Failed to pay with exchange", error);
+      SnackController.showError("Failed to pay with exchange");
+    } finally {
+      this.loadingExchangeId = null;
+    }
+  }
+  async onDisconnect(e) {
+    e.stopPropagation();
+    try {
+      await ConnectionController.disconnect();
+      ModalController.close();
+    } catch {
+      console.error("Failed to disconnect");
+      SnackController.showError("Failed to disconnect");
+    }
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+};
+W3mPayView.styles = styles$1;
+__decorate$1([
+  r()
+], W3mPayView.prototype, "amount", void 0);
+__decorate$1([
+  r()
+], W3mPayView.prototype, "tokenSymbol", void 0);
+__decorate$1([
+  r()
+], W3mPayView.prototype, "networkName", void 0);
+__decorate$1([
+  r()
+], W3mPayView.prototype, "exchanges", void 0);
+__decorate$1([
+  r()
+], W3mPayView.prototype, "isLoading", void 0);
+__decorate$1([
+  r()
+], W3mPayView.prototype, "loadingExchangeId", void 0);
+__decorate$1([
+  r()
+], W3mPayView.prototype, "connectedWalletInfo", void 0);
+W3mPayView = __decorate$1([
+  customElement("w3m-pay-view")
+], W3mPayView);
+const styles = i`
+  :host {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+`;
+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;
+};
+const EXCHANGE_STATUS_CHECK_INTERVAL = 4e3;
+let W3mPayLoadingView = class W3mPayLoadingView2 extends i$1 {
+  constructor() {
+    super();
+    this.loadingMessage = "";
+    this.subMessage = "";
+    this.paymentState = "in-progress";
+    this.paymentState = PayController.state.isPaymentInProgress ? "in-progress" : "completed";
+    this.updateMessages();
+    this.setupSubscription();
+    this.setupExchangeSubscription();
+  }
+  disconnectedCallback() {
+    clearInterval(this.exchangeSubscription);
+  }
+  render() {
+    return x`
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${["xl", "xl", "xl", "xl"]}
+        gap="xl"
+      >
+        <wui-flex justifyContent="center" alignItems="center"> ${this.getStateIcon()} </wui-flex>
+        <wui-flex flexDirection="column" alignItems="center" gap="xs">
+          <wui-text align="center" variant="paragraph-500" color="fg-100">
+            ${this.loadingMessage}
+          </wui-text>
+          <wui-text align="center" variant="small-400" color="fg-200">
+            ${this.subMessage}
+          </wui-text>
+        </wui-flex>
+      </wui-flex>
+    `;
+  }
+  updateMessages() {
+    var _a;
+    switch (this.paymentState) {
+      case "completed":
+        this.loadingMessage = "Payment completed";
+        this.subMessage = "Your transaction has been successfully processed";
+        break;
+      case "error":
+        this.loadingMessage = "Payment failed";
+        this.subMessage = "There was an error processing your transaction";
+        break;
+      case "in-progress":
+      default:
+        if (((_a = PayController.state.currentPayment) == null ? void 0 : _a.type) === "exchange") {
+          this.loadingMessage = "Payment initiated";
+          this.subMessage = `Please complete the payment on the exchange`;
+        } else {
+          this.loadingMessage = "Awaiting payment confirmation";
+          this.subMessage = "Please confirm the payment transaction in your wallet";
+        }
+        break;
+    }
+  }
+  getStateIcon() {
+    switch (this.paymentState) {
+      case "completed":
+        return this.successTemplate();
+      case "error":
+        return this.errorTemplate();
+      case "in-progress":
+      default:
+        return this.loaderTemplate();
+    }
+  }
+  setupExchangeSubscription() {
+    var _a;
+    if (((_a = PayController.state.currentPayment) == null ? void 0 : _a.type) !== "exchange") {
+      return;
+    }
+    this.exchangeSubscription = setInterval(async () => {
+      var _a2, _b, _c;
+      const exchangeId = (_a2 = PayController.state.currentPayment) == null ? void 0 : _a2.exchangeId;
+      const sessionId = (_b = PayController.state.currentPayment) == null ? void 0 : _b.sessionId;
+      if (exchangeId && sessionId) {
+        await PayController.updateBuyStatus(exchangeId, sessionId);
+        if (((_c = PayController.state.currentPayment) == null ? void 0 : _c.status) === "SUCCESS") {
+          clearInterval(this.exchangeSubscription);
+        }
+      }
+    }, EXCHANGE_STATUS_CHECK_INTERVAL);
+  }
+  setupSubscription() {
+    PayController.subscribeKey("isPaymentInProgress", (inProgress) => {
+      var _a;
+      if (!inProgress && this.paymentState === "in-progress") {
+        if (PayController.state.error || !((_a = PayController.state.currentPayment) == null ? void 0 : _a.result)) {
+          this.paymentState = "error";
+        } else {
+          this.paymentState = "completed";
+        }
+        this.updateMessages();
+        setTimeout(() => {
+          if (ConnectionController.state.status === "disconnected") {
+            return;
+          }
+          ModalController.close();
+        }, 3e3);
+      }
+    });
+    PayController.subscribeKey("error", (error) => {
+      if (error && this.paymentState === "in-progress") {
+        this.paymentState = "error";
+        this.updateMessages();
+      }
+    });
+  }
+  loaderTemplate() {
+    const borderRadiusMaster = ThemeController.state.themeVariables["--w3m-border-radius-master"];
+    const radius = borderRadiusMaster ? parseInt(borderRadiusMaster.replace("px", ""), 10) : 4;
+    return x`<wui-loading-thumbnail radius=${radius * 9}></wui-loading-thumbnail>`;
+  }
+  successTemplate() {
+    return x`<wui-icon size="xl" color="success-100" name="checkmark"></wui-icon>`;
+  }
+  errorTemplate() {
+    return x`<wui-icon size="xl" color="error-100" name="close"></wui-icon>`;
+  }
+};
+W3mPayLoadingView.styles = styles;
+__decorate([
+  r()
+], W3mPayLoadingView.prototype, "loadingMessage", void 0);
+__decorate([
+  r()
+], W3mPayLoadingView.prototype, "subMessage", void 0);
+__decorate([
+  r()
+], W3mPayLoadingView.prototype, "paymentState", void 0);
+W3mPayLoadingView = __decorate([
+  customElement("w3m-pay-loading-view")
+], W3mPayLoadingView);
+async function openPay(options) {
+  return PayController.handleOpenPay(options);
+}
+function getExchanges() {
+  return PayController.getExchanges();
+}
+function getPayResult() {
+  var _a;
+  return (_a = PayController.state.currentPayment) == null ? void 0 : _a.result;
+}
+function getPayError() {
+  return PayController.state.error;
+}
+function getIsPaymentInProgress() {
+  return PayController.state.isPaymentInProgress;
+}
+const baseETH = {
+  network: "eip155:8453",
+  asset: "native",
+  metadata: {
+    name: "Ethereum",
+    symbol: "ETH",
+    decimals: 18
+  }
+};
+const baseUSDC = {
+  network: "eip155:8453",
+  asset: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+  metadata: {
+    name: "USD Coin",
+    symbol: "USDC",
+    decimals: 6
+  }
+};
+const baseSepoliaETH = {
+  network: "eip155:84532",
+  asset: "native",
+  metadata: {
+    name: "Ethereum",
+    symbol: "ETH",
+    decimals: 18
+  }
+};
+export {
+  W3mPayLoadingView,
+  W3mPayView,
+  baseETH,
+  baseSepoliaETH,
+  baseUSDC,
+  getExchanges,
+  getIsPaymentInProgress,
+  getPayError,
+  getPayResult,
+  openPay
+};