@openreceive/elements 0.3.2 → 0.4.0

package/dist/{chunk-TLX3H2MD.js → chunk-VJBC57J6.js}

@@ -399,7 +399,7 @@ import {
   createLightningInvoiceDecodeUrl as createLightningInvoiceDecodeUrl2,
   deriveCheckoutStateLabels,
   deriveStatus,
-  escapeHtml as escapeHtml6,
+  escapeHtml as escapeHtml7,
   formatAmountCaption,
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
   OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS,
@@ -422,12 +422,12 @@ import {
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
   currentCheckoutUrl as currentCheckoutUrl2,
-  escapeHtml as escapeHtml5,
+  escapeHtml as escapeHtml6,
   formatMethodNetworkDetail,
   formatNetworkSummary,
-  getNetworkIcon,
-  getPaymentMethodIcon,
-  getSwapOptionIcon,
+  getNetworkIconId,
+  getPaymentMethodIconId,
+  getSwapOptionIconId,
   getWizardEmptyMessage,
   networkButtonClasses,
   networkCheckClasses,
@@ -439,26 +439,43 @@ import {
   swapAssetMatchesRoute as swapAssetMatchesRoute2
 } from "@openreceive/browser/headless";
 
+// src/payment-icon.ts
+import {
+  escapeHtml as escapeHtml2,
+  paymentIconPaths,
+  paymentIconSvgs
+} from "@openreceive/browser/headless";
+function renderPaymentIconHtml(id, options) {
+  if (options.resolveAssetUrl !== void 0) {
+    const src = escapeHtml2(options.resolveAssetUrl(paymentIconPaths[id]));
+    return `<img class="${options.className}" alt="" src="${src}">`;
+  }
+  return paymentIconSvgs[id].replace(
+    /^<svg\b([^>]*)>/,
+    (_match, attributes) => `<svg${attributes.replace(/\s(?:class|role|aria-label)="[^"]*"/g, "")} class="${options.className}" role="img" aria-label="${escapeHtml2(options.label)}">`
+  );
+}
+
 // src/render-provider-tutorial.ts
 import {
   createLightningInvoiceDecodeUrl,
-  escapeHtml as escapeHtml2,
+  escapeHtml as escapeHtml3,
   OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2,
   checkoutLabels as checkoutLabels2,
   orClasses as orClasses2
 } from "@openreceive/browser/headless";
 function renderProviderOpenActionHtml(provider) {
   if (provider.tutorials.length === 0) {
-    return `<a class="${orClasses2.providerOpen}" href="${escapeHtml2(provider.url)}" rel="noreferrer" target="_blank">${escapeHtml2(provider.openLabel)}</a>`;
+    return `<a class="${orClasses2.providerOpen}" href="${escapeHtml3(provider.url)}" rel="noreferrer" target="_blank">${escapeHtml3(provider.openLabel)}</a>`;
   }
   return `
     <button
       part="provider-open"
       class="${orClasses2.providerOpen}"
-      ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml2(provider.id)}"
+      ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml3(provider.id)}"
       ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="0"
       type="button"
-    >${escapeHtml2(provider.openLabel)}</button>
+    >${escapeHtml3(provider.openLabel)}</button>
   `;
 }
 function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex, copied, lightningInvoice, decodeLinkUrl) {
@@ -472,36 +489,36 @@ function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex,
   const nextIndex = Math.min(provider.tutorials.length, stepIndex + 1);
   const isFinalStep = stepIndex === provider.tutorials.length;
   const decodeHref = lightningInvoice === void 0 || lightningInvoice.trim() === "" ? void 0 : createLightningInvoiceDecodeUrl(lightningInvoice, decodeLinkUrl);
-  const decodeButton = decodeHref === void 0 ? "" : `<a part="tutorial-decode" class="${orClasses2.tutorialCopy}" href="${escapeHtml2(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml2(checkoutLabels2.decodeInvoice)}</a>`;
+  const decodeButton = decodeHref === void 0 ? "" : `<a part="tutorial-decode" class="${orClasses2.tutorialCopy}" href="${escapeHtml3(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml3(checkoutLabels2.decodeInvoice)}</a>`;
   const body = stepIndex === 0 ? `
         <div part="tutorial-intro" class="${orClasses2.tutorialIntro}">
-          <img part="tutorial-provider-logo" alt="" src="${escapeHtml2(provider.icon)}" class="${orClasses2.tutorialProviderLogo}">
-          <p>${escapeHtml2(checkoutLabels2.tutorialIntroPrefix)} ${escapeHtml2(provider.name)}.</p>
-          <p>${escapeHtml2(checkoutLabels2.tutorialIntroCopy)}</p>
-          <button part="tutorial-copy" class="${orClasses2.tutorialCopy}" type="button">${escapeHtml2(checkoutLabels2.copyInvoice)}</button>
+          <img part="tutorial-provider-logo" alt="" src="${escapeHtml3(provider.icon)}" class="${orClasses2.tutorialProviderLogo}">
+          <p>${escapeHtml3(checkoutLabels2.tutorialIntroPrefix)} ${escapeHtml3(provider.name)}.</p>
+          <p>${escapeHtml3(checkoutLabels2.tutorialIntroCopy)}</p>
+          <button part="tutorial-copy" class="${orClasses2.tutorialCopy}" type="button">${escapeHtml3(checkoutLabels2.copyInvoice)}</button>
           ${decodeButton}
-          ${copied ? `<p part="tutorial-copy-message" class="${orClasses2.tutorialCopyMessage}">${escapeHtml2(checkoutLabels2.tutorialCopiedContinue)}</p>` : ""}
+          ${copied ? `<p part="tutorial-copy-message" class="${orClasses2.tutorialCopyMessage}">${escapeHtml3(checkoutLabels2.tutorialCopiedContinue)}</p>` : ""}
         </div>
       ` : `
         <div part="tutorial-frame" class="${orClasses2.tutorialFrame}">
-          <img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${escapeHtml2(tutorial?.caption ?? "")}" src="${escapeHtml2(tutorial?.image ?? "")}">
+          <img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${escapeHtml3(tutorial?.caption ?? "")}" src="${escapeHtml3(tutorial?.image ?? "")}">
         </div>
-        <p part="tutorial-caption" class="${orClasses2.tutorialCaption}">${escapeHtml2(tutorial?.caption ?? "")}</p>
+        <p part="tutorial-caption" class="${orClasses2.tutorialCaption}">${escapeHtml3(tutorial?.caption ?? "")}</p>
       `;
   return `
-    <div part="tutorial" class="${orClasses2.tutorialModal}" role="dialog" aria-modal="true" aria-label="${escapeHtml2(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml2(provider.name)}" tabindex="-1">
+    <div part="tutorial" class="${orClasses2.tutorialModal}" role="dialog" aria-modal="true" aria-label="${escapeHtml3(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml3(provider.name)}" tabindex="-1">
       <div part="tutorial-dialog" class="${orClasses2.tutorialBox}">
         <div part="tutorial-header" class="${orClasses2.tutorialHeader}">
           <div part="tutorial-title" class="${orClasses2.tutorialTitle}">
-            <img part="tutorial-header-logo" alt="" src="${escapeHtml2(provider.icon)}" class="${orClasses2.tutorialHeaderLogo}">
-            <h3>${escapeHtml2(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml2(provider.name)}</h3>
+            <img part="tutorial-header-logo" alt="" src="${escapeHtml3(provider.icon)}" class="${orClasses2.tutorialHeaderLogo}">
+            <h3>${escapeHtml3(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml3(provider.name)}</h3>
           </div>
           <button
             part="tutorial-close"
             class="${orClasses2.tutorialClose}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}=""
             type="button"
-            aria-label="${escapeHtml2(checkoutLabels2.tutorialClose)}"
+            aria-label="${escapeHtml3(checkoutLabels2.tutorialClose)}"
           >X</button>
         </div>
         ${body}
@@ -518,18 +535,18 @@ function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex,
           <button
             part="tutorial-nav"
             class="${orClasses2.btn}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml2(provider.id)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml3(provider.id)}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="${previousIndex}"
             type="button"
             ${stepIndex === 0 ? "disabled" : ""}
-          >${escapeHtml2(checkoutLabels2.tutorialBack)}</button>
+          >${escapeHtml3(checkoutLabels2.tutorialBack)}</button>
           <button
             part="tutorial-nav"
             class="${orClasses2.btn}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${isFinalStep ? "" : escapeHtml2(provider.id)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${isFinalStep ? "" : escapeHtml3(provider.id)}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="${nextIndex}"
             type="button"
-          >${escapeHtml2(isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext)}</button>
+          >${escapeHtml3(isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext)}</button>
         </div>
       </div>
     </div>
@@ -541,7 +558,7 @@ import {
   checkoutLabels as checkoutLabels4,
   createSwapDisplayModel,
   currentCheckoutUrl,
-  escapeHtml as escapeHtml4,
+  escapeHtml as escapeHtml5,
   OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4,
   orClasses as orClasses4,
   swapAssetMatchesRoute,
@@ -550,7 +567,7 @@ import {
 
 // src/transaction-details.ts
 import {
-  escapeHtml as escapeHtml3,
+  escapeHtml as escapeHtml4,
   OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES3,
   OPENRECEIVE_PAYMENT_WIZARD_SELECTORS as OPENRECEIVE_PAYMENT_WIZARD_SELECTORS2,
   checkoutLabels as checkoutLabels3,
@@ -563,8 +580,8 @@ function renderTransactionDetailsHtml(source, options = {}) {
   const openAttr = options.open === true ? " open" : "";
   const className = options.className ?? orClasses3.transactionDetails;
   return `
-    <details part="transaction-details" class="${escapeHtml3(className)}"${openAttr}>
-      <summary class="${orClasses3.transactionDetailsTitle}">${escapeHtml3(checkoutLabels3.transactionDetails)}</summary>
+    <details part="transaction-details" class="${escapeHtml4(className)}"${openAttr}>
+      <summary class="${orClasses3.transactionDetailsTitle}">${escapeHtml4(checkoutLabels3.transactionDetails)}</summary>
       <div class="${orClasses3.transactionDetailsContent}">
         <dl part="swap-details" class="${orClasses3.swapDetails}">
           ${rows.map(
@@ -611,17 +628,17 @@ function renderElementSwapActionsHtml(routeKey, options, view) {
       ${shown.map((option) => {
     const disabled = option.available === false;
     const limitMessage = elementsSwapLimitMessage(option, view);
-    const info = disabled ? limitMessage === void 0 ? "" : `<p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml4(limitMessage)}</p>` : option.pay_amount === void 0 ? "" : `<p part="swap-estimate" class="${orClasses4.swapEstimate}">Estimated ${escapeHtml4(option.pay_amount)} ${escapeHtml4(option.label)} to settle this checkout.</p>`;
+    const info = disabled ? limitMessage === void 0 ? "" : `<p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml5(limitMessage)}</p>` : option.pay_amount === void 0 ? "" : `<p part="swap-estimate" class="${orClasses4.swapEstimate}">Estimated ${escapeHtml5(option.pay_amount)} ${escapeHtml5(option.label)} to settle this checkout.</p>`;
     return `
         <div class="${orClasses4.swapAction}">
         ${info}
         <button
           part="swap-start"
           class="${orClasses4.swapStart}"
-          ${disabled ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapStart}="${escapeHtml4(option.pay_in_asset)}"`}
+          ${disabled ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapStart}="${escapeHtml5(option.pay_in_asset)}"`}
           ${disabled ? 'disabled aria-disabled="true"' : ""}
           type="button"
-        >${escapeHtml4(
+        >${escapeHtml5(
       checkoutLabels4.createPaymentAddress.replace("{asset}", option.label).replace("{network}", option.network_label)
     )}</button>
         </div>
@@ -646,21 +663,21 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
   });
   if (display === void 0) return "";
   const backButton = `
-    <button part="swap-back" class="${orClasses4.swapBack}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapBack} type="button">${escapeHtml4(checkoutLabels4.payWithLightningInstead)}</button>
+    <button part="swap-back" class="${orClasses4.swapBack}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapBack} type="button">${escapeHtml5(checkoutLabels4.payWithLightningInstead)}</button>
   `;
   const supportDetails = renderElementSwapSupportDetailsHtml(display);
   const heading = `
     <div part="swap-heading" class="${orClasses4.swapHeading}">
-      <strong class="${orClasses4.swapHeadingTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
-      <span class="${orClasses4.swapHeadingDetail}">${escapeHtml4(display.providerStateDetail)}</span>
+      <strong class="${orClasses4.swapHeadingTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
+      <span class="${orClasses4.swapHeadingDetail}">${escapeHtml5(display.providerStateDetail)}</span>
     </div>
   `;
   const refundHeading = `
     <div part="swap-heading" class="${orClasses4.swapRefundHeading}" role="alert">
       ${renderElementAlertIconHtml("warning")}
       <div class="${orClasses4.swapNetworkWarningContent}">
-        <strong class="${orClasses4.swapHeadingTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
-        <span class="${orClasses4.swapHeadingDetail}">${escapeHtml4(display.providerStateDetail)}</span>
+        <strong class="${orClasses4.swapHeadingTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
+        <span class="${orClasses4.swapHeadingDetail}">${escapeHtml5(display.providerStateDetail)}</span>
       </div>
     </div>
   `;
@@ -670,8 +687,8 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
         <div part="status" class="${orClasses4.paymentStatus}">
           <span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
           <div class="${orClasses4.paymentStatusBody}">
-            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
-            <p class="${orClasses4.paymentStatusDetail}">${escapeHtml4(display.providerStateDetail)}</p>
+            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
+            <p class="${orClasses4.paymentStatusDetail}">${escapeHtml5(display.providerStateDetail)}</p>
           </div>
         </div>
         ${backButton}
@@ -685,19 +702,19 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
         <span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
         <div class="${orClasses4.paymentStatusBody}">
           <div class="${orClasses4.swapWaitingTitle}">
-            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
-            <strong part="swap-countdown" class="${orClasses4.swapCountdown}">${escapeHtml4(display.countdownLabel)}</strong>
+            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
+            <strong part="swap-countdown" class="${orClasses4.swapCountdown}">${escapeHtml5(display.countdownLabel)}</strong>
           </div>
-          <p class="${orClasses4.paymentStatusDetail}">${escapeHtml4(display.providerStateDetail)}</p>
+          <p class="${orClasses4.paymentStatusDetail}">${escapeHtml5(display.providerStateDetail)}</p>
         </div>
       </div>
     `;
     return `
       <section part="swap-panel" class="${orClasses4.swapPanel}">
-        <p part="swap-instruction" class="${orClasses4.swapInstruction}">Pay <strong>${escapeHtml4(display.depositAmount)} ${escapeHtml4(display.assetLabel)}</strong> to this address</p>
+        <p part="swap-instruction" class="${orClasses4.swapInstruction}">Pay <strong>${escapeHtml5(display.depositAmount)} ${escapeHtml5(display.assetLabel)}</strong> to this address</p>
         ${renderElementSwapNetworkWarningHtml(display)}
         <div part="swap-deposit-layout" class="${orClasses4.swapDepositLayout}">
-          <div part="swap-qr" class="${orClasses4.swapQrFrame}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapQr}="${escapeHtml4(display.qrPayload)}"></div>
+          <div part="swap-qr" class="${orClasses4.swapQrFrame}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapQr}="${escapeHtml5(display.qrPayload)}"></div>
           <div part="swap-deposit-side" class="${orClasses4.swapDepositSide}">
             <dl part="swap-details" class="${orClasses4.swapDetails}">
               ${display.copyRows.map(
@@ -734,8 +751,8 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
         <div part="status" class="${orClasses4.paymentStatus}">
           <span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
           <div class="${orClasses4.paymentStatusBody}">
-            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
-            <p class="${orClasses4.paymentStatusDetail}">${escapeHtml4(display.providerStateDetail)}</p>
+            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
+            <p class="${orClasses4.paymentStatusDetail}">${escapeHtml5(display.providerStateDetail)}</p>
           </div>
         </div>
         ${supportDetails}
@@ -756,14 +773,14 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
     const stagedRefundAddress = display.refundAddress;
     const refundFacts = renderElementSwapAmountFactsHtml(display);
     const refundFormIntro = `
-      <p class="${orClasses4.swapSectionTitle}">${escapeHtml4(checkoutLabels4.refundSectionTitle)}</p>
-      ${display.refundReason === void 0 ? "" : `<p class="${orClasses4.swapRefundReason}">${escapeHtml4(
+      <p class="${orClasses4.swapSectionTitle}">${escapeHtml5(checkoutLabels4.refundSectionTitle)}</p>
+      ${display.refundReason === void 0 ? "" : `<p class="${orClasses4.swapRefundReason}">${escapeHtml5(
       checkoutLabels4.refundReasonLabel.replace(
         "{reason}",
         display.refundReason.replace(/_/g, " ")
       )
     )}</p>`}
-      <p class="${orClasses4.swapRefundInstruction}">${escapeHtml4(
+      <p class="${orClasses4.swapRefundInstruction}">${escapeHtml5(
       checkoutLabels4.refundAddressOwnership.replace("{network}", display.networkLabel)
     )}</p>
     `;
@@ -777,9 +794,9 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
             part="swap-refund"
             class="${orClasses4.swapRefund}"
             novalidate
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml4(display.attemptId)}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml4(display.payInAsset)}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml4(display.networkLabel)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml5(display.attemptId)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml5(display.payInAsset)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml5(display.networkLabel)}"
             ${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
           >
             ${refundFormIntro}
@@ -787,7 +804,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
               class="${orClasses4.swapRefundInput}"
               ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
               name="refund_address"
-              placeholder="${escapeHtml4(checkoutLabels4.refundAddressPlaceholder.replace("{network}", display.networkLabel))}"
+              placeholder="${escapeHtml5(checkoutLabels4.refundAddressPlaceholder.replace("{network}", display.networkLabel))}"
               type="text"
               autocomplete="off"
               required
@@ -799,28 +816,28 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
               hidden
               role="alert"
             ></p>
-            <p part="swap-refund-hint" class="${orClasses4.swapRefundHint}">Make sure you control this ${escapeHtml4(display.networkLabel)} address. Refunds sent to the wrong address usually cannot be recovered.</p>
-            <button class="${orClasses4.btn}" type="submit">${escapeHtml4(checkoutLabels4.reviewRefundAddress)}</button>
+            <p part="swap-refund-hint" class="${orClasses4.swapRefundHint}">Make sure you control this ${escapeHtml5(display.networkLabel)} address. Refunds sent to the wrong address usually cannot be recovered.</p>
+            <button class="${orClasses4.btn}" type="submit">${escapeHtml5(checkoutLabels4.reviewRefundAddress)}</button>
           </form>
         ` : `
           <form
             part="swap-refund"
             class="${orClasses4.swapRefund}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml4(display.attemptId)}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml4(display.payInAsset)}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml4(display.networkLabel)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml5(display.attemptId)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml5(display.payInAsset)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml5(display.networkLabel)}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundConfirm}="true"
             ${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
           >
             ${refundFormIntro}
-            <p class="${orClasses4.swapRefundInstruction}">${escapeHtml4(checkoutLabels4.confirmRefundTo.replace("{address}", stagedRefundAddress))}</p>
+            <p class="${orClasses4.swapRefundInstruction}">${escapeHtml5(checkoutLabels4.confirmRefundTo.replace("{address}", stagedRefundAddress))}</p>
             <input
               ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
               name="refund_address"
               type="hidden"
-              value="${escapeHtml4(stagedRefundAddress)}"
+              value="${escapeHtml5(stagedRefundAddress)}"
             >
-            <button class="${orClasses4.btn}" type="submit">${escapeHtml4(checkoutLabels4.confirmRefund)}</button>
+            <button class="${orClasses4.btn}" type="submit">${escapeHtml5(checkoutLabels4.confirmRefund)}</button>
           </form>
         `}
         ${supportDetails}
@@ -845,7 +862,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
   return `
     <section part="swap-panel" class="${orClasses4.swapPanel}">
       ${heading}
-      <p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.supportReviewFacts)}</p>
+      <p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml5(checkoutLabels4.supportReviewFacts)}</p>
       ${renderElementSwapAmountFactsHtml(display)}
       ${renderElementSwapSupportDetailsHtml(display, { open: true })}
       ${backButton}
@@ -858,8 +875,8 @@ function renderElementSwapRefundReturnWarningHtml(display) {
     <div part="swap-refund-return" class="${orClasses4.swapRefundReturn}">
       ${renderElementAlertIconHtml("bookmark")}
       <div class="${orClasses4.swapNetworkWarningContent}">
-        <p class="${orClasses4.swapRefundReturnTitle}">${escapeHtml4(checkoutLabels4.refundReturnTitle)}</p>
-        <p class="${orClasses4.swapRefundReturnBody}">${escapeHtml4(display.refundReturnLabel)}</p>
+        <p class="${orClasses4.swapRefundReturnTitle}">${escapeHtml5(checkoutLabels4.refundReturnTitle)}</p>
+        <p class="${orClasses4.swapRefundReturnBody}">${escapeHtml5(display.refundReturnLabel)}</p>
         ${url === void 0 ? "" : `<dl part="swap-details" class="${orClasses4.swapDetails}">${renderElementSwapCopyDetailHtml(
     checkoutLabels4.refundReturnUrlLabel,
     url,
@@ -881,8 +898,8 @@ function renderElementSwapAmountFactsHtml(display) {
   const rows = facts.map(
     ([label, value]) => `
         <div class="${orClasses4.swapFactsRow}">
-          <dt class="${orClasses4.swapFactsLabel}">${escapeHtml4(label)}</dt>
-          <dd class="${orClasses4.swapFactsValue}">${escapeHtml4(value)}</dd>
+          <dt class="${orClasses4.swapFactsLabel}">${escapeHtml5(label)}</dt>
+          <dd class="${orClasses4.swapFactsValue}">${escapeHtml5(value)}</dd>
         </div>`
   ).join("");
   return `<dl part="swap-facts" class="${orClasses4.swapFacts}">${rows}</dl>`;
@@ -896,19 +913,19 @@ function renderElementAlertIconHtml(kind) {
 function renderElementSwapNetworkWarningHtml(display) {
   const alarm = display.depositRisk !== "pinned";
   const emphasisStart = display.networkWarning.indexOf(display.networkWarningEmphasis);
-  const before = emphasisStart === -1 ? escapeHtml4(display.networkWarning) : escapeHtml4(display.networkWarning.slice(0, emphasisStart));
-  const after = emphasisStart === -1 ? "" : escapeHtml4(
+  const before = emphasisStart === -1 ? escapeHtml5(display.networkWarning) : escapeHtml5(display.networkWarning.slice(0, emphasisStart));
+  const after = emphasisStart === -1 ? "" : escapeHtml5(
     display.networkWarning.slice(emphasisStart + display.networkWarningEmphasis.length)
   );
-  const emphasis = emphasisStart === -1 ? "" : `<strong class="${orClasses4.swapNetworkWarningEmphasis}">${escapeHtml4(display.networkWarningEmphasis)}</strong>`;
+  const emphasis = emphasisStart === -1 ? "" : `<strong class="${orClasses4.swapNetworkWarningEmphasis}">${escapeHtml5(display.networkWarningEmphasis)}</strong>`;
   const icon = alarm ? `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="${orClasses4.swapNetworkWarningIcon}" aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
       </svg>` : "";
   return `
-    <div part="swap-network-warning"${alarm ? ' role="alert"' : ""} data-or-deposit-risk="${escapeHtml4(display.depositRisk)}" class="${alarm ? orClasses4.swapNetworkWarning : orClasses4.swapNetworkNotice}">
+    <div part="swap-network-warning"${alarm ? ' role="alert"' : ""} data-or-deposit-risk="${escapeHtml5(display.depositRisk)}" class="${alarm ? orClasses4.swapNetworkWarning : orClasses4.swapNetworkNotice}">
       ${icon}
       <div class="${orClasses4.swapNetworkWarningContent}">
-        <p class="${orClasses4.swapNetworkWarningTitle}">${escapeHtml4(display.networkWarningTitle)}</p>
+        <p class="${orClasses4.swapNetworkWarningTitle}">${escapeHtml5(display.networkWarningTitle)}</p>
         <p class="${orClasses4.swapNetworkWarningBody}">${before}${emphasis}${after}</p>
       </div>
     </div>
@@ -937,14 +954,14 @@ function renderElementSwapFeeBreakdownHtml(breakdown) {
   const feeValue = breakdown.feePercent === void 0 ? breakdown.fee : `${breakdown.fee} (${breakdown.feePercent})`;
   return `
     <div part="swap-breakdown" class="${orClasses4.swapBreakdown}">
-      <p part="swap-breakdown-title" class="${orClasses4.swapBreakdownTitle}">${escapeHtml4(checkoutLabels4.paymentBreakdown)}</p>
+      <p part="swap-breakdown-title" class="${orClasses4.swapBreakdownTitle}">${escapeHtml5(checkoutLabels4.paymentBreakdown)}</p>
       <dl part="swap-details" class="${orClasses4.swapBreakdownRows}">
-        <dt>${escapeHtml4(checkoutLabels4.cartTotal)}</dt>
-        <dd>${escapeHtml4(breakdown.cartTotal)}</dd>
-        <dt>${escapeHtml4(checkoutLabels4.youSend)}</dt>
-        <dd>${escapeHtml4(breakdown.youSend)}</dd>
-        <dt>${escapeHtml4(checkoutLabels4.swapAndNetworkFees)}</dt>
-        <dd>${escapeHtml4(feeValue)}</dd>
+        <dt>${escapeHtml5(checkoutLabels4.cartTotal)}</dt>
+        <dd>${escapeHtml5(breakdown.cartTotal)}</dd>
+        <dt>${escapeHtml5(checkoutLabels4.youSend)}</dt>
+        <dd>${escapeHtml5(breakdown.youSend)}</dd>
+        <dt>${escapeHtml5(checkoutLabels4.swapAndNetworkFees)}</dt>
+        <dd>${escapeHtml5(feeValue)}</dd>
       </dl>
     </div>
   `;
@@ -977,11 +994,11 @@ function renderElementSwapUnavailableHtml(quote, checkout) {
   const model = createSwapUnavailableModel(quote, checkout);
   return `<section part="swap-panel" class="${orClasses5.swapPanel}">
       <div part="swap-heading" class="${orClasses5.swapHeading}">
-        <strong class="${orClasses5.swapHeadingTitle}">${escapeHtml5(model.title)}</strong>
+        <strong class="${orClasses5.swapHeadingTitle}">${escapeHtml6(model.title)}</strong>
       </div>
-      <p part="swap-warning" class="${orClasses5.swapWarning}">${escapeHtml5(model.detail)}</p>
-      ${model.range === void 0 ? "" : `<p class="${orClasses5.swapWarning}">${escapeHtml5(model.range)}</p>`}
-      <p class="${orClasses5.swapProgress}">${escapeHtml5(model.hint)}</p>
+      <p part="swap-warning" class="${orClasses5.swapWarning}">${escapeHtml6(model.detail)}</p>
+      ${model.range === void 0 ? "" : `<p class="${orClasses5.swapWarning}">${escapeHtml6(model.range)}</p>`}
+      <p class="${orClasses5.swapProgress}">${escapeHtml6(model.hint)}</p>
     </section>`;
 }
 function renderPaymentWizardHtml(view = {}) {
@@ -1025,22 +1042,22 @@ function renderPaymentWizardHtml(view = {}) {
             class="${orClasses5.btnGhost}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="swap-asset"
             type="button"
-          >${escapeHtml5(checkoutLabels5.switchPaymentMethod)}</button>
+          >${escapeHtml6(checkoutLabels5.switchPaymentMethod)}</button>
           <span aria-hidden="true">/</span>
-          <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(label)}</span>
+          <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml6(label)}</span>
         </div>`}
         <div part="wizard-results" class="${orClasses5.wizardResults}">
           ${activeSwap !== void 0 ? renderElementSwapPanelHtml(activeSwap, view) : view.swapStartError !== void 0 ? `<section part="swap-panel" class="${orClasses5.swapPanel}">
                     <div part="swap-error" role="alert" class="${orClasses5.paymentStatus}">
                       <div class="${orClasses5.paymentStatusBody}">
-                        <strong class="${orClasses5.paymentStatusTitle}">${escapeHtml5(checkoutLabels5.swapStartFailedTitle)}</strong>
-                        <p class="${orClasses5.paymentStatusDetail}">${escapeHtml5(view.swapStartError)}</p>
+                        <strong class="${orClasses5.paymentStatusTitle}">${escapeHtml6(checkoutLabels5.swapStartFailedTitle)}</strong>
+                        <p class="${orClasses5.paymentStatusDetail}">${escapeHtml6(view.swapStartError)}</p>
                         <button
                           part="swap-retry"
                           class="${orClasses5.btn}"
                           type="button"
-                          ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(selectedSwapAsset)}"
-                        >${escapeHtml5(checkoutLabels5.tryAgain)}</button>
+                          ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml6(selectedSwapAsset)}"
+                        >${escapeHtml6(checkoutLabels5.tryAgain)}</button>
                       </div>
                     </div>
                   </section>` : view.unavailableSwapQuote !== void 0 ? renderElementSwapUnavailableHtml(
@@ -1050,8 +1067,8 @@ function renderPaymentWizardHtml(view = {}) {
                     <div part="status" class="${orClasses5.paymentStatus}">
                       <span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>
                       <div class="${orClasses5.paymentStatusBody}">
-                        <strong class="${orClasses5.paymentStatusTitle}">${escapeHtml5(checkoutLabels5.preparingPaymentAddress)}</strong>
-                        <p class="${orClasses5.paymentStatusDetail}">${escapeHtml5(
+                        <strong class="${orClasses5.paymentStatusTitle}">${escapeHtml6(checkoutLabels5.preparingPaymentAddress)}</strong>
+                        <p class="${orClasses5.paymentStatusDetail}">${escapeHtml6(
       checkoutLabels5.preparingPaymentAddressDetail.replace(
         "{asset}",
         selectedSwapOption?.label ?? "coin"
@@ -1069,7 +1086,7 @@ function renderPaymentWizardHtml(view = {}) {
   const methodPicker = selection.selectedMethod === null ? renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) : "";
   return `
     <section part="wizard" class="${orClasses5.wizard}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.root}>
-      ${view.wizardError === void 0 ? "" : `<p part="wizard-error" role="alert" class="${orClasses5.paymentStatusDetail}">${escapeHtml5(view.wizardError)}</p>`}
+      ${view.wizardError === void 0 ? "" : `<p part="wizard-error" role="alert" class="${orClasses5.paymentStatusDetail}">${escapeHtml6(view.wizardError)}</p>`}
       ${methodPicker}
       ${selection.selectedMethod === null && keepOrderNote.length > 0 ? `<div class="${orClasses5.wizardBody}">${keepOrderNote}</div>` : ""}
       ${selection.selectedMethod === null ? "" : `
@@ -1082,12 +1099,16 @@ function renderPaymentWizardHtml(view = {}) {
               <button
                 part="route${asset.selected ? " selected" : ""}"
                 class="${asset.selected ? orClasses5.routeButtonSelected : orClasses5.routeButton}"
-                ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.route}="${escapeHtml5(asset.id)}"
+                ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.route}="${escapeHtml6(asset.id)}"
                 type="button"
               >
-                <img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(asset.icon)}">
-                <strong class="${orClasses5.methodTitle}">${escapeHtml5(asset.label)}</strong>
-                <small class="${orClasses5.methodDetail}">${escapeHtml5(asset.subtitle)}</small>
+                ${renderPaymentIconHtml(asset.iconId, {
+      className: orClasses5.methodIcon,
+      label: asset.label,
+      resolveAssetUrl: view.resolveAssetUrl
+    })}
+                <strong class="${orClasses5.methodTitle}">${escapeHtml6(asset.label)}</strong>
+                <small class="${orClasses5.methodDetail}">${escapeHtml6(asset.subtitle)}</small>
               </button>
             `
   ).join("")}
@@ -1096,7 +1117,7 @@ function renderPaymentWizardHtml(view = {}) {
       ${`
         <div part="wizard-results" class="${orClasses5.wizardResults}">
           ${routeDisplays.length === 0 ? `
-            <p part="wizard-empty" class="${orClasses5.wizardEmpty}">${escapeHtml5(
+            <p part="wizard-empty" class="${orClasses5.wizardEmpty}">${escapeHtml6(
     getWizardEmptyMessage()
   )}</p>
 	          ` : routeDisplays.map((route) => {
@@ -1104,7 +1125,7 @@ function renderPaymentWizardHtml(view = {}) {
     return `
 	            <section part="wizard-route" class="${orClasses5.wizardRoute}">
                 <h3 class="${orClasses5.wizardRouteHeading}">
-                  ${escapeHtml5(route.title)}
+                  ${escapeHtml6(route.title)}
                 </h3>
               ${activeSwap === void 0 ? renderElementSwapActionsHtml(route.key, view.swapOptions ?? [], view) : renderElementSwapPanelHtml(activeSwap, view)}
               ${activeSwap === void 0 ? `<div part="provider-grid" class="${orClasses5.providerGrid}">
@@ -1112,10 +1133,10 @@ function renderPaymentWizardHtml(view = {}) {
       (provider) => `
                   <article part="provider" class="${orClasses5.providerCard}">
                     <div part="provider-heading" class="${orClasses5.providerHeading}">
-                      <img class="${orClasses5.providerIcon}" alt="" src="${escapeHtml5(provider.icon)}">
-                      <h4 class="${orClasses5.providerName}">${escapeHtml5(provider.name)}</h4>
+                      <img class="${orClasses5.providerIcon}" alt="" src="${escapeHtml6(provider.icon)}">
+                      <h4 class="${orClasses5.providerName}">${escapeHtml6(provider.name)}</h4>
 	                    </div>
-                    <p part="provider-kind" class="${orClasses5.providerKind}">${escapeHtml5(provider.kind)}</p>
+                    <p part="provider-kind" class="${orClasses5.providerKind}">${escapeHtml6(provider.kind)}</p>
 	                    <div part="provider-actions" class="${orClasses5.providerActions}">
                       ${renderProviderOpenActionHtml(provider)}
                     </div>
@@ -1149,8 +1170,8 @@ function renderElementKeepOrderNoteHtml(view) {
   if (reference.length === 0 && url === void 0) return "";
   return `
     <div part="keep-order" class="${orClasses5.keepOrder}">
-      <p class="${orClasses5.swapSectionTitle}">${escapeHtml5(checkoutLabels5.keepOrderTitle)}</p>
-      <p class="${orClasses5.keepOrderBody}">${escapeHtml5(checkoutLabels5.keepOrderBody)}</p>
+      <p class="${orClasses5.swapSectionTitle}">${escapeHtml6(checkoutLabels5.keepOrderTitle)}</p>
+      <p class="${orClasses5.keepOrderBody}">${escapeHtml6(checkoutLabels5.keepOrderBody)}</p>
       <dl part="swap-details" class="${orClasses5.swapDetails}">
         ${reference.length === 0 ? "" : renderElementSwapCopyDetailHtml(checkoutLabels5.keepOrderIdLabel, reference, {
     selectable: true
@@ -1178,7 +1199,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
     disabled: continueTarget === void 0 || continueTarget.disabled,
     starting: continueTarget?.starting === true,
     swapStartAsset: continueTarget === void 0 || continueTarget.disabled ? void 0 : continueTarget.payInAsset,
-    label: escapeHtml5(continueTarget?.label ?? checkoutLabels5.continue)
+    label: escapeHtml6(continueTarget?.label ?? checkoutLabels5.continue)
   });
   const tiles = display.entries.map((entry) => {
     if (entry.kind === "method") {
@@ -1188,15 +1209,19 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
             part="method"
             type="button"
             class="${assetButtonClasses({ accent: entry.accent, selected: false, disabled: entry.disabled })}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.method}="${escapeHtml5(method.id)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.method}="${escapeHtml6(method.id)}"
             ${entry.disabled ? 'disabled aria-disabled="true"' : ""}
           >
             <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
-              <img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(getPaymentMethodIcon(method.id, view.resolveAssetUrl))}">
+              ${renderPaymentIconHtml(getPaymentMethodIconId(method.id), {
+        className: orClasses5.methodIcon,
+        label: method.title,
+        resolveAssetUrl: view.resolveAssetUrl
+      })}
             </span>
             <span class="${orClasses5.methodTitleWrap}">
-              <span class="${orClasses5.methodTitle}">${escapeHtml5(method.title)}</span>
-              <span class="${orClasses5.methodTileDetail}">${escapeHtml5(method.detail)}</span>
+              <span class="${orClasses5.methodTitle}">${escapeHtml6(method.title)}</span>
+              <span class="${orClasses5.methodTileDetail}">${escapeHtml6(method.detail)}</span>
             </span>
           </button>`;
     }
@@ -1209,7 +1234,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
   }).join("");
   const loadingTile = currenciesLoading ? `<div part="currencies-loading" role="status" aria-live="polite" class="${orClasses5.methodCurrenciesLoading}">
         <span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>
-        <span class="${orClasses5.methodTitle}">${escapeHtml5(checkoutLabels5.loadingCurrencies)}</span>
+        <span class="${orClasses5.methodTitle}">${escapeHtml6(checkoutLabels5.loadingCurrencies)}</span>
       </div>` : "";
   const desktopReveal = networkRequired && selectedGroup !== void 0 ? `<div class="${orClasses5.methodNetworkRevealDesktop}">${renderElementNetworkSelectorHtml(
     selectedGroup,
@@ -1219,11 +1244,11 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
   )}</div>` : "";
   return `
       <header class="${orClasses5.wizardHeader}">
-        <h2 id="payment-method-heading" class="${orClasses5.wizardHeaderTitle}">${escapeHtml5(checkoutLabels5.wizardTitle)}</h2>
-        <p class="${orClasses5.wizardHeaderSubtitle}">${escapeHtml5(checkoutLabels5.wizardSubtitle)}</p>
+        <h2 id="payment-method-heading" class="${orClasses5.wizardHeaderTitle}">${escapeHtml6(checkoutLabels5.wizardTitle)}</h2>
+        <p class="${orClasses5.wizardHeaderSubtitle}">${escapeHtml6(checkoutLabels5.wizardSubtitle)}</p>
       </header>
       <div class="${orClasses5.wizardBody}" aria-labelledby="payment-method-heading">
-        <div part="method-grid" role="group" aria-label="${escapeHtml5(checkoutLabels5.paymentMethod)}" class="${orClasses5.methodGrid}">
+        <div part="method-grid" role="group" aria-label="${escapeHtml6(checkoutLabels5.paymentMethod)}" class="${orClasses5.methodGrid}">
           ${tiles}${loadingTile}
         </div>
         ${desktopReveal}
@@ -1247,21 +1272,25 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
       disabled: optionDisabled
     })}"
             ${optionDisabled ? 'disabled aria-disabled="true"' : ""}
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetwork}="${escapeHtml5(groupKey)}"
-            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetworkValue}="${escapeHtml5(option.pay_in_asset)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetwork}="${escapeHtml6(groupKey)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetworkValue}="${escapeHtml6(option.pay_in_asset)}"
           >
             <span aria-hidden="true" class="grid size-6 shrink-0 place-items-center">
-              <img class="${orClasses5.methodNetworkIcon}" alt="" src="${escapeHtml5(getNetworkIcon(option.network_label, view.resolveAssetUrl))}">
+              ${renderPaymentIconHtml(getNetworkIconId(option.network_label), {
+      className: orClasses5.methodNetworkIcon,
+      label: option.network_label,
+      resolveAssetUrl: view.resolveAssetUrl
+    })}
             </span>
-            <span class="truncate">${escapeHtml5(option.network_label)}</span>
+            <span class="truncate">${escapeHtml6(option.network_label)}</span>
             ${optionSelected ? `<span aria-hidden="true" class="${networkCheckClasses(accent)}">\u2713</span>` : ""}
           </button>
-          ${optionDisabled && optionLimit !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml5(optionLimit)}</span>` : ""}
+          ${optionDisabled && optionLimit !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml6(optionLimit)}</span>` : ""}
         </div>`;
   }).join("");
   const summary = selectedOption === void 0 ? "" : `<p aria-live="polite" class="${orClasses5.methodNetworkSummary}">
           <span aria-hidden="true" class="${networkSummaryIconClasses(accent)}">\u2713</span>
-          ${escapeHtml5(formatNetworkSummary(group.label, selectedOption.network_label))}
+          ${escapeHtml6(formatNetworkSummary(group.label, selectedOption.network_label))}
         </p>`;
   return `
     <div
@@ -1272,10 +1301,10 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
     >
       <div class="${orClasses5.methodNetworkLayout}">
         <div>
-          <h3 id="${headingId}" class="${orClasses5.methodNetworkHeading}">${escapeHtml5(
+          <h3 id="${headingId}" class="${orClasses5.methodNetworkHeading}">${escapeHtml6(
     group.heading
   )}</h3>
-          <p class="${orClasses5.methodNetworkHint}">${escapeHtml5(
+          <p class="${orClasses5.methodNetworkHint}">${escapeHtml6(
     checkoutLabels5.selectNetworkToContinue
   )}</p>
         </div>
@@ -1288,7 +1317,7 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
     </div>`;
 }
 function renderElementMethodConfirmHtml(options) {
-  const swapStart = options.disabled || options.swapStartAsset === void 0 ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(options.swapStartAsset)}"`;
+  const swapStart = options.disabled || options.swapStartAsset === void 0 ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml6(options.swapStartAsset)}"`;
   return `
     <button
       type="button"
@@ -1333,17 +1362,21 @@ function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonH
   })}"
         ${disabled || gridBusy ? 'disabled aria-disabled="true"' : ""}
         ${starting ? 'aria-busy="true"' : ""}
-        ${disabled || gridBusy ? "" : multiNetwork ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.pickerSelect}="${escapeHtml5(pickerKey)}"` : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(displayOption.pay_in_asset)}"`}
+        ${disabled || gridBusy ? "" : multiNetwork ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.pickerSelect}="${escapeHtml6(pickerKey)}"` : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml6(displayOption.pay_in_asset)}"`}
       >
         <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
