@openreceive/elements 0.3.3 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-TLX3H2MD.js → chunk-VJBC57J6.js} +179 -146
- package/dist/{define-elements-CV0JlfbJ.d.ts → define-elements-ClzBXJCH.d.ts} +8 -5
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/wrapper-shared.d.ts +1 -1
- package/dist/wrapper-shared.js +1 -1
- package/package.json +2 -2
- package/skills/debug-openreceive-payment/SKILL.md +1 -0
- package/skills/integrate-openreceive/references/node.md +10 -6
- package/skills/integrate-openreceive/references/rails.md +19 -10
|
@@ -399,7 +399,7 @@ import {
|
|
|
399
399
|
createLightningInvoiceDecodeUrl as createLightningInvoiceDecodeUrl2,
|
|
400
400
|
deriveCheckoutStateLabels,
|
|
401
401
|
deriveStatus,
|
|
402
|
-
escapeHtml as
|
|
402
|
+
escapeHtml as escapeHtml7,
|
|
403
403
|
formatAmountCaption,
|
|
404
404
|
OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
|
|
405
405
|
OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS,
|
|
@@ -422,12 +422,12 @@ import {
|
|
|
422
422
|
createWizardRouteAssetDisplays,
|
|
423
423
|
createWizardRouteDisplays,
|
|
424
424
|
currentCheckoutUrl as currentCheckoutUrl2,
|
|
425
|
-
escapeHtml as
|
|
425
|
+
escapeHtml as escapeHtml6,
|
|
426
426
|
formatMethodNetworkDetail,
|
|
427
427
|
formatNetworkSummary,
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
428
|
+
getNetworkIconId,
|
|
429
|
+
getPaymentMethodIconId,
|
|
430
|
+
getSwapOptionIconId,
|
|
431
431
|
getWizardEmptyMessage,
|
|
432
432
|
networkButtonClasses,
|
|
433
433
|
networkCheckClasses,
|
|
@@ -439,26 +439,43 @@ import {
|
|
|
439
439
|
swapAssetMatchesRoute as swapAssetMatchesRoute2
|
|
440
440
|
} from "@openreceive/browser/headless";
|
|
441
441
|
|
|
442
|
+
// src/payment-icon.ts
|
|
443
|
+
import {
|
|
444
|
+
escapeHtml as escapeHtml2,
|
|
445
|
+
paymentIconPaths,
|
|
446
|
+
paymentIconSvgs
|
|
447
|
+
} from "@openreceive/browser/headless";
|
|
448
|
+
function renderPaymentIconHtml(id, options) {
|
|
449
|
+
if (options.resolveAssetUrl !== void 0) {
|
|
450
|
+
const src = escapeHtml2(options.resolveAssetUrl(paymentIconPaths[id]));
|
|
451
|
+
return `<img class="${options.className}" alt="" src="${src}">`;
|
|
452
|
+
}
|
|
453
|
+
return paymentIconSvgs[id].replace(
|
|
454
|
+
/^<svg\b([^>]*)>/,
|
|
455
|
+
(_match, attributes) => `<svg${attributes.replace(/\s(?:class|role|aria-label)="[^"]*"/g, "")} class="${options.className}" role="img" aria-label="${escapeHtml2(options.label)}">`
|
|
456
|
+
);
|
|
457
|
+
}
|
|
458
|
+
|
|
442
459
|
// src/render-provider-tutorial.ts
|
|
443
460
|
import {
|
|
444
461
|
createLightningInvoiceDecodeUrl,
|
|
445
|
-
escapeHtml as
|
|
462
|
+
escapeHtml as escapeHtml3,
|
|
446
463
|
OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2,
|
|
447
464
|
checkoutLabels as checkoutLabels2,
|
|
448
465
|
orClasses as orClasses2
|
|
449
466
|
} from "@openreceive/browser/headless";
|
|
450
467
|
function renderProviderOpenActionHtml(provider) {
|
|
451
468
|
if (provider.tutorials.length === 0) {
|
|
452
|
-
return `<a class="${orClasses2.providerOpen}" href="${
|
|
469
|
+
return `<a class="${orClasses2.providerOpen}" href="${escapeHtml3(provider.url)}" rel="noreferrer" target="_blank">${escapeHtml3(provider.openLabel)}</a>`;
|
|
453
470
|
}
|
|
454
471
|
return `
|
|
455
472
|
<button
|
|
456
473
|
part="provider-open"
|
|
457
474
|
class="${orClasses2.providerOpen}"
|
|
458
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${
|
|
475
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml3(provider.id)}"
|
|
459
476
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="0"
|
|
460
477
|
type="button"
|
|
461
|
-
>${
|
|
478
|
+
>${escapeHtml3(provider.openLabel)}</button>
|
|
462
479
|
`;
|
|
463
480
|
}
|
|
464
481
|
function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex, copied, lightningInvoice, decodeLinkUrl) {
|
|
@@ -472,36 +489,36 @@ function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex,
|
|
|
472
489
|
const nextIndex = Math.min(provider.tutorials.length, stepIndex + 1);
|
|
473
490
|
const isFinalStep = stepIndex === provider.tutorials.length;
|
|
474
491
|
const decodeHref = lightningInvoice === void 0 || lightningInvoice.trim() === "" ? void 0 : createLightningInvoiceDecodeUrl(lightningInvoice, decodeLinkUrl);
|
|
475
|
-
const decodeButton = decodeHref === void 0 ? "" : `<a part="tutorial-decode" class="${orClasses2.tutorialCopy}" href="${
|
|
492
|
+
const decodeButton = decodeHref === void 0 ? "" : `<a part="tutorial-decode" class="${orClasses2.tutorialCopy}" href="${escapeHtml3(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml3(checkoutLabels2.decodeInvoice)}</a>`;
|
|
476
493
|
const body = stepIndex === 0 ? `
|
|
477
494
|
<div part="tutorial-intro" class="${orClasses2.tutorialIntro}">
|
|
478
|
-
<img part="tutorial-provider-logo" alt="" src="${
|
|
479
|
-
<p>${
|
|
480
|
-
<p>${
|
|
481
|
-
<button part="tutorial-copy" class="${orClasses2.tutorialCopy}" type="button">${
|
|
495
|
+
<img part="tutorial-provider-logo" alt="" src="${escapeHtml3(provider.icon)}" class="${orClasses2.tutorialProviderLogo}">
|
|
496
|
+
<p>${escapeHtml3(checkoutLabels2.tutorialIntroPrefix)} ${escapeHtml3(provider.name)}.</p>
|
|
497
|
+
<p>${escapeHtml3(checkoutLabels2.tutorialIntroCopy)}</p>
|
|
498
|
+
<button part="tutorial-copy" class="${orClasses2.tutorialCopy}" type="button">${escapeHtml3(checkoutLabels2.copyInvoice)}</button>
|
|
482
499
|
${decodeButton}
|
|
483
|
-
${copied ? `<p part="tutorial-copy-message" class="${orClasses2.tutorialCopyMessage}">${
|
|
500
|
+
${copied ? `<p part="tutorial-copy-message" class="${orClasses2.tutorialCopyMessage}">${escapeHtml3(checkoutLabels2.tutorialCopiedContinue)}</p>` : ""}
|
|
484
501
|
</div>
|
|
485
502
|
` : `
|
|
486
503
|
<div part="tutorial-frame" class="${orClasses2.tutorialFrame}">
|
|
487
|
-
<img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${
|
|
504
|
+
<img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${escapeHtml3(tutorial?.caption ?? "")}" src="${escapeHtml3(tutorial?.image ?? "")}">
|
|
488
505
|
</div>
|
|
489
|
-
<p part="tutorial-caption" class="${orClasses2.tutorialCaption}">${
|
|
506
|
+
<p part="tutorial-caption" class="${orClasses2.tutorialCaption}">${escapeHtml3(tutorial?.caption ?? "")}</p>
|
|
490
507
|
`;
|
|
491
508
|
return `
|
|
492
|
-
<div part="tutorial" class="${orClasses2.tutorialModal}" role="dialog" aria-modal="true" aria-label="${
|
|
509
|
+
<div part="tutorial" class="${orClasses2.tutorialModal}" role="dialog" aria-modal="true" aria-label="${escapeHtml3(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml3(provider.name)}" tabindex="-1">
|
|
493
510
|
<div part="tutorial-dialog" class="${orClasses2.tutorialBox}">
|
|
494
511
|
<div part="tutorial-header" class="${orClasses2.tutorialHeader}">
|
|
495
512
|
<div part="tutorial-title" class="${orClasses2.tutorialTitle}">
|
|
496
|
-
<img part="tutorial-header-logo" alt="" src="${
|
|
497
|
-
<h3>${
|
|
513
|
+
<img part="tutorial-header-logo" alt="" src="${escapeHtml3(provider.icon)}" class="${orClasses2.tutorialHeaderLogo}">
|
|
514
|
+
<h3>${escapeHtml3(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml3(provider.name)}</h3>
|
|
498
515
|
</div>
|
|
499
516
|
<button
|
|
500
517
|
part="tutorial-close"
|
|
501
518
|
class="${orClasses2.tutorialClose}"
|
|
502
519
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}=""
|
|
503
520
|
type="button"
|
|
504
|
-
aria-label="${
|
|
521
|
+
aria-label="${escapeHtml3(checkoutLabels2.tutorialClose)}"
|
|
505
522
|
>X</button>
|
|
506
523
|
</div>
|
|
507
524
|
${body}
|
|
@@ -518,18 +535,18 @@ function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex,
|
|
|
518
535
|
<button
|
|
519
536
|
part="tutorial-nav"
|
|
520
537
|
class="${orClasses2.btn}"
|
|
521
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${
|
|
538
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml3(provider.id)}"
|
|
522
539
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="${previousIndex}"
|
|
523
540
|
type="button"
|
|
524
541
|
${stepIndex === 0 ? "disabled" : ""}
|
|
525
|
-
>${
|
|
542
|
+
>${escapeHtml3(checkoutLabels2.tutorialBack)}</button>
|
|
526
543
|
<button
|
|
527
544
|
part="tutorial-nav"
|
|
528
545
|
class="${orClasses2.btn}"
|
|
529
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${isFinalStep ? "" :
|
|
546
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${isFinalStep ? "" : escapeHtml3(provider.id)}"
|
|
530
547
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="${nextIndex}"
|
|
531
548
|
type="button"
|
|
532
|
-
>${
|
|
549
|
+
>${escapeHtml3(isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext)}</button>
|
|
533
550
|
</div>
|
|
534
551
|
</div>
|
|
535
552
|
</div>
|
|
@@ -541,7 +558,7 @@ import {
|
|
|
541
558
|
checkoutLabels as checkoutLabels4,
|
|
542
559
|
createSwapDisplayModel,
|
|
543
560
|
currentCheckoutUrl,
|
|
544
|
-
escapeHtml as
|
|
561
|
+
escapeHtml as escapeHtml5,
|
|
545
562
|
OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4,
|
|
546
563
|
orClasses as orClasses4,
|
|
547
564
|
swapAssetMatchesRoute,
|
|
@@ -550,7 +567,7 @@ import {
|
|
|
550
567
|
|
|
551
568
|
// src/transaction-details.ts
|
|
552
569
|
import {
|
|
553
|
-
escapeHtml as
|
|
570
|
+
escapeHtml as escapeHtml4,
|
|
554
571
|
OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES3,
|
|
555
572
|
OPENRECEIVE_PAYMENT_WIZARD_SELECTORS as OPENRECEIVE_PAYMENT_WIZARD_SELECTORS2,
|
|
556
573
|
checkoutLabels as checkoutLabels3,
|
|
@@ -563,8 +580,8 @@ function renderTransactionDetailsHtml(source, options = {}) {
|
|
|
563
580
|
const openAttr = options.open === true ? " open" : "";
|
|
564
581
|
const className = options.className ?? orClasses3.transactionDetails;
|
|
565
582
|
return `
|
|
566
|
-
<details part="transaction-details" class="${
|
|
567
|
-
<summary class="${orClasses3.transactionDetailsTitle}">${
|
|
583
|
+
<details part="transaction-details" class="${escapeHtml4(className)}"${openAttr}>
|
|
584
|
+
<summary class="${orClasses3.transactionDetailsTitle}">${escapeHtml4(checkoutLabels3.transactionDetails)}</summary>
|
|
568
585
|
<div class="${orClasses3.transactionDetailsContent}">
|
|
569
586
|
<dl part="swap-details" class="${orClasses3.swapDetails}">
|
|
570
587
|
${rows.map(
|
|
@@ -611,17 +628,17 @@ function renderElementSwapActionsHtml(routeKey, options, view) {
|
|
|
611
628
|
${shown.map((option) => {
|
|
612
629
|
const disabled = option.available === false;
|
|
613
630
|
const limitMessage = elementsSwapLimitMessage(option, view);
|
|
614
|
-
const info = disabled ? limitMessage === void 0 ? "" : `<p part="swap-warning" class="${orClasses4.swapWarning}">${
|
|
631
|
+
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>`;
|
|
615
632
|
return `
|
|
616
633
|
<div class="${orClasses4.swapAction}">
|
|
617
634
|
${info}
|
|
618
635
|
<button
|
|
619
636
|
part="swap-start"
|
|
620
637
|
class="${orClasses4.swapStart}"
|
|
621
|
-
${disabled ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapStart}="${
|
|
638
|
+
${disabled ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapStart}="${escapeHtml5(option.pay_in_asset)}"`}
|
|
622
639
|
${disabled ? 'disabled aria-disabled="true"' : ""}
|
|
623
640
|
type="button"
|
|
624
|
-
>${
|
|
641
|
+
>${escapeHtml5(
|
|
625
642
|
checkoutLabels4.createPaymentAddress.replace("{asset}", option.label).replace("{network}", option.network_label)
|
|
626
643
|
)}</button>
|
|
627
644
|
</div>
|
|
@@ -646,21 +663,21 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
646
663
|
});
|
|
647
664
|
if (display === void 0) return "";
|
|
648
665
|
const backButton = `
|
|
649
|
-
<button part="swap-back" class="${orClasses4.swapBack}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapBack} type="button">${
|
|
666
|
+
<button part="swap-back" class="${orClasses4.swapBack}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapBack} type="button">${escapeHtml5(checkoutLabels4.payWithLightningInstead)}</button>
|
|
650
667
|
`;
|
|
651
668
|
const supportDetails = renderElementSwapSupportDetailsHtml(display);
|
|
652
669
|
const heading = `
|
|
653
670
|
<div part="swap-heading" class="${orClasses4.swapHeading}">
|
|
654
|
-
<strong class="${orClasses4.swapHeadingTitle}">${
|
|
655
|
-
<span class="${orClasses4.swapHeadingDetail}">${
|
|
671
|
+
<strong class="${orClasses4.swapHeadingTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
|
|
672
|
+
<span class="${orClasses4.swapHeadingDetail}">${escapeHtml5(display.providerStateDetail)}</span>
|
|
656
673
|
</div>
|
|
657
674
|
`;
|
|
658
675
|
const refundHeading = `
|
|
659
676
|
<div part="swap-heading" class="${orClasses4.swapRefundHeading}" role="alert">
|
|
660
677
|
${renderElementAlertIconHtml("warning")}
|
|
661
678
|
<div class="${orClasses4.swapNetworkWarningContent}">
|
|
662
|
-
<strong class="${orClasses4.swapHeadingTitle}">${
|
|
663
|
-
<span class="${orClasses4.swapHeadingDetail}">${
|
|
679
|
+
<strong class="${orClasses4.swapHeadingTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
|
|
680
|
+
<span class="${orClasses4.swapHeadingDetail}">${escapeHtml5(display.providerStateDetail)}</span>
|
|
664
681
|
</div>
|
|
665
682
|
</div>
|
|
666
683
|
`;
|
|
@@ -670,8 +687,8 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
670
687
|
<div part="status" class="${orClasses4.paymentStatus}">
|
|
671
688
|
<span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
|
|
672
689
|
<div class="${orClasses4.paymentStatusBody}">
|
|
673
|
-
<strong class="${orClasses4.paymentStatusTitle}">${
|
|
674
|
-
<p class="${orClasses4.paymentStatusDetail}">${
|
|
690
|
+
<strong class="${orClasses4.paymentStatusTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
|
|
691
|
+
<p class="${orClasses4.paymentStatusDetail}">${escapeHtml5(display.providerStateDetail)}</p>
|
|
675
692
|
</div>
|
|
676
693
|
</div>
|
|
677
694
|
${backButton}
|
|
@@ -685,19 +702,19 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
685
702
|
<span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
|
|
686
703
|
<div class="${orClasses4.paymentStatusBody}">
|
|
687
704
|
<div class="${orClasses4.swapWaitingTitle}">
|
|
688
|
-
<strong class="${orClasses4.paymentStatusTitle}">${
|
|
689
|
-
<strong part="swap-countdown" class="${orClasses4.swapCountdown}">${
|
|
705
|
+
<strong class="${orClasses4.paymentStatusTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
|
|
706
|
+
<strong part="swap-countdown" class="${orClasses4.swapCountdown}">${escapeHtml5(display.countdownLabel)}</strong>
|
|
690
707
|
</div>
|
|
691
|
-
<p class="${orClasses4.paymentStatusDetail}">${
|
|
708
|
+
<p class="${orClasses4.paymentStatusDetail}">${escapeHtml5(display.providerStateDetail)}</p>
|
|
692
709
|
</div>
|
|
693
710
|
</div>
|
|
694
711
|
`;
|
|
695
712
|
return `
|
|
696
713
|
<section part="swap-panel" class="${orClasses4.swapPanel}">
|
|
697
|
-
<p part="swap-instruction" class="${orClasses4.swapInstruction}">Pay <strong>${
|
|
714
|
+
<p part="swap-instruction" class="${orClasses4.swapInstruction}">Pay <strong>${escapeHtml5(display.depositAmount)} ${escapeHtml5(display.assetLabel)}</strong> to this address</p>
|
|
698
715
|
${renderElementSwapNetworkWarningHtml(display)}
|
|
699
716
|
<div part="swap-deposit-layout" class="${orClasses4.swapDepositLayout}">
|
|
700
|
-
<div part="swap-qr" class="${orClasses4.swapQrFrame}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapQr}="${
|
|
717
|
+
<div part="swap-qr" class="${orClasses4.swapQrFrame}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapQr}="${escapeHtml5(display.qrPayload)}"></div>
|
|
701
718
|
<div part="swap-deposit-side" class="${orClasses4.swapDepositSide}">
|
|
702
719
|
<dl part="swap-details" class="${orClasses4.swapDetails}">
|
|
703
720
|
${display.copyRows.map(
|
|
@@ -734,8 +751,8 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
734
751
|
<div part="status" class="${orClasses4.paymentStatus}">
|
|
735
752
|
<span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
|
|
736
753
|
<div class="${orClasses4.paymentStatusBody}">
|
|
737
|
-
<strong class="${orClasses4.paymentStatusTitle}">${
|
|
738
|
-
<p class="${orClasses4.paymentStatusDetail}">${
|
|
754
|
+
<strong class="${orClasses4.paymentStatusTitle}">${escapeHtml5(display.providerStateLabel)}</strong>
|
|
755
|
+
<p class="${orClasses4.paymentStatusDetail}">${escapeHtml5(display.providerStateDetail)}</p>
|
|
739
756
|
</div>
|
|
740
757
|
</div>
|
|
741
758
|
${supportDetails}
|
|
@@ -756,14 +773,14 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
756
773
|
const stagedRefundAddress = display.refundAddress;
|
|
757
774
|
const refundFacts = renderElementSwapAmountFactsHtml(display);
|
|
758
775
|
const refundFormIntro = `
|
|
759
|
-
<p class="${orClasses4.swapSectionTitle}">${
|
|
760
|
-
${display.refundReason === void 0 ? "" : `<p class="${orClasses4.swapRefundReason}">${
|
|
776
|
+
<p class="${orClasses4.swapSectionTitle}">${escapeHtml5(checkoutLabels4.refundSectionTitle)}</p>
|
|
777
|
+
${display.refundReason === void 0 ? "" : `<p class="${orClasses4.swapRefundReason}">${escapeHtml5(
|
|
761
778
|
checkoutLabels4.refundReasonLabel.replace(
|
|
762
779
|
"{reason}",
|
|
763
780
|
display.refundReason.replace(/_/g, " ")
|
|
764
781
|
)
|
|
765
782
|
)}</p>`}
|
|
766
|
-
<p class="${orClasses4.swapRefundInstruction}">${
|
|
783
|
+
<p class="${orClasses4.swapRefundInstruction}">${escapeHtml5(
|
|
767
784
|
checkoutLabels4.refundAddressOwnership.replace("{network}", display.networkLabel)
|
|
768
785
|
)}</p>
|
|
769
786
|
`;
|
|
@@ -777,9 +794,9 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
777
794
|
part="swap-refund"
|
|
778
795
|
class="${orClasses4.swapRefund}"
|
|
779
796
|
novalidate
|
|
780
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${
|
|
781
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${
|
|
782
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${
|
|
797
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml5(display.attemptId)}"
|
|
798
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml5(display.payInAsset)}"
|
|
799
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml5(display.networkLabel)}"
|
|
783
800
|
${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
|
|
784
801
|
>
|
|
785
802
|
${refundFormIntro}
|
|
@@ -787,7 +804,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
787
804
|
class="${orClasses4.swapRefundInput}"
|
|
788
805
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
|
|
789
806
|
name="refund_address"
|
|
790
|
-
placeholder="${
|
|
807
|
+
placeholder="${escapeHtml5(checkoutLabels4.refundAddressPlaceholder.replace("{network}", display.networkLabel))}"
|
|
791
808
|
type="text"
|
|
792
809
|
autocomplete="off"
|
|
793
810
|
required
|
|
@@ -799,28 +816,28 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
799
816
|
hidden
|
|
800
817
|
role="alert"
|
|
801
818
|
></p>
|
|
802
|
-
<p part="swap-refund-hint" class="${orClasses4.swapRefundHint}">Make sure you control this ${
|
|
803
|
-
<button class="${orClasses4.btn}" type="submit">${
|
|
819
|
+
<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>
|
|
820
|
+
<button class="${orClasses4.btn}" type="submit">${escapeHtml5(checkoutLabels4.reviewRefundAddress)}</button>
|
|
804
821
|
</form>
|
|
805
822
|
` : `
|
|
806
823
|
<form
|
|
807
824
|
part="swap-refund"
|
|
808
825
|
class="${orClasses4.swapRefund}"
|
|
809
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${
|
|
810
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${
|
|
811
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${
|
|
826
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml5(display.attemptId)}"
|
|
827
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml5(display.payInAsset)}"
|
|
828
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml5(display.networkLabel)}"
|
|
812
829
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundConfirm}="true"
|
|
813
830
|
${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
|
|
814
831
|
>
|
|
815
832
|
${refundFormIntro}
|
|
816
|
-
<p class="${orClasses4.swapRefundInstruction}">${
|
|
833
|
+
<p class="${orClasses4.swapRefundInstruction}">${escapeHtml5(checkoutLabels4.confirmRefundTo.replace("{address}", stagedRefundAddress))}</p>
|
|
817
834
|
<input
|
|
818
835
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
|
|
819
836
|
name="refund_address"
|
|
820
837
|
type="hidden"
|
|
821
|
-
value="${
|
|
838
|
+
value="${escapeHtml5(stagedRefundAddress)}"
|
|
822
839
|
>
|
|
823
|
-
<button class="${orClasses4.btn}" type="submit">${
|
|
840
|
+
<button class="${orClasses4.btn}" type="submit">${escapeHtml5(checkoutLabels4.confirmRefund)}</button>
|
|
824
841
|
</form>
|
|
825
842
|
`}
|
|
826
843
|
${supportDetails}
|
|
@@ -845,7 +862,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
|
|
|
845
862
|
return `
|
|
846
863
|
<section part="swap-panel" class="${orClasses4.swapPanel}">
|
|
847
864
|
${heading}
|
|
848
|
-
<p part="swap-warning" class="${orClasses4.swapWarning}">${
|
|
865
|
+
<p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml5(checkoutLabels4.supportReviewFacts)}</p>
|
|
849
866
|
${renderElementSwapAmountFactsHtml(display)}
|
|
850
867
|
${renderElementSwapSupportDetailsHtml(display, { open: true })}
|
|
851
868
|
${backButton}
|
|
@@ -858,8 +875,8 @@ function renderElementSwapRefundReturnWarningHtml(display) {
|
|
|
858
875
|
<div part="swap-refund-return" class="${orClasses4.swapRefundReturn}">
|
|
859
876
|
${renderElementAlertIconHtml("bookmark")}
|
|
860
877
|
<div class="${orClasses4.swapNetworkWarningContent}">
|
|
861
|
-
<p class="${orClasses4.swapRefundReturnTitle}">${
|
|
862
|
-
<p class="${orClasses4.swapRefundReturnBody}">${
|
|
878
|
+
<p class="${orClasses4.swapRefundReturnTitle}">${escapeHtml5(checkoutLabels4.refundReturnTitle)}</p>
|
|
879
|
+
<p class="${orClasses4.swapRefundReturnBody}">${escapeHtml5(display.refundReturnLabel)}</p>
|
|
863
880
|
${url === void 0 ? "" : `<dl part="swap-details" class="${orClasses4.swapDetails}">${renderElementSwapCopyDetailHtml(
|
|
864
881
|
checkoutLabels4.refundReturnUrlLabel,
|
|
865
882
|
url,
|
|
@@ -881,8 +898,8 @@ function renderElementSwapAmountFactsHtml(display) {
|
|
|
881
898
|
const rows = facts.map(
|
|
882
899
|
([label, value]) => `
|
|
883
900
|
<div class="${orClasses4.swapFactsRow}">
|
|
884
|
-
<dt class="${orClasses4.swapFactsLabel}">${
|
|
885
|
-
<dd class="${orClasses4.swapFactsValue}">${
|
|
901
|
+
<dt class="${orClasses4.swapFactsLabel}">${escapeHtml5(label)}</dt>
|
|
902
|
+
<dd class="${orClasses4.swapFactsValue}">${escapeHtml5(value)}</dd>
|
|
886
903
|
</div>`
|
|
887
904
|
).join("");
|
|
888
905
|
return `<dl part="swap-facts" class="${orClasses4.swapFacts}">${rows}</dl>`;
|
|
@@ -896,19 +913,19 @@ function renderElementAlertIconHtml(kind) {
|
|
|
896
913
|
function renderElementSwapNetworkWarningHtml(display) {
|
|
897
914
|
const alarm = display.depositRisk !== "pinned";
|
|
898
915
|
const emphasisStart = display.networkWarning.indexOf(display.networkWarningEmphasis);
|
|
899
|
-
const before = emphasisStart === -1 ?
|
|
900
|
-
const after = emphasisStart === -1 ? "" :
|
|
916
|
+
const before = emphasisStart === -1 ? escapeHtml5(display.networkWarning) : escapeHtml5(display.networkWarning.slice(0, emphasisStart));
|
|
917
|
+
const after = emphasisStart === -1 ? "" : escapeHtml5(
|
|
901
918
|
display.networkWarning.slice(emphasisStart + display.networkWarningEmphasis.length)
|
|
902
919
|
);
|
|
903
|
-
const emphasis = emphasisStart === -1 ? "" : `<strong class="${orClasses4.swapNetworkWarningEmphasis}">${
|
|
920
|
+
const emphasis = emphasisStart === -1 ? "" : `<strong class="${orClasses4.swapNetworkWarningEmphasis}">${escapeHtml5(display.networkWarningEmphasis)}</strong>`;
|
|
904
921
|
const icon = alarm ? `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="${orClasses4.swapNetworkWarningIcon}" aria-hidden="true">
|
|
905
922
|
<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" />
|
|
906
923
|
</svg>` : "";
|
|
907
924
|
return `
|
|
908
|
-
<div part="swap-network-warning"${alarm ? ' role="alert"' : ""} data-or-deposit-risk="${
|
|
925
|
+
<div part="swap-network-warning"${alarm ? ' role="alert"' : ""} data-or-deposit-risk="${escapeHtml5(display.depositRisk)}" class="${alarm ? orClasses4.swapNetworkWarning : orClasses4.swapNetworkNotice}">
|
|
909
926
|
${icon}
|
|
910
927
|
<div class="${orClasses4.swapNetworkWarningContent}">
|
|
911
|
-
<p class="${orClasses4.swapNetworkWarningTitle}">${
|
|
928
|
+
<p class="${orClasses4.swapNetworkWarningTitle}">${escapeHtml5(display.networkWarningTitle)}</p>
|
|
912
929
|
<p class="${orClasses4.swapNetworkWarningBody}">${before}${emphasis}${after}</p>
|
|
913
930
|
</div>
|
|
914
931
|
</div>
|
|
@@ -937,14 +954,14 @@ function renderElementSwapFeeBreakdownHtml(breakdown) {
|
|
|
937
954
|
const feeValue = breakdown.feePercent === void 0 ? breakdown.fee : `${breakdown.fee} (${breakdown.feePercent})`;
|
|
938
955
|
return `
|
|
939
956
|
<div part="swap-breakdown" class="${orClasses4.swapBreakdown}">
|
|
940
|
-
<p part="swap-breakdown-title" class="${orClasses4.swapBreakdownTitle}">${
|
|
957
|
+
<p part="swap-breakdown-title" class="${orClasses4.swapBreakdownTitle}">${escapeHtml5(checkoutLabels4.paymentBreakdown)}</p>
|
|
941
958
|
<dl part="swap-details" class="${orClasses4.swapBreakdownRows}">
|
|
942
|
-
<dt>${
|
|
943
|
-
<dd>${
|
|
944
|
-
<dt>${
|
|
945
|
-
<dd>${
|
|
946
|
-
<dt>${
|
|
947
|
-
<dd>${
|
|
959
|
+
<dt>${escapeHtml5(checkoutLabels4.cartTotal)}</dt>
|
|
960
|
+
<dd>${escapeHtml5(breakdown.cartTotal)}</dd>
|
|
961
|
+
<dt>${escapeHtml5(checkoutLabels4.youSend)}</dt>
|
|
962
|
+
<dd>${escapeHtml5(breakdown.youSend)}</dd>
|
|
963
|
+
<dt>${escapeHtml5(checkoutLabels4.swapAndNetworkFees)}</dt>
|
|
964
|
+
<dd>${escapeHtml5(feeValue)}</dd>
|
|
948
965
|
</dl>
|
|
949
966
|
</div>
|
|
950
967
|
`;
|
|
@@ -977,11 +994,11 @@ function renderElementSwapUnavailableHtml(quote, checkout) {
|
|
|
977
994
|
const model = createSwapUnavailableModel(quote, checkout);
|
|
978
995
|
return `<section part="swap-panel" class="${orClasses5.swapPanel}">
|
|
979
996
|
<div part="swap-heading" class="${orClasses5.swapHeading}">
|
|
980
|
-
<strong class="${orClasses5.swapHeadingTitle}">${
|
|
997
|
+
<strong class="${orClasses5.swapHeadingTitle}">${escapeHtml6(model.title)}</strong>
|
|
981
998
|
</div>
|
|
982
|
-
<p part="swap-warning" class="${orClasses5.swapWarning}">${
|
|
983
|
-
${model.range === void 0 ? "" : `<p class="${orClasses5.swapWarning}">${
|
|
984
|
-
<p class="${orClasses5.swapProgress}">${
|
|
999
|
+
<p part="swap-warning" class="${orClasses5.swapWarning}">${escapeHtml6(model.detail)}</p>
|
|
1000
|
+
${model.range === void 0 ? "" : `<p class="${orClasses5.swapWarning}">${escapeHtml6(model.range)}</p>`}
|
|
1001
|
+
<p class="${orClasses5.swapProgress}">${escapeHtml6(model.hint)}</p>
|
|
985
1002
|
</section>`;
|
|
986
1003
|
}
|
|
987
1004
|
function renderPaymentWizardHtml(view = {}) {
|
|
@@ -1025,22 +1042,22 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1025
1042
|
class="${orClasses5.btnGhost}"
|
|
1026
1043
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="swap-asset"
|
|
1027
1044
|
type="button"
|
|
1028
|
-
>${
|
|
1045
|
+
>${escapeHtml6(checkoutLabels5.switchPaymentMethod)}</button>
|
|
1029
1046
|
<span aria-hidden="true">/</span>
|
|
1030
|
-
<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${
|
|
1047
|
+
<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml6(label)}</span>
|
|
1031
1048
|
</div>`}
|
|
1032
1049
|
<div part="wizard-results" class="${orClasses5.wizardResults}">
|
|
1033
1050
|
${activeSwap !== void 0 ? renderElementSwapPanelHtml(activeSwap, view) : view.swapStartError !== void 0 ? `<section part="swap-panel" class="${orClasses5.swapPanel}">
|
|
1034
1051
|
<div part="swap-error" role="alert" class="${orClasses5.paymentStatus}">
|
|
1035
1052
|
<div class="${orClasses5.paymentStatusBody}">
|
|
1036
|
-
<strong class="${orClasses5.paymentStatusTitle}">${
|
|
1037
|
-
<p class="${orClasses5.paymentStatusDetail}">${
|
|
1053
|
+
<strong class="${orClasses5.paymentStatusTitle}">${escapeHtml6(checkoutLabels5.swapStartFailedTitle)}</strong>
|
|
1054
|
+
<p class="${orClasses5.paymentStatusDetail}">${escapeHtml6(view.swapStartError)}</p>
|
|
1038
1055
|
<button
|
|
1039
1056
|
part="swap-retry"
|
|
1040
1057
|
class="${orClasses5.btn}"
|
|
1041
1058
|
type="button"
|
|
1042
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${
|
|
1043
|
-
>${
|
|
1059
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml6(selectedSwapAsset)}"
|
|
1060
|
+
>${escapeHtml6(checkoutLabels5.tryAgain)}</button>
|
|
1044
1061
|
</div>
|
|
1045
1062
|
</div>
|
|
1046
1063
|
</section>` : view.unavailableSwapQuote !== void 0 ? renderElementSwapUnavailableHtml(
|
|
@@ -1050,8 +1067,8 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1050
1067
|
<div part="status" class="${orClasses5.paymentStatus}">
|
|
1051
1068
|
<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>
|
|
1052
1069
|
<div class="${orClasses5.paymentStatusBody}">
|
|
1053
|
-
<strong class="${orClasses5.paymentStatusTitle}">${
|
|
1054
|
-
<p class="${orClasses5.paymentStatusDetail}">${
|
|
1070
|
+
<strong class="${orClasses5.paymentStatusTitle}">${escapeHtml6(checkoutLabels5.preparingPaymentAddress)}</strong>
|
|
1071
|
+
<p class="${orClasses5.paymentStatusDetail}">${escapeHtml6(
|
|
1055
1072
|
checkoutLabels5.preparingPaymentAddressDetail.replace(
|
|
1056
1073
|
"{asset}",
|
|
1057
1074
|
selectedSwapOption?.label ?? "coin"
|
|
@@ -1069,7 +1086,7 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1069
1086
|
const methodPicker = selection.selectedMethod === null ? renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) : "";
|
|
1070
1087
|
return `
|
|
1071
1088
|
<section part="wizard" class="${orClasses5.wizard}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.root}>
|
|
1072
|
-
${view.wizardError === void 0 ? "" : `<p part="wizard-error" role="alert" class="${orClasses5.paymentStatusDetail}">${
|
|
1089
|
+
${view.wizardError === void 0 ? "" : `<p part="wizard-error" role="alert" class="${orClasses5.paymentStatusDetail}">${escapeHtml6(view.wizardError)}</p>`}
|
|
1073
1090
|
${methodPicker}
|
|
1074
1091
|
${selection.selectedMethod === null && keepOrderNote.length > 0 ? `<div class="${orClasses5.wizardBody}">${keepOrderNote}</div>` : ""}
|
|
1075
1092
|
${selection.selectedMethod === null ? "" : `
|
|
@@ -1082,12 +1099,16 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1082
1099
|
<button
|
|
1083
1100
|
part="route${asset.selected ? " selected" : ""}"
|
|
1084
1101
|
class="${asset.selected ? orClasses5.routeButtonSelected : orClasses5.routeButton}"
|
|
1085
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.route}="${
|
|
1102
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.route}="${escapeHtml6(asset.id)}"
|
|
1086
1103
|
type="button"
|
|
1087
1104
|
>
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1105
|
+
${renderPaymentIconHtml(asset.iconId, {
|
|
1106
|
+
className: orClasses5.methodIcon,
|
|
1107
|
+
label: asset.label,
|
|
1108
|
+
resolveAssetUrl: view.resolveAssetUrl
|
|
1109
|
+
})}
|
|
1110
|
+
<strong class="${orClasses5.methodTitle}">${escapeHtml6(asset.label)}</strong>
|
|
1111
|
+
<small class="${orClasses5.methodDetail}">${escapeHtml6(asset.subtitle)}</small>
|
|
1091
1112
|
</button>
|
|
1092
1113
|
`
|
|
1093
1114
|
).join("")}
|
|
@@ -1096,7 +1117,7 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1096
1117
|
${`
|
|
1097
1118
|
<div part="wizard-results" class="${orClasses5.wizardResults}">
|
|
1098
1119
|
${routeDisplays.length === 0 ? `
|
|
1099
|
-
<p part="wizard-empty" class="${orClasses5.wizardEmpty}">${
|
|
1120
|
+
<p part="wizard-empty" class="${orClasses5.wizardEmpty}">${escapeHtml6(
|
|
1100
1121
|
getWizardEmptyMessage()
|
|
1101
1122
|
)}</p>
|
|
1102
1123
|
` : routeDisplays.map((route) => {
|
|
@@ -1104,7 +1125,7 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1104
1125
|
return `
|
|
1105
1126
|
<section part="wizard-route" class="${orClasses5.wizardRoute}">
|
|
1106
1127
|
<h3 class="${orClasses5.wizardRouteHeading}">
|
|
1107
|
-
${
|
|
1128
|
+
${escapeHtml6(route.title)}
|
|
1108
1129
|
</h3>
|
|
1109
1130
|
${activeSwap === void 0 ? renderElementSwapActionsHtml(route.key, view.swapOptions ?? [], view) : renderElementSwapPanelHtml(activeSwap, view)}
|
|
1110
1131
|
${activeSwap === void 0 ? `<div part="provider-grid" class="${orClasses5.providerGrid}">
|
|
@@ -1112,10 +1133,10 @@ function renderPaymentWizardHtml(view = {}) {
|
|
|
1112
1133
|
(provider) => `
|
|
1113
1134
|
<article part="provider" class="${orClasses5.providerCard}">
|
|
1114
1135
|
<div part="provider-heading" class="${orClasses5.providerHeading}">
|
|
1115
|
-
<img class="${orClasses5.providerIcon}" alt="" src="${
|
|
1116
|
-
<h4 class="${orClasses5.providerName}">${
|
|
1136
|
+
<img class="${orClasses5.providerIcon}" alt="" src="${escapeHtml6(provider.icon)}">
|
|
1137
|
+
<h4 class="${orClasses5.providerName}">${escapeHtml6(provider.name)}</h4>
|
|
1117
1138
|
</div>
|
|
1118
|
-
<p part="provider-kind" class="${orClasses5.providerKind}">${
|
|
1139
|
+
<p part="provider-kind" class="${orClasses5.providerKind}">${escapeHtml6(provider.kind)}</p>
|
|
1119
1140
|
<div part="provider-actions" class="${orClasses5.providerActions}">
|
|
1120
1141
|
${renderProviderOpenActionHtml(provider)}
|
|
1121
1142
|
</div>
|
|
@@ -1149,8 +1170,8 @@ function renderElementKeepOrderNoteHtml(view) {
|
|
|
1149
1170
|
if (reference.length === 0 && url === void 0) return "";
|
|
1150
1171
|
return `
|
|
1151
1172
|
<div part="keep-order" class="${orClasses5.keepOrder}">
|
|
1152
|
-
<p class="${orClasses5.swapSectionTitle}">${
|
|
1153
|
-
<p class="${orClasses5.keepOrderBody}">${
|
|
1173
|
+
<p class="${orClasses5.swapSectionTitle}">${escapeHtml6(checkoutLabels5.keepOrderTitle)}</p>
|
|
1174
|
+
<p class="${orClasses5.keepOrderBody}">${escapeHtml6(checkoutLabels5.keepOrderBody)}</p>
|
|
1154
1175
|
<dl part="swap-details" class="${orClasses5.swapDetails}">
|
|
1155
1176
|
${reference.length === 0 ? "" : renderElementSwapCopyDetailHtml(checkoutLabels5.keepOrderIdLabel, reference, {
|
|
1156
1177
|
selectable: true
|
|
@@ -1178,7 +1199,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
|
|
|
1178
1199
|
disabled: continueTarget === void 0 || continueTarget.disabled,
|
|
1179
1200
|
starting: continueTarget?.starting === true,
|
|
1180
1201
|
swapStartAsset: continueTarget === void 0 || continueTarget.disabled ? void 0 : continueTarget.payInAsset,
|
|
1181
|
-
label:
|
|
1202
|
+
label: escapeHtml6(continueTarget?.label ?? checkoutLabels5.continue)
|
|
1182
1203
|
});
|
|
1183
1204
|
const tiles = display.entries.map((entry) => {
|
|
1184
1205
|
if (entry.kind === "method") {
|
|
@@ -1188,15 +1209,19 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
|
|
|
1188
1209
|
part="method"
|
|
1189
1210
|
type="button"
|
|
1190
1211
|
class="${assetButtonClasses({ accent: entry.accent, selected: false, disabled: entry.disabled })}"
|
|
1191
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.method}="${
|
|
1212
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.method}="${escapeHtml6(method.id)}"
|
|
1192
1213
|
${entry.disabled ? 'disabled aria-disabled="true"' : ""}
|
|
1193
1214
|
>
|
|
1194
1215
|
<span aria-hidden="true" class="${orClasses5.methodIconWrap}">
|
|
1195
|
-
|
|
1216
|
+
${renderPaymentIconHtml(getPaymentMethodIconId(method.id), {
|
|
1217
|
+
className: orClasses5.methodIcon,
|
|
1218
|
+
label: method.title,
|
|
1219
|
+
resolveAssetUrl: view.resolveAssetUrl
|
|
1220
|
+
})}
|
|
1196
1221
|
</span>
|
|
1197
1222
|
<span class="${orClasses5.methodTitleWrap}">
|
|
1198
|
-
<span class="${orClasses5.methodTitle}">${
|
|
1199
|
-
<span class="${orClasses5.methodTileDetail}">${
|
|
1223
|
+
<span class="${orClasses5.methodTitle}">${escapeHtml6(method.title)}</span>
|
|
1224
|
+
<span class="${orClasses5.methodTileDetail}">${escapeHtml6(method.detail)}</span>
|
|
1200
1225
|
</span>
|
|
1201
1226
|
</button>`;
|
|
1202
1227
|
}
|
|
@@ -1209,7 +1234,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
|
|
|
1209
1234
|
}).join("");
|
|
1210
1235
|
const loadingTile = currenciesLoading ? `<div part="currencies-loading" role="status" aria-live="polite" class="${orClasses5.methodCurrenciesLoading}">
|
|
1211
1236
|
<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>
|
|
1212
|
-
<span class="${orClasses5.methodTitle}">${
|
|
1237
|
+
<span class="${orClasses5.methodTitle}">${escapeHtml6(checkoutLabels5.loadingCurrencies)}</span>
|
|
1213
1238
|
</div>` : "";
|
|
1214
1239
|
const desktopReveal = networkRequired && selectedGroup !== void 0 ? `<div class="${orClasses5.methodNetworkRevealDesktop}">${renderElementNetworkSelectorHtml(
|
|
1215
1240
|
selectedGroup,
|
|
@@ -1219,11 +1244,11 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
|
|
|
1219
1244
|
)}</div>` : "";
|
|
1220
1245
|
return `
|
|
1221
1246
|
<header class="${orClasses5.wizardHeader}">
|
|
1222
|
-
<h2 id="payment-method-heading" class="${orClasses5.wizardHeaderTitle}">${
|
|
1223
|
-
<p class="${orClasses5.wizardHeaderSubtitle}">${
|
|
1247
|
+
<h2 id="payment-method-heading" class="${orClasses5.wizardHeaderTitle}">${escapeHtml6(checkoutLabels5.wizardTitle)}</h2>
|
|
1248
|
+
<p class="${orClasses5.wizardHeaderSubtitle}">${escapeHtml6(checkoutLabels5.wizardSubtitle)}</p>
|
|
1224
1249
|
</header>
|
|
1225
1250
|
<div class="${orClasses5.wizardBody}" aria-labelledby="payment-method-heading">
|
|
1226
|
-
<div part="method-grid" role="group" aria-label="${
|
|
1251
|
+
<div part="method-grid" role="group" aria-label="${escapeHtml6(checkoutLabels5.paymentMethod)}" class="${orClasses5.methodGrid}">
|
|
1227
1252
|
${tiles}${loadingTile}
|
|
1228
1253
|
</div>
|
|
1229
1254
|
${desktopReveal}
|
|
@@ -1247,21 +1272,25 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
|
|
|
1247
1272
|
disabled: optionDisabled
|
|
1248
1273
|
})}"
|
|
1249
1274
|
${optionDisabled ? 'disabled aria-disabled="true"' : ""}
|
|
1250
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetwork}="${
|
|
1251
|
-
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetworkValue}="${
|
|
1275
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetwork}="${escapeHtml6(groupKey)}"
|
|
1276
|
+
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetworkValue}="${escapeHtml6(option.pay_in_asset)}"
|
|
1252
1277
|
>
|
|
1253
1278
|
<span aria-hidden="true" class="grid size-6 shrink-0 place-items-center">
|
|
1254
|
-
|
|
1279
|
+
${renderPaymentIconHtml(getNetworkIconId(option.network_label), {
|
|
1280
|
+
className: orClasses5.methodNetworkIcon,
|
|
1281
|
+
label: option.network_label,
|
|
1282
|
+
resolveAssetUrl: view.resolveAssetUrl
|
|
1283
|
+
})}
|
|
1255
1284
|
</span>
|
|
1256
|
-
<span class="truncate">${
|
|
1285
|
+
<span class="truncate">${escapeHtml6(option.network_label)}</span>
|
|
1257
1286
|
${optionSelected ? `<span aria-hidden="true" class="${networkCheckClasses(accent)}">\u2713</span>` : ""}
|
|
1258
1287
|
</button>
|
|
1259
|
-
${optionDisabled && optionLimit !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${
|
|
1288
|
+
${optionDisabled && optionLimit !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml6(optionLimit)}</span>` : ""}
|
|
1260
1289
|
</div>`;
|
|
1261
1290
|
}).join("");
|
|
1262
1291
|
const summary = selectedOption === void 0 ? "" : `<p aria-live="polite" class="${orClasses5.methodNetworkSummary}">
|
|
1263
1292
|
<span aria-hidden="true" class="${networkSummaryIconClasses(accent)}">\u2713</span>
|
|
1264
|
-
${
|
|
1293
|
+
${escapeHtml6(formatNetworkSummary(group.label, selectedOption.network_label))}
|
|
1265
1294
|
</p>`;
|
|
1266
1295
|
return `
|
|
1267
1296
|
<div
|
|
@@ -1272,10 +1301,10 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
|
|
|
1272
1301
|
>
|
|
1273
1302
|
<div class="${orClasses5.methodNetworkLayout}">
|
|
1274
1303
|
<div>
|
|
1275
|
-
<h3 id="${headingId}" class="${orClasses5.methodNetworkHeading}">${
|
|
1304
|
+
<h3 id="${headingId}" class="${orClasses5.methodNetworkHeading}">${escapeHtml6(
|
|
1276
1305
|
group.heading
|
|
1277
1306
|
)}</h3>
|
|
1278
|
-
<p class="${orClasses5.methodNetworkHint}">${
|
|
1307
|
+
<p class="${orClasses5.methodNetworkHint}">${escapeHtml6(
|
|
1279
1308
|
checkoutLabels5.selectNetworkToContinue
|
|
1280
1309
|
)}</p>
|
|
1281
1310
|
</div>
|
|
@@ -1288,7 +1317,7 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
|
|
|
1288
1317
|
</div>`;
|
|
1289
1318
|
}
|
|
1290
1319
|
function renderElementMethodConfirmHtml(options) {
|
|
1291
|
-
const swapStart = options.disabled || options.swapStartAsset === void 0 ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${
|
|
1320
|
+
const swapStart = options.disabled || options.swapStartAsset === void 0 ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml6(options.swapStartAsset)}"`;
|
|
1292
1321
|
return `
|
|
1293
1322
|
<button
|
|
1294
1323
|
type="button"
|
|
@@ -1333,17 +1362,21 @@ function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonH
|
|
|
1333
1362
|
})}"
|
|
1334
1363
|
${disabled || gridBusy ? 'disabled aria-disabled="true"' : ""}
|
|
1335
1364
|
${starting ? 'aria-busy="true"' : ""}
|
|
1336
|
-
${disabled || gridBusy ? "" : multiNetwork ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.pickerSelect}="${
|
|
1365
|
+
${disabled || gridBusy ? "" : multiNetwork ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.pickerSelect}="${escapeHtml6(pickerKey)}"` : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml6(displayOption.pay_in_asset)}"`}
|
|
1337
1366
|
>
|
|
1338
1367
|
<span aria-hidden="true" class="${orClasses5.methodIconWrap}">
|
|
1339
|
-
${starting ? `<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>` :
|
|
1368
|
+
${starting ? `<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>` : renderPaymentIconHtml(getSwapOptionIconId(displayOption), {
|
|
1369
|
+
className: orClasses5.methodIcon,
|
|
1370
|
+
label: group.label,
|
|
1371
|
+
resolveAssetUrl: view.resolveAssetUrl
|
|
1372
|
+
})}
|
|
1340
1373
|
</span>
|
|
1341
1374
|
<span class="${orClasses5.methodTitleWrap}">
|
|
1342
|
-
<span class="${orClasses5.methodTitle}">${
|
|
1343
|
-
${networkDetail.length === 0 ? "" : `<span class="${orClasses5.methodTileDetail}">${
|
|
1375
|
+
<span class="${orClasses5.methodTitle}">${escapeHtml6(group.label)}</span>
|
|
1376
|
+
${networkDetail.length === 0 ? "" : `<span class="${orClasses5.methodTileDetail}">${escapeHtml6(networkDetail)}</span>`}
|
|
1344
1377
|
</span>
|
|
1345
1378
|
</button>
|
|
1346
|
-
${disabled && limitMessage !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${
|
|
1379
|
+
${disabled && limitMessage !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml6(limitMessage)}</span>` : ""}
|
|
1347
1380
|
${mobileReveal}
|
|
1348
1381
|
</div>`;
|
|
1349
1382
|
}
|
|
@@ -1359,20 +1392,20 @@ function renderWizardBreadcrumbsHtml(options) {
|
|
|
1359
1392
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="method"
|
|
1360
1393
|
type="button"
|
|
1361
1394
|
>
|
|
1362
|
-
<span>${
|
|
1395
|
+
<span>${escapeHtml6(checkoutLabels5.switchPaymentMethod)}</span>
|
|
1363
1396
|
</button>
|
|
1364
1397
|
<span part="wizard-breadcrumb-separator" aria-hidden="true">/</span>
|
|
1365
|
-
${routeLabel === null ? `<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${
|
|
1398
|
+
${routeLabel === null ? `<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml6(methodLabel)}</span>` : `
|
|
1366
1399
|
<button
|
|
1367
1400
|
part="wizard-breadcrumb"
|
|
1368
1401
|
class="${orClasses5.btnGhost}"
|
|
1369
1402
|
${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="route"
|
|
1370
1403
|
type="button"
|
|
1371
1404
|
>
|
|
1372
|
-
<span>${
|
|
1405
|
+
<span>${escapeHtml6(methodLabel)}</span>
|
|
1373
1406
|
</button>
|
|
1374
1407
|
<span part="wizard-breadcrumb-separator" aria-hidden="true">/</span>
|
|
1375
|
-
<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${
|
|
1408
|
+
<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml6(routeLabel)}</span>
|
|
1376
1409
|
`}
|
|
1377
1410
|
</nav>
|
|
1378
1411
|
`;
|
|
@@ -1426,11 +1459,11 @@ function renderCheckoutHtml(view) {
|
|
|
1426
1459
|
fiatLabel: labels.fiatLabel,
|
|
1427
1460
|
fiatCurrency: view.fiat_quote?.fiat?.currency
|
|
1428
1461
|
});
|
|
1429
|
-
const satsDetail = amountCaption === void 0 ? "" : `<div part="sats-detail" class="${orClasses6.satsDetail}">${
|
|
1462
|
+
const satsDetail = amountCaption === void 0 ? "" : `<div part="sats-detail" class="${orClasses6.satsDetail}">${escapeHtml7(amountCaption)}</div>`;
|
|
1430
1463
|
const statusLabel = view.status ?? (checkoutState === void 0 ? deriveStatus(view) : deriveStatus(checkoutState));
|
|
1431
1464
|
const showSummaryMeta = statusLabel === "settled" || statusLabel === "expired";
|
|
1432
1465
|
const stateClass = statusLabel === "settled" ? orClasses6.stateSettled : orClasses6.statePending;
|
|
1433
|
-
const stateLabel = showSummaryMeta ? `<span part="state" class="${stateClass}" data-state="${
|
|
1466
|
+
const stateLabel = showSummaryMeta ? `<span part="state" class="${stateClass}" data-state="${escapeHtml7(statusLabel)}">${escapeHtml7(statusLabel)}</span>` : "";
|
|
1434
1467
|
const status = checkoutState === void 0 ? "" : renderElementPaymentStatusHtml(checkoutState);
|
|
1435
1468
|
const statusModel = checkoutState === void 0 ? void 0 : createCheckoutStatusModel(checkoutState);
|
|
1436
1469
|
const expired = statusModel?.phase === "expired";
|
|
@@ -1438,18 +1471,18 @@ function renderCheckoutHtml(view) {
|
|
|
1438
1471
|
const swapFocused = (view.wizard?.selectedSwapAsset ?? null) !== null;
|
|
1439
1472
|
const hideLightning = !settled && (view.lightningRequested === false || swapFocused && !expired);
|
|
1440
1473
|
const wizard = expired && !swapFocused || settled || view.payment_wizard === false ? "" : renderPaymentWizardHtml(view.wizard);
|
|
1441
|
-
const copyButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.copy}" class="${orClasses6.btn}" type="button">${COPY_INVOICE_ICON}<span ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES6.swapCopyLabel}>${
|
|
1474
|
+
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>`;
|
|
1442
1475
|
const decodeInvoice = view.invoice.trim() !== "" ? view.invoice : typeof view.wizard?.lightningInvoice === "string" && view.wizard.lightningInvoice.trim() !== "" ? view.wizard.lightningInvoice : void 0;
|
|
1443
1476
|
const decodeHref = decodeInvoice === void 0 ? void 0 : createLightningInvoiceDecodeUrl2(decodeInvoice, view.decodeLinkUrl);
|
|
1444
|
-
const decodeButton = decodeHref === void 0 ? "" : `<a part="decode-invoice" class="${orClasses6.btn}" href="${
|
|
1445
|
-
const startOverButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.startOver}" class="${orClasses6.btn}" type="button">${
|
|
1477
|
+
const decodeButton = decodeHref === void 0 ? "" : `<a part="decode-invoice" class="${orClasses6.btn}" href="${escapeHtml7(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml7(checkoutLabels6.decodeInvoice)}</a>`;
|
|
1478
|
+
const startOverButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.startOver}" class="${orClasses6.btn}" type="button">${escapeHtml7(checkoutLabels6.startOver)}</button>`;
|
|
1446
1479
|
const lightningPane = hideLightning || expired || settled ? "" : `<div part="lightning-pane" class="${orClasses6.lightningPane}">
|
|
1447
1480
|
<div part="qr" class="${orClasses6.qr}" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.qr}></div>
|
|
1448
1481
|
${satsDetail}
|
|
1449
1482
|
</div>`;
|
|
1450
1483
|
const paymentLayoutClass = expired || settled ? orClasses6.paymentLayoutExpired : orClasses6.paymentLayout;
|
|
1451
1484
|
const metaRow = stateLabel === "" ? "" : `<div part="meta" class="${orClasses6.meta}">${stateLabel}</div>`;
|
|
1452
|
-
const invoiceTitle = expired || settled ? "" : `<p part="invoice-title" class="${orClasses6.invoiceTitle}">${
|
|
1485
|
+
const invoiceTitle = expired || settled ? "" : `<p part="invoice-title" class="${orClasses6.invoiceTitle}">${escapeHtml7(checkoutLabels6.bitcoinLightningInvoice)}</p>`;
|
|
1453
1486
|
const actions = settled ? (
|
|
1454
1487
|
// No state means no attempt to derive one from (a standalone caller that
|
|
1455
1488
|
// passed `status: "settled"` and no invoice-id), so the panel reads the
|
|
@@ -1463,10 +1496,10 @@ function renderCheckoutHtml(view) {
|
|
|
1463
1496
|
renderTransactionDetailsHtml(checkoutState ?? { ...view, rail: view.rail ?? "lightning" })
|
|
1464
1497
|
) : expired ? `<div part="actions" class="${orClasses6.actions}">${startOverButton}</div>` : `<div part="actions" class="${orClasses6.actions}">${copyButton}${decodeButton}</div>`;
|
|
1465
1498
|
const resolvedTheme = view.theme ?? "light";
|
|
1466
|
-
const orderDescription = view.description === void 0 || view.description === "" ? "" : `<p part="order-description" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.orderDescription} class="${orClasses6.orderDescription}">${
|
|
1499
|
+
const orderDescription = view.description === void 0 || view.description === "" ? "" : `<p part="order-description" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.orderDescription} class="${orClasses6.orderDescription}">${escapeHtml7(view.description)}</p>`;
|
|
1467
1500
|
return `
|
|
1468
1501
|
${styleTag(view.inlineStyles)}
|
|
1469
|
-
<section part="root" data-theme="${
|
|
1502
|
+
<section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}">
|
|
1470
1503
|
<slot name="${OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS.order}"></slot>
|
|
1471
1504
|
${orderDescription}
|
|
1472
1505
|
${hideLightning ? "" : `<div part="payment-layout" class="${paymentLayoutClass}">
|
|
@@ -1490,10 +1523,10 @@ function renderCheckoutCreateErrorHtml(message, options = {}) {
|
|
|
1490
1523
|
const retryButton = `<button part="retry" class="${orClasses6.btn}" type="button">Try again</button>`;
|
|
1491
1524
|
return `
|
|
1492
1525
|
${styleTag(options.inlineStyles)}
|
|
1493
|
-
<section part="root" data-theme="${
|
|
1526
|
+
<section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-create-error>
|
|
1494
1527
|
<div part="status" role="alert" class="${orClasses6.creating}">
|
|
1495
1528
|
<div><strong>Could not start checkout.</strong></div>
|
|
1496
|
-
<p>${
|
|
1529
|
+
<p>${escapeHtml7(message)}</p>
|
|
1497
1530
|
${retryButton}
|
|
1498
1531
|
</div>
|
|
1499
1532
|
</section>
|
|
@@ -1503,7 +1536,7 @@ function renderCheckoutCreatingHtml(options = {}) {
|
|
|
1503
1536
|
const resolvedTheme = options.theme ?? "light";
|
|
1504
1537
|
return `
|
|
1505
1538
|
${styleTag(options.inlineStyles)}
|
|
1506
|
-
<section part="root" data-theme="${
|
|
1539
|
+
<section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-creating>
|
|
1507
1540
|
<div part="status" class="${orClasses6.creating}">
|
|
1508
1541
|
<span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>
|
|
1509
1542
|
<div><strong>Creating checkout\u2026</strong></div>
|
|
@@ -1515,26 +1548,26 @@ function renderThemeToggleHtml(label, options = {}) {
|
|
|
1515
1548
|
return `
|
|
1516
1549
|
${styleTag(options.inlineStyles)}
|
|
1517
1550
|
<button
|
|
1518
|
-
aria-label="${
|
|
1551
|
+
aria-label="${escapeHtml7(label)}"
|
|
1519
1552
|
class="${orClasses6.themeToggle}"
|
|
1520
1553
|
part="${OPENRECEIVE_THEME_TOGGLE_ELEMENT_PARTS.button}"
|
|
1521
|
-
title="${
|
|
1554
|
+
title="${escapeHtml7(label)}"
|
|
1522
1555
|
type="button"
|
|
1523
1556
|
${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.themeToggle}
|
|
1524
|
-
>${
|
|
1557
|
+
>${escapeHtml7(label)}</button>
|
|
1525
1558
|
`;
|
|
1526
1559
|
}
|
|
1527
1560
|
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>`;
|
|
1528
1561
|
function renderElementPaymentStatusHtml(state) {
|
|
1529
1562
|
const status = createCheckoutStatusModel(state);
|
|
1530
|
-
const countdown = status.countdownLabel === void 0 ? "" : `<small part="countdown" class="${orClasses6.countdown}">${
|
|
1563
|
+
const countdown = status.countdownLabel === void 0 ? "" : `<small part="countdown" class="${orClasses6.countdown}">${escapeHtml7(status.countdownPrefix)} <strong class="${orClasses6.countdownStrong}">${escapeHtml7(status.countdownLabel)}</strong></small>`;
|
|
1531
1564
|
return `
|
|
1532
1565
|
<div part="status" role="status" aria-live="polite" class="${orClasses6.paymentStatus}">
|
|
1533
1566
|
${status.waiting ? `<span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>` : ""}
|
|
1534
1567
|
${status.phase === "settled" ? SETTLED_CHECK_ICON : ""}
|
|
1535
1568
|
<div class="${orClasses6.paymentStatusBody}">
|
|
1536
|
-
<strong class="${orClasses6.paymentStatusTitle}">${
|
|
1537
|
-
<p class="${orClasses6.paymentStatusDetail}">${
|
|
1569
|
+
<strong class="${orClasses6.paymentStatusTitle}">${escapeHtml7(status.title)}</strong>
|
|
1570
|
+
<p class="${orClasses6.paymentStatusDetail}">${escapeHtml7(status.detail)}</p>
|
|
1538
1571
|
${countdown}
|
|
1539
1572
|
</div>
|
|
1540
1573
|
</div>
|
|
@@ -82,11 +82,13 @@ interface ElementsWizardView {
|
|
|
82
82
|
/** Host-chosen bolt11 decoder base URL; omitted, the tutorial shows no decode link. */
|
|
83
83
|
readonly decodeLinkUrl?: string;
|
|
84
84
|
/**
|
|
85
|
-
* Rewrite a packaged asset path (`assets/icons/
|
|
86
|
-
* `assets/
|
|
85
|
+
* Rewrite a packaged asset path (`assets/provider-icons/strike.png`,
|
|
86
|
+
* `assets/pay_tutorials/strike-1.webp`) into a URL this host can serve. The
|
|
87
87
|
* packaged URLs only resolve under Vite/Rollup; every other bundler needs
|
|
88
|
-
* this or the
|
|
89
|
-
*
|
|
88
|
+
* this or the provider images come out as dead `file://` links. The
|
|
89
|
+
* payment-method icons are drawn inline from compiled-in markup and need
|
|
90
|
+
* nothing; given a resolver they are served as files through it instead.
|
|
91
|
+
* `defineElements` passes its own down to here.
|
|
90
92
|
*/
|
|
91
93
|
readonly resolveAssetUrl?: AssetUrlResolver;
|
|
92
94
|
readonly paymentHash?: string;
|
|
@@ -116,8 +118,9 @@ interface DefineElementsOptions {
|
|
|
116
118
|
readonly logger?: BrowserLoggerOption;
|
|
117
119
|
/**
|
|
118
120
|
* Element-owned, like `qrEncoder` and `logger`: how this host resolves the
|
|
119
|
-
* packaged
|
|
121
|
+
* packaged provider-image paths. Omitted, the packaged URLs are used —
|
|
120
122
|
* correct under Vite/Rollup and dead `file://` links under anything else.
|
|
123
|
+
* (Payment-method icons are compiled in and unaffected.)
|
|
121
124
|
*/
|
|
122
125
|
readonly resolveAssetUrl?: AssetUrlResolver;
|
|
123
126
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TransactionDetailsSource } from '@openreceive/browser/headless';
|
|
2
2
|
export { OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES, OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS, OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES, OPENRECEIVE_THEME_TOGGLE_ELEMENT_EVENTS, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, TransactionDetailsSource, createThemeToggleElement } from '@openreceive/browser/headless';
|
|
3
|
-
import { C as CheckoutView } from './define-elements-
|
|
4
|
-
export { D as DefineElementsOptions, E as ElementsWizardView, d as defineElements } from './define-elements-
|
|
3
|
+
import { C as CheckoutView } from './define-elements-ClzBXJCH.js';
|
|
4
|
+
export { D as DefineElementsOptions, E as ElementsWizardView, d as defineElements } from './define-elements-ClzBXJCH.js';
|
|
5
5
|
|
|
6
6
|
declare function renderCheckoutHtml(view: CheckoutView): string;
|
|
7
7
|
/**
|
package/dist/index.js
CHANGED
package/dist/wrapper-shared.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, CheckoutElementAttributes, CheckoutElementListeners, CheckoutElementAttributeOptions, CheckoutElementEventHandlers, CheckoutComponentProps, CheckoutShellOptions, ThemeModel, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, ThemeToggleElementAttributes, CheckoutSnapshot, ThemeToggleElementAttributeOptions } from '@openreceive/browser/headless';
|
|
2
2
|
export { CheckoutComponentProps, CheckoutController, CheckoutControllerOptions, CheckoutElementAttributeOptions, CheckoutElementAttributes, CheckoutElementEventHandlers, CheckoutElementListeners, CheckoutPropsValidation, CheckoutShellElements, CheckoutShellOptions, CheckoutSnapshot, CreateCheckoutShellOptions, OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, StoredThemeModelOptions, ThemeModel, ThemeModelOptions, ThemePreference, ThemeToggleElementAttributeOptions, ThemeToggleElementAttributes, createCheckoutController, createCheckoutShell, createStoredThemeModel, createThemeModel, validateCheckoutProps } from '@openreceive/browser/headless';
|
|
3
|
-
export { D as DefineElementsOptions, d as defineElements } from './define-elements-
|
|
3
|
+
export { D as DefineElementsOptions, d as defineElements } from './define-elements-ClzBXJCH.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Every event the checkout element dispatches, in one place. `docs/internal/wrapper-parity.md`
|
package/dist/wrapper-shared.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openreceive/elements",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "The OpenReceive checkout custom element (<openreceive-checkout>) and theme toggle.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"bitcoin",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"main": "./dist/index.js",
|
|
21
21
|
"types": "./dist/index.d.ts",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@openreceive/browser": "0.
|
|
23
|
+
"@openreceive/browser": "0.4.0"
|
|
24
24
|
},
|
|
25
25
|
"exports": {
|
|
26
26
|
".": {
|
|
@@ -40,6 +40,7 @@ same diagnostics redacted, always exit 0 — safe to share.
|
|
|
40
40
|
| Status | Meaning | Where to look |
|
|
41
41
|
| --- | --- | --- |
|
|
42
42
|
| 403 FORBIDDEN | Your own `authorize` hook denied it, or the request looked cross-site. Check the session/cookie actually reaches the checkout routes. https://openreceive.org/guides/authorization.md |
|
|
43
|
+
| Never 403s — any visitor can mint, poll, or refund for any reference | The opposite failure: on Rails the generated `config.authorize = OpenReceive::ALLOW_ALL_AUTHORIZE` placeholder is still installed (the engine warns at boot; `bin/rails openreceive:doctor` reports it). Replace it with the app's real ownership check. https://openreceive.org/guides/authorization.md |
|
|
43
44
|
| 404 NOT_FOUND | `amountFor` returned `null` (unknown reference), or the `payment_hash` does not belong to that reference. |
|
|
44
45
|
| 409 CONFLICT | **Normal state, not a bug**: the reference already settled, or an unpaid checkout for that method is already live. Show it as order state; never retry-loop. |
|
|
45
46
|
| 503 retryable | The host hook failed while persisting the attempt (instructions withheld), or the wallet is unavailable. Read the server log for the underlying error. |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# OpenReceive agent directions (Node.js)
|
|
2
2
|
|
|
3
|
-
These directions describe OpenReceive 0.
|
|
3
|
+
These directions describe OpenReceive 0.4.0.
|
|
4
4
|
|
|
5
5
|
Add OpenReceive to a Node application — the app you are already working in. You
|
|
6
6
|
do not need a copy of the OpenReceive source: the packages are on npm, and the
|
|
@@ -374,6 +374,8 @@ const openreceive = openReceiveExpress({
|
|
|
374
374
|
: null;
|
|
375
375
|
},
|
|
376
376
|
// Your own access check: may this caller do this action to this reference?
|
|
377
|
+
// `resource.reference` is your own order id, sent back by the payer's
|
|
378
|
+
// browser — a claim, not proof — already validated as a non-empty string.
|
|
377
379
|
authorize: async ({ action, request, resource }) =>
|
|
378
380
|
orders.viewerMay(
|
|
379
381
|
await sessions.currentUser(request),
|
|
@@ -451,11 +453,13 @@ so a white card never lands on a dark page. The checkout is styled by CSS
|
|
|
451
453
|
variables under `data-theme`; [Frontend checkout](https://openreceive.org/guides/frontend-checkout.md) has
|
|
452
454
|
the knobs.
|
|
453
455
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
456
|
+
The payment-method icons are compiled into `@openreceive/browser` and need
|
|
457
|
+
nothing from your bundler. The wallet logos and pay tutorials are files in
|
|
458
|
+
`@openreceive/provider-data`, and outside Vite/Rollup (esbuild, webpack, a
|
|
459
|
+
plain script tag) they cannot resolve their own URLs — the drop-in needs this
|
|
460
|
+
exactly as a custom UI does. Serve that package's `dist/assets` tree and pass
|
|
461
|
+
the base as `assetBaseUrl="/openreceive-assets"`
|
|
462
|
+
([Provider registry](https://openreceive.org/guides/provider-registry.md#assets)).
|
|
459
463
|
|
|
460
464
|
That is the whole loop: your server owns the price and the order, the payer gets
|
|
461
465
|
an invoice, and `onPaid` runs once inside the settlement transaction.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# OpenReceive agent directions (Rails)
|
|
2
2
|
|
|
3
|
-
These directions describe OpenReceive 0.
|
|
3
|
+
These directions describe OpenReceive 0.4.0.
|
|
4
4
|
|
|
5
5
|
Add OpenReceive to a Rails application — the app you are already working in. You
|
|
6
6
|
do not need a copy of the OpenReceive source: the gem is on RubyGems, the
|
|
@@ -106,7 +106,9 @@ itself, and they hold for every integration.
|
|
|
106
106
|
reject payer-supplied amounts.
|
|
107
107
|
- `config.authorize` runs on every request, and the `resource` it receives is a
|
|
108
108
|
CLAIM the payer made, not proof. Read the framework session; never trust a
|
|
109
|
-
body field.
|
|
109
|
+
body field. The generator installs `OpenReceive::ALLOW_ALL_AUTHORIZE`, a
|
|
110
|
+
placeholder that allows everything (the engine warns at boot while it is
|
|
111
|
+
set) — replace it with this app's real ownership check, same as `on_paid`.
|
|
110
112
|
- `config.on_paid` must be idempotent. It runs once per `reference` — your order
|
|
111
113
|
id, one per thing you fulfill, created before checkout, kept across retries,
|
|
112
114
|
never reused. A fresh id per page load lets one order be paid twice.
|
|
@@ -409,7 +411,9 @@ OpenReceive.configure do |config|
|
|
|
409
411
|
# cookies, or headers from it, as in a controller
|
|
410
412
|
# context[:resource] — { reference:, payment_hash: } copied from the
|
|
411
413
|
# payer's JSON body. It names an order; it does not
|
|
412
|
-
# prove this caller owns it.
|
|
414
|
+
# prove this caller owns it. reference is always a
|
|
415
|
+
# validated non-empty String (≤200 chars); payment_hash
|
|
416
|
+
# is nil except on payment.check / swap.read / swap.refund.
|
|
413
417
|
# Return true to allow, false for a 403. Here: only the signed-in customer
|
|
414
418
|
# who placed the order may act on it.
|
|
415
419
|
config.authorize = lambda do |context|
|
|
@@ -455,7 +459,12 @@ The generated initializer ships
|
|
|
455
459
|
the settlement and fulfills nothing. Replace it with your real fulfillment (as
|
|
456
460
|
above); the engine warns every time your application boots while the
|
|
457
461
|
placeholder is still configured, because orders would otherwise be recorded as settled without ever
|
|
458
|
-
being fulfilled.
|
|
462
|
+
being fulfilled. The same applies to
|
|
463
|
+
`config.authorize = OpenReceive::ALLOW_ALL_AUTHORIZE`, the generated
|
|
464
|
+
allow-all placeholder: it treats possession of the reference as
|
|
465
|
+
authorization, which is safe only while references are unguessable, and the
|
|
466
|
+
engine warns at boot until you replace it with your own ownership check (as
|
|
467
|
+
above). Replace both, not just `on_paid`.
|
|
459
468
|
|
|
460
469
|
The amount always comes from your own order record; payer-supplied amounts are
|
|
461
470
|
rejected. Advanced hooks (`resolve_checkout`, `on_checkout_created`) remain as
|
|
@@ -510,13 +519,13 @@ Bundling with esbuild (jsbundling-rails)? Two things:
|
|
|
510
519
|
<%= javascript_include_tag "application", type: "module" %>
|
|
511
520
|
```
|
|
512
521
|
|
|
513
|
-
2. Serve the payment-method icons
|
|
514
|
-
`@openreceive/browser` and
|
|
515
|
-
`@openreceive/
|
|
516
|
-
the import.
|
|
517
|
-
`public/openreceive-assets/assets/` and set
|
|
522
|
+
2. Serve the provider images. The payment-method icons are compiled into
|
|
523
|
+
`@openreceive/browser` and need nothing, but the wallet logos and pay
|
|
524
|
+
tutorials are files shipped in `@openreceive/provider-data`, and only
|
|
525
|
+
Vite-style bundlers resolve them from the import. Copy that package's
|
|
526
|
+
`dist/assets` tree to `public/openreceive-assets/assets/` and set
|
|
518
527
|
`asset-base-url="/openreceive-assets"` on the element
|
|
519
|
-
([Provider registry](https://openreceive.org/guides/provider-registry.md#assets
|
|
528
|
+
([Provider registry](https://openreceive.org/guides/provider-registry.md#assets)).
|
|
520
529
|
|
|
521
530
|
The element creates the checkout for `reference`, then renders and polls
|
|
522
531
|
itself. React/Vue/Svelte/Angular apps use the matching wrapper package
|