voltage-payments-component
Version:
Lightweight, framework-agnostic Bitcoin payment components for web applications using Voltage Payments
523 lines (522 loc) • 17.2 kB
JavaScript
import { S as SvelteComponent, i as init, s as safe_not_equal, a as append_styles, d as detach, t as transition_out, b as transition_in, c as check_outros, e as insert, l as listen, f as empty, g as createEventDispatcher, o as onMount, P as PaymentInline, h as destroy_component, r as run_all, j as create_bidirectional_transition, k as add_render_callback, m as append, n as mount_component, p as element, q as space, u as create_component, v as attr, w as binding_callbacks, x as group_outros } from "./PaymentInline-DS0xmQAd.js";
import { s as scale, f as fade } from "./index-DzIlLHq1.js";
function add_css(target) {
append_styles(target, "svelte-1h4iwxp", ".voltage-modal-backdrop.svelte-1h4iwxp{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.voltage-modal-content.svelte-1h4iwxp{background:white;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25),\n 0 0 0 1px rgba(0, 0, 0, 0.05);max-width:90vw;max-height:90vh;overflow-y:auto;position:relative;outline:none}.voltage-modal-header.svelte-1h4iwxp{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.5rem 0 1.5rem;border-bottom:1px solid #e5e7eb;margin-bottom:1rem}.voltage-modal-title.svelte-1h4iwxp{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.voltage-modal-close.svelte-1h4iwxp{background:none;border:none;padding:0.5rem;cursor:pointer;color:#6b7280;border-radius:0.375rem;display:flex;align-items:center;justify-content:center;transition:all 150ms ease-in-out}.voltage-modal-close.svelte-1h4iwxp:hover{background:#f3f4f6;color:#374151}.voltage-modal-close.svelte-1h4iwxp:focus{outline:2px solid #f7931a;outline-offset:2px}.voltage-modal-body.svelte-1h4iwxp{padding:0 1.5rem 1.5rem 1.5rem}@media(prefers-color-scheme: dark){.voltage-modal-content.svelte-1h4iwxp{background:#1f2937;color:#f9fafb}.voltage-modal-title.svelte-1h4iwxp{color:#f9fafb}.voltage-modal-header.svelte-1h4iwxp{border-bottom-color:#374151}.voltage-modal-close.svelte-1h4iwxp{color:#9ca3af}.voltage-modal-close.svelte-1h4iwxp:hover{background:#374151;color:#d1d5db}}@media(max-width: 640px){.voltage-modal-backdrop.svelte-1h4iwxp{padding:0.5rem}.voltage-modal-content.svelte-1h4iwxp{max-width:100%;border-radius:0.75rem}.voltage-modal-header.svelte-1h4iwxp{padding:1rem 1rem 0 1rem}.voltage-modal-body.svelte-1h4iwxp{padding:0 1rem 1rem 1rem}.voltage-modal-title.svelte-1h4iwxp{font-size:1.125rem}}.voltage-modal-content.svelte-1h4iwxp{animation:svelte-1h4iwxp-modalSlideIn 200ms ease-out}@keyframes svelte-1h4iwxp-modalSlideIn{from{opacity:0;transform:translate3d(0, -20px, 0) scale(0.95)}to{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}.voltage-modal-content.svelte-1h4iwxp:focus{outline:none}.voltage-modal-content.svelte-1h4iwxp::-webkit-scrollbar{width:8px}.voltage-modal-content.svelte-1h4iwxp::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.voltage-modal-content.svelte-1h4iwxp::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.voltage-modal-content.svelte-1h4iwxp::-webkit-scrollbar-thumb:hover{background:#94a3b8}");
}
function create_if_block(ctx) {
let div3;
let div2;
let div0;
let h2;
let t1;
let button;
let t2;
let div1;
let paymentinline;
let div2_transition;
let div3_transition;
let current;
let mounted;
let dispose;
paymentinline = new PaymentInline({
props: {
apiKey: (
/*apiKey*/
ctx[0]
),
walletId: (
/*walletId*/
ctx[1]
),
amount: (
/*amount*/
ctx[2]
),
paymentKind: (
/*paymentKind*/
ctx[3]
),
description: (
/*description*/
ctx[4]
),
appearance: (
/*appearance*/
ctx[5]
),
theme: (
/*theme*/
ctx[6]
),
showQRCode: (
/*showQRCode*/
ctx[7]
),
showCopyButton: (
/*showCopyButton*/
ctx[8]
),
pollingConfig: (
/*pollingConfig*/
ctx[9]
),
organizationId: (
/*organizationId*/
ctx[10]
),
environmentId: (
/*environmentId*/
ctx[11]
),
baseUrl: (
/*baseUrl*/
ctx[12]
),
assetCurrency: (
/*assetCurrency*/
ctx[13]
),
assetAmount: (
/*assetAmount*/
ctx[14]
),
assetLabel: (
/*assetLabel*/
ctx[15]
)
}
});
paymentinline.$on(
"ready",
/*handleReady*/
ctx[21]
);
paymentinline.$on(
"qrGenerated",
/*handleQRGenerated*/
ctx[22]
);
paymentinline.$on(
"statusChange",
/*handleStatusChange*/
ctx[23]
);
paymentinline.$on(
"success",
/*handleSuccess*/
ctx[24]
);
paymentinline.$on(
"error",
/*handleError*/
ctx[25]
);
paymentinline.$on(
"expired",
/*handleExpired*/
ctx[26]
);
return {
c() {
div3 = element("div");
div2 = element("div");
div0 = element("div");
h2 = element("h2");
h2.textContent = "Complete Payment";
t1 = space();
button = element("button");
button.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
t2 = space();
div1 = element("div");
create_component(paymentinline.$$.fragment);
attr(h2, "id", "payment-modal-title");
attr(h2, "class", "voltage-modal-title svelte-1h4iwxp");
attr(button, "type", "button");
attr(button, "class", "voltage-modal-close svelte-1h4iwxp");
attr(button, "aria-label", "Close payment modal");
attr(div0, "class", "voltage-modal-header svelte-1h4iwxp");
attr(div1, "class", "voltage-modal-body svelte-1h4iwxp");
attr(div2, "class", "voltage-modal-content svelte-1h4iwxp");
attr(div2, "tabindex", "-1");
attr(div3, "class", "voltage-modal-backdrop svelte-1h4iwxp");
attr(div3, "role", "dialog");
attr(div3, "aria-modal", "true");
attr(div3, "aria-labelledby", "payment-modal-title");
attr(div3, "tabindex", "-1");
},
m(target, anchor) {
insert(target, div3, anchor);
append(div3, div2);
append(div2, div0);
append(div0, h2);
append(div0, t1);
append(div0, button);
append(div2, t2);
append(div2, div1);
mount_component(paymentinline, div1, null);
ctx[29](div2);
current = true;
if (!mounted) {
dispose = [
listen(
button,
"click",
/*close*/
ctx[16]
),
listen(
div3,
"click",
/*handleBackdropClick*/
ctx[20]
),
listen(
div3,
"keydown",
/*keydown_handler*/
ctx[30]
)
];
mounted = true;
}
},
p(ctx2, dirty) {
const paymentinline_changes = {};
if (dirty[0] & /*apiKey*/
1) paymentinline_changes.apiKey = /*apiKey*/
ctx2[0];
if (dirty[0] & /*walletId*/
2) paymentinline_changes.walletId = /*walletId*/
ctx2[1];
if (dirty[0] & /*amount*/
4) paymentinline_changes.amount = /*amount*/
ctx2[2];
if (dirty[0] & /*paymentKind*/
8) paymentinline_changes.paymentKind = /*paymentKind*/
ctx2[3];
if (dirty[0] & /*description*/
16) paymentinline_changes.description = /*description*/
ctx2[4];
if (dirty[0] & /*appearance*/
32) paymentinline_changes.appearance = /*appearance*/
ctx2[5];
if (dirty[0] & /*theme*/
64) paymentinline_changes.theme = /*theme*/
ctx2[6];
if (dirty[0] & /*showQRCode*/
128) paymentinline_changes.showQRCode = /*showQRCode*/
ctx2[7];
if (dirty[0] & /*showCopyButton*/
256) paymentinline_changes.showCopyButton = /*showCopyButton*/
ctx2[8];
if (dirty[0] & /*pollingConfig*/
512) paymentinline_changes.pollingConfig = /*pollingConfig*/
ctx2[9];
if (dirty[0] & /*organizationId*/
1024) paymentinline_changes.organizationId = /*organizationId*/
ctx2[10];
if (dirty[0] & /*environmentId*/
2048) paymentinline_changes.environmentId = /*environmentId*/
ctx2[11];
if (dirty[0] & /*baseUrl*/
4096) paymentinline_changes.baseUrl = /*baseUrl*/
ctx2[12];
if (dirty[0] & /*assetCurrency*/
8192) paymentinline_changes.assetCurrency = /*assetCurrency*/
ctx2[13];
if (dirty[0] & /*assetAmount*/
16384) paymentinline_changes.assetAmount = /*assetAmount*/
ctx2[14];
if (dirty[0] & /*assetLabel*/
32768) paymentinline_changes.assetLabel = /*assetLabel*/
ctx2[15];
paymentinline.$set(paymentinline_changes);
},
i(local) {
if (current) return;
transition_in(paymentinline.$$.fragment, local);
if (local) {
add_render_callback(() => {
if (!current) return;
if (!div2_transition) div2_transition = create_bidirectional_transition(div2, scale, { duration: 200, start: 0.95 }, true);
div2_transition.run(1);
});
}
if (local) {
add_render_callback(() => {
if (!current) return;
if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, { duration: 200 }, true);
div3_transition.run(1);
});
}
current = true;
},
o(local) {
transition_out(paymentinline.$$.fragment, local);
if (local) {
if (!div2_transition) div2_transition = create_bidirectional_transition(div2, scale, { duration: 200, start: 0.95 }, false);
div2_transition.run(0);
}
if (local) {
if (!div3_transition) div3_transition = create_bidirectional_transition(div3, fade, { duration: 200 }, false);
div3_transition.run(0);
}
current = false;
},
d(detaching) {
if (detaching) {
detach(div3);
}
destroy_component(paymentinline);
ctx[29](null);
if (detaching && div2_transition) div2_transition.end();
if (detaching && div3_transition) div3_transition.end();
mounted = false;
run_all(dispose);
}
};
}
function create_fragment(ctx) {
let if_block_anchor;
let current;
let mounted;
let dispose;
let if_block = (
/*modalOpen*/
ctx[17] && create_if_block(ctx)
);
return {
c() {
if (if_block) if_block.c();
if_block_anchor = empty();
},
m(target, anchor) {
if (if_block) if_block.m(target, anchor);
insert(target, if_block_anchor, anchor);
current = true;
if (!mounted) {
dispose = listen(
window,
"keydown",
/*handleKeydown*/
ctx[19]
);
mounted = true;
}
},
p(ctx2, dirty) {
if (
/*modalOpen*/
ctx2[17]
) {
if (if_block) {
if_block.p(ctx2, dirty);
if (dirty[0] & /*modalOpen*/
131072) {
transition_in(if_block, 1);
}
} else {
if_block = create_if_block(ctx2);
if_block.c();
transition_in(if_block, 1);
if_block.m(if_block_anchor.parentNode, if_block_anchor);
}
} else if (if_block) {
group_outros();
transition_out(if_block, 1, 1, () => {
if_block = null;
});
check_outros();
}
},
i(local) {
if (current) return;
transition_in(if_block);
current = true;
},
o(local) {
transition_out(if_block);
current = false;
},
d(detaching) {
if (detaching) {
detach(if_block_anchor);
}
if (if_block) if_block.d(detaching);
mounted = false;
dispose();
}
};
}
function instance($$self, $$props, $$invalidate) {
let { apiKey } = $$props;
let { walletId } = $$props;
let { amount = null } = $$props;
let { paymentKind = "bip21" } = $$props;
let { description = "" } = $$props;
let { appearance = {} } = $$props;
let { theme = "auto" } = $$props;
let { showQRCode = true } = $$props;
let { showCopyButton = true } = $$props;
let { pollingConfig = {} } = $$props;
let { organizationId = void 0 } = $$props;
let { environmentId = void 0 } = $$props;
let { baseUrl = void 0 } = $$props;
let { autoClose = true } = $$props;
let { assetCurrency = void 0 } = $$props;
let { assetAmount = void 0 } = $$props;
let { assetLabel = void 0 } = $$props;
let modalOpen = false;
let modalElement;
const dispatch = createEventDispatcher();
function open() {
$$invalidate(17, modalOpen = true);
document.body.style.overflow = "hidden";
setTimeout(() => modalElement == null ? void 0 : modalElement.focus(), 100);
}
function close() {
$$invalidate(17, modalOpen = false);
document.body.style.overflow = "";
dispatch("modalClosed");
}
function handleKeydown(event) {
if (event.key === "Escape" && modalOpen) {
close();
}
}
function handleBackdropClick(event) {
if (event.target === event.currentTarget) {
close();
}
}
function handleReady(event) {
dispatch("ready", event.detail);
}
function handleQRGenerated(event) {
dispatch("qrGenerated", event.detail);
}
function handleStatusChange(event) {
dispatch("statusChange", event.detail);
}
function handleSuccess(event) {
dispatch("success", event.detail);
if (autoClose) {
setTimeout(() => close(), 2e3);
}
}
function handleError(event) {
dispatch("error", event.detail);
}
function handleExpired(event) {
dispatch("expired", event.detail);
}
onMount(() => {
return () => {
document.body.style.overflow = "";
};
});
function div2_binding($$value) {
binding_callbacks[$$value ? "unshift" : "push"](() => {
modalElement = $$value;
$$invalidate(18, modalElement);
});
}
const keydown_handler = (e) => e.key === "Escape" && close();
$$self.$$set = ($$props2) => {
if ("apiKey" in $$props2) $$invalidate(0, apiKey = $$props2.apiKey);
if ("walletId" in $$props2) $$invalidate(1, walletId = $$props2.walletId);
if ("amount" in $$props2) $$invalidate(2, amount = $$props2.amount);
if ("paymentKind" in $$props2) $$invalidate(3, paymentKind = $$props2.paymentKind);
if ("description" in $$props2) $$invalidate(4, description = $$props2.description);
if ("appearance" in $$props2) $$invalidate(5, appearance = $$props2.appearance);
if ("theme" in $$props2) $$invalidate(6, theme = $$props2.theme);
if ("showQRCode" in $$props2) $$invalidate(7, showQRCode = $$props2.showQRCode);
if ("showCopyButton" in $$props2) $$invalidate(8, showCopyButton = $$props2.showCopyButton);
if ("pollingConfig" in $$props2) $$invalidate(9, pollingConfig = $$props2.pollingConfig);
if ("organizationId" in $$props2) $$invalidate(10, organizationId = $$props2.organizationId);
if ("environmentId" in $$props2) $$invalidate(11, environmentId = $$props2.environmentId);
if ("baseUrl" in $$props2) $$invalidate(12, baseUrl = $$props2.baseUrl);
if ("autoClose" in $$props2) $$invalidate(27, autoClose = $$props2.autoClose);
if ("assetCurrency" in $$props2) $$invalidate(13, assetCurrency = $$props2.assetCurrency);
if ("assetAmount" in $$props2) $$invalidate(14, assetAmount = $$props2.assetAmount);
if ("assetLabel" in $$props2) $$invalidate(15, assetLabel = $$props2.assetLabel);
};
return [
apiKey,
walletId,
amount,
paymentKind,
description,
appearance,
theme,
showQRCode,
showCopyButton,
pollingConfig,
organizationId,
environmentId,
baseUrl,
assetCurrency,
assetAmount,
assetLabel,
close,
modalOpen,
modalElement,
handleKeydown,
handleBackdropClick,
handleReady,
handleQRGenerated,
handleStatusChange,
handleSuccess,
handleError,
handleExpired,
autoClose,
open,
div2_binding,
keydown_handler
];
}
class PaymentModal extends SvelteComponent {
constructor(options) {
super();
init(
this,
options,
instance,
create_fragment,
safe_not_equal,
{
apiKey: 0,
walletId: 1,
amount: 2,
paymentKind: 3,
description: 4,
appearance: 5,
theme: 6,
showQRCode: 7,
showCopyButton: 8,
pollingConfig: 9,
organizationId: 10,
environmentId: 11,
baseUrl: 12,
autoClose: 27,
assetCurrency: 13,
assetAmount: 14,
assetLabel: 15,
open: 28,
close: 16
},
add_css,
[-1, -1]
);
}
get open() {
return this.$$.ctx[28];
}
get close() {
return this.$$.ctx[16];
}
}
export {
PaymentModal as default
};
//# sourceMappingURL=PaymentModal-Bc2wPD9_.js.map