-          ${starting ? `<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>` : `<img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(getSwapOptionIcon(displayOption, view.resolveAssetUrl))}">`}
+          ${starting ? `<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>` : renderPaymentIconHtml(getSwapOptionIconId(displayOption), {
+    className: orClasses5.methodIcon,
+    label: group.label,
+    resolveAssetUrl: view.resolveAssetUrl
+  })}
         </span>
         <span class="${orClasses5.methodTitleWrap}">
-          <span class="${orClasses5.methodTitle}">${escapeHtml5(group.label)}</span>
-          ${networkDetail.length === 0 ? "" : `<span class="${orClasses5.methodTileDetail}">${escapeHtml5(networkDetail)}</span>`}
+          <span class="${orClasses5.methodTitle}">${escapeHtml6(group.label)}</span>
+          ${networkDetail.length === 0 ? "" : `<span class="${orClasses5.methodTileDetail}">${escapeHtml6(networkDetail)}</span>`}
         </span>
       </button>
-      ${disabled && limitMessage !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml5(limitMessage)}</span>` : ""}
+      ${disabled && limitMessage !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml6(limitMessage)}</span>` : ""}
       ${mobileReveal}
     </div>`;
 }
@@ -1359,20 +1392,20 @@ function renderWizardBreadcrumbsHtml(options) {
         ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="method"
         type="button"
       >
-        <span>${escapeHtml5(checkoutLabels5.switchPaymentMethod)}</span>
+        <span>${escapeHtml6(checkoutLabels5.switchPaymentMethod)}</span>
       </button>
       <span part="wizard-breadcrumb-separator" aria-hidden="true">/</span>
-      ${routeLabel === null ? `<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(methodLabel)}</span>` : `
+      ${routeLabel === null ? `<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml6(methodLabel)}</span>` : `
           <button
             part="wizard-breadcrumb"
             class="${orClasses5.btnGhost}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="route"
             type="button"
           >
-            <span>${escapeHtml5(methodLabel)}</span>
+            <span>${escapeHtml6(methodLabel)}</span>
           </button>
           <span part="wizard-breadcrumb-separator" aria-hidden="true">/</span>
-          <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(routeLabel)}</span>
+          <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml6(routeLabel)}</span>
         `}
     </nav>
   `;
@@ -1426,11 +1459,11 @@ function renderCheckoutHtml(view) {
     fiatLabel: labels.fiatLabel,
     fiatCurrency: view.fiat_quote?.fiat?.currency
   });
-  const satsDetail = amountCaption === void 0 ? "" : `<div part="sats-detail" class="${orClasses6.satsDetail}">${escapeHtml6(amountCaption)}</div>`;
+  const satsDetail = amountCaption === void 0 ? "" : `<div part="sats-detail" class="${orClasses6.satsDetail}">${escapeHtml7(amountCaption)}</div>`;
   const statusLabel = view.status ?? (checkoutState === void 0 ? deriveStatus(view) : deriveStatus(checkoutState));
   const showSummaryMeta = statusLabel === "settled" || statusLabel === "expired";
   const stateClass = statusLabel === "settled" ? orClasses6.stateSettled : orClasses6.statePending;
-  const stateLabel = showSummaryMeta ? `<span part="state" class="${stateClass}" data-state="${escapeHtml6(statusLabel)}">${escapeHtml6(statusLabel)}</span>` : "";
+  const stateLabel = showSummaryMeta ? `<span part="state" class="${stateClass}" data-state="${escapeHtml7(statusLabel)}">${escapeHtml7(statusLabel)}</span>` : "";
   const status = checkoutState === void 0 ? "" : renderElementPaymentStatusHtml(checkoutState);
   const statusModel = checkoutState === void 0 ? void 0 : createCheckoutStatusModel(checkoutState);
   const expired = statusModel?.phase === "expired";
@@ -1438,18 +1471,18 @@ function renderCheckoutHtml(view) {
   const swapFocused = (view.wizard?.selectedSwapAsset ?? null) !== null;
   const hideLightning = !settled && (view.lightningRequested === false || swapFocused && !expired);
   const wizard = expired && !swapFocused || settled || view.payment_wizard === false ? "" : renderPaymentWizardHtml(view.wizard);
-  const copyButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.copy}" class="${orClasses6.btn}" type="button">${COPY_INVOICE_ICON}<span ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES6.swapCopyLabel}>${escapeHtml6(checkoutLabels6.copyInvoice)}</span></button>`;
+  const copyButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.copy}" class="${orClasses6.btn}" type="button">${COPY_INVOICE_ICON}<span ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES6.swapCopyLabel}>${escapeHtml7(checkoutLabels6.copyInvoice)}</span></button>`;
   const decodeInvoice = view.invoice.trim() !== "" ? view.invoice : typeof view.wizard?.lightningInvoice === "string" && view.wizard.lightningInvoice.trim() !== "" ? view.wizard.lightningInvoice : void 0;
   const decodeHref = decodeInvoice === void 0 ? void 0 : createLightningInvoiceDecodeUrl2(decodeInvoice, view.decodeLinkUrl);
-  const decodeButton = decodeHref === void 0 ? "" : `<a part="decode-invoice" class="${orClasses6.btn}" href="${escapeHtml6(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml6(checkoutLabels6.decodeInvoice)}</a>`;
-  const startOverButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.startOver}" class="${orClasses6.btn}" type="button">${escapeHtml6(checkoutLabels6.startOver)}</button>`;
+  const decodeButton = decodeHref === void 0 ? "" : `<a part="decode-invoice" class="${orClasses6.btn}" href="${escapeHtml7(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml7(checkoutLabels6.decodeInvoice)}</a>`;
+  const startOverButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.startOver}" class="${orClasses6.btn}" type="button">${escapeHtml7(checkoutLabels6.startOver)}</button>`;
   const lightningPane = hideLightning || expired || settled ? "" : `<div part="lightning-pane" class="${orClasses6.lightningPane}">
           <div part="qr" class="${orClasses6.qr}" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.qr}></div>
           ${satsDetail}
         </div>`;
   const paymentLayoutClass = expired || settled ? orClasses6.paymentLayoutExpired : orClasses6.paymentLayout;
   const metaRow = stateLabel === "" ? "" : `<div part="meta" class="${orClasses6.meta}">${stateLabel}</div>`;
-  const invoiceTitle = expired || settled ? "" : `<p part="invoice-title" class="${orClasses6.invoiceTitle}">${escapeHtml6(checkoutLabels6.bitcoinLightningInvoice)}</p>`;
+  const invoiceTitle = expired || settled ? "" : `<p part="invoice-title" class="${orClasses6.invoiceTitle}">${escapeHtml7(checkoutLabels6.bitcoinLightningInvoice)}</p>`;
   const actions = settled ? (
     // No state means no attempt to derive one from (a standalone caller that
     // passed `status: "settled"` and no invoice-id), so the panel reads the
@@ -1463,10 +1496,10 @@ function renderCheckoutHtml(view) {
     renderTransactionDetailsHtml(checkoutState ?? { ...view, rail: view.rail ?? "lightning" })
   ) : expired ? `<div part="actions" class="${orClasses6.actions}">${startOverButton}</div>` : `<div part="actions" class="${orClasses6.actions}">${copyButton}${decodeButton}</div>`;
   const resolvedTheme = view.theme ?? "light";
-  const orderDescription = view.description === void 0 || view.description === "" ? "" : `<p part="order-description" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.orderDescription} class="${orClasses6.orderDescription}">${escapeHtml6(view.description)}</p>`;
+  const orderDescription = view.description === void 0 || view.description === "" ? "" : `<p part="order-description" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.orderDescription} class="${orClasses6.orderDescription}">${escapeHtml7(view.description)}</p>`;
   return `
     ${styleTag(view.inlineStyles)}
-    <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}">
+    <section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}">
       <slot name="${OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS.order}"></slot>
       ${orderDescription}
       ${hideLightning ? "" : `<div part="payment-layout" class="${paymentLayoutClass}">
@@ -1490,10 +1523,10 @@ function renderCheckoutCreateErrorHtml(message, options = {}) {
   const retryButton = `<button part="retry" class="${orClasses6.btn}" type="button">Try again</button>`;
   return `
     ${styleTag(options.inlineStyles)}
-    <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-create-error>
+    <section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-create-error>
       <div part="status" role="alert" class="${orClasses6.creating}">
         <div><strong>Could not start checkout.</strong></div>
-        <p>${escapeHtml6(message)}</p>
+        <p>${escapeHtml7(message)}</p>
         ${retryButton}
       </div>
     </section>
@@ -1503,7 +1536,7 @@ function renderCheckoutCreatingHtml(options = {}) {
   const resolvedTheme = options.theme ?? "light";
   return `
     ${styleTag(options.inlineStyles)}
-    <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-creating>
+    <section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-creating>
       <div part="status" class="${orClasses6.creating}">
         <span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>
         <div><strong>Creating checkout\u2026</strong></div>
@@ -1515,26 +1548,26 @@ function renderThemeToggleHtml(label, options = {}) {
   return `
     ${styleTag(options.inlineStyles)}
     <button
-      aria-label="${escapeHtml6(label)}"
+      aria-label="${escapeHtml7(label)}"
       class="${orClasses6.themeToggle}"
       part="${OPENRECEIVE_THEME_TOGGLE_ELEMENT_PARTS.button}"
-      title="${escapeHtml6(label)}"
+      title="${escapeHtml7(label)}"
       type="button"
       ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.themeToggle}
-    >${escapeHtml6(label)}</button>
+    >${escapeHtml7(label)}</button>
   `;
 }
 var SETTLED_CHECK_ICON = `<svg part="settled-icon" class="${orClasses6.settledIcon}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" focusable="false"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
 function renderElementPaymentStatusHtml(state) {
   const status = createCheckoutStatusModel(state);
-  const countdown = status.countdownLabel === void 0 ? "" : `<small part="countdown" class="${orClasses6.countdown}">${escapeHtml6(status.countdownPrefix)} <strong class="${orClasses6.countdownStrong}">${escapeHtml6(status.countdownLabel)}</strong></small>`;
+  const countdown = status.countdownLabel === void 0 ? "" : `<small part="countdown" class="${orClasses6.countdown}">${escapeHtml7(status.countdownPrefix)} <strong class="${orClasses6.countdownStrong}">${escapeHtml7(status.countdownLabel)}</strong></small>`;
   return `
     <div part="status" role="status" aria-live="polite" class="${orClasses6.paymentStatus}">
       ${status.waiting ? `<span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>` : ""}
       ${status.phase === "settled" ? SETTLED_CHECK_ICON : ""}
       <div class="${orClasses6.paymentStatusBody}">
-        <strong class="${orClasses6.paymentStatusTitle}">${escapeHtml6(status.title)}</strong>
-        <p class="${orClasses6.paymentStatusDetail}">${escapeHtml6(status.detail)}</p>
+        <strong class="${orClasses6.paymentStatusTitle}">${escapeHtml7(status.title)}</strong>
+        <p class="${orClasses6.paymentStatusDetail}">${escapeHtml7(status.detail)}</p>
         ${countdown}
       </div>
     </div>