@retinalabsllc/zairusjs 16.0.23 → 16.0.25
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/index.d.mts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +35 -23
- package/dist/index.mjs +35 -24
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -950,6 +950,11 @@ interface UniversalBuyCryptoPageProps {
|
|
|
950
950
|
fiatCurrency: FiatCurrencyOption;
|
|
951
951
|
cryptoOptions: CryptoOption[];
|
|
952
952
|
defaultCryptoCode?: string;
|
|
953
|
+
hideBackButton?: boolean;
|
|
954
|
+
hideRecipientSection?: boolean;
|
|
955
|
+
readOnlyRecipientSection?: boolean;
|
|
956
|
+
defaultRecipientAddress?: string;
|
|
957
|
+
defaultNetworkId?: string;
|
|
953
958
|
onCalculateRate?: (payload: RateCalculationPayload) => Promise<{
|
|
954
959
|
fiatAmount: string;
|
|
955
960
|
cryptoAmount: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -950,6 +950,11 @@ interface UniversalBuyCryptoPageProps {
|
|
|
950
950
|
fiatCurrency: FiatCurrencyOption;
|
|
951
951
|
cryptoOptions: CryptoOption[];
|
|
952
952
|
defaultCryptoCode?: string;
|
|
953
|
+
hideBackButton?: boolean;
|
|
954
|
+
hideRecipientSection?: boolean;
|
|
955
|
+
readOnlyRecipientSection?: boolean;
|
|
956
|
+
defaultRecipientAddress?: string;
|
|
957
|
+
defaultNetworkId?: string;
|
|
953
958
|
onCalculateRate?: (payload: RateCalculationPayload) => Promise<{
|
|
954
959
|
fiatAmount: string;
|
|
955
960
|
cryptoAmount: string;
|
package/dist/index.js
CHANGED
|
@@ -4328,7 +4328,7 @@ var CircularLogo = ({ src, alt, fallbackText }) => {
|
|
|
4328
4328
|
onError: () => setHasError(true),
|
|
4329
4329
|
className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`
|
|
4330
4330
|
}
|
|
4331
|
-
)) : /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] text-black
|
|
4331
|
+
)) : /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] text-black uppercase" }, fallbackText.substring(0, 2)));
|
|
4332
4332
|
};
|
|
4333
4333
|
var DEFAULT_NETWORK_REGEX = {
|
|
4334
4334
|
EVM: /^0x[a-fA-F0-9]{40}$/,
|
|
@@ -4356,6 +4356,11 @@ var UniversalBuyCryptoPage = ({
|
|
|
4356
4356
|
fiatCurrency,
|
|
4357
4357
|
cryptoOptions = [],
|
|
4358
4358
|
defaultCryptoCode,
|
|
4359
|
+
hideBackButton = false,
|
|
4360
|
+
hideRecipientSection = false,
|
|
4361
|
+
readOnlyRecipientSection = false,
|
|
4362
|
+
defaultRecipientAddress = "",
|
|
4363
|
+
defaultNetworkId,
|
|
4359
4364
|
onCalculateRate,
|
|
4360
4365
|
onSubmitCheckout,
|
|
4361
4366
|
onBack
|
|
@@ -4376,6 +4381,10 @@ var UniversalBuyCryptoPage = ({
|
|
|
4376
4381
|
};
|
|
4377
4382
|
});
|
|
4378
4383
|
const [selectedNetwork, setSelectedNetwork] = (0, import_react75.useState)(() => {
|
|
4384
|
+
if (defaultNetworkId && selectedCrypto?.networks) {
|
|
4385
|
+
const foundNet = selectedCrypto.networks.find((n) => n.id === defaultNetworkId);
|
|
4386
|
+
if (foundNet) return foundNet;
|
|
4387
|
+
}
|
|
4379
4388
|
return selectedCrypto?.networks?.[0] || { id: "POLYGON", name: "Polygon (MATIC)", symbol: "POLYGON" };
|
|
4380
4389
|
});
|
|
4381
4390
|
const [fiatAmount, setFiatAmount] = (0, import_react75.useState)("");
|
|
@@ -4383,7 +4392,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4383
4392
|
const [activeSource, setActiveSource] = (0, import_react75.useState)("FIAT");
|
|
4384
4393
|
const [isCalculating, setIsCalculating] = (0, import_react75.useState)(false);
|
|
4385
4394
|
const [rateDisplay, setRateDisplay] = (0, import_react75.useState)(null);
|
|
4386
|
-
const [recipientAddress, setRecipientAddress] = (0, import_react75.useState)(
|
|
4395
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react75.useState)(defaultRecipientAddress);
|
|
4387
4396
|
const [isAddressValid, setIsAddressValid] = (0, import_react75.useState)(null);
|
|
4388
4397
|
const [isCryptoDialogOpen, setIsCryptoDialogOpen] = (0, import_react75.useState)(false);
|
|
4389
4398
|
const [isNetworkDialogOpen, setIsNetworkDialogOpen] = (0, import_react75.useState)(false);
|
|
@@ -4498,7 +4507,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4498
4507
|
}
|
|
4499
4508
|
};
|
|
4500
4509
|
const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
|
|
4501
|
-
return /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react75.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react75.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react75.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ import_react75.default.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full
|
|
4510
|
+
return /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react75.default.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ import_react75.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react75.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ import_react75.default.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ import_react75.default.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ import_react75.default.createElement(
|
|
4502
4511
|
"input",
|
|
4503
4512
|
{
|
|
4504
4513
|
type: "text",
|
|
@@ -4507,9 +4516,9 @@ var UniversalBuyCryptoPage = ({
|
|
|
4507
4516
|
onChange: handleFiatInputChange,
|
|
4508
4517
|
placeholder: "0.00",
|
|
4509
4518
|
disabled: isSubmitting,
|
|
4510
|
-
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4519
|
+
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300 "
|
|
4511
4520
|
}
|
|
4512
|
-
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-2 bg-neutral-50
|
|
4521
|
+
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-2 bg-neutral-50 rounded-full px-3 py-1.5 shrink-0 select-none" }, /* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: fiatCurrency.logoUrl, alt: fiatCurrency.code, fallbackText: fiatCurrency.code }), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black" }, fiatCurrency.code))), /* @__PURE__ */ import_react75.default.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center " }, /* @__PURE__ */ import_react75.default.createElement("svg", { className: "w-4 h-4 text-black", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react75.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" })))), /* @__PURE__ */ import_react75.default.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Receive"), isCalculating && activeSource === "FIAT" ? /* @__PURE__ */ import_react75.default.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ import_react75.default.createElement(
|
|
4513
4522
|
"input",
|
|
4514
4523
|
{
|
|
4515
4524
|
type: "text",
|
|
@@ -4518,7 +4527,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4518
4527
|
onChange: handleCryptoInputChange,
|
|
4519
4528
|
placeholder: "0.00",
|
|
4520
4529
|
disabled: isSubmitting,
|
|
4521
|
-
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4530
|
+
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300 "
|
|
4522
4531
|
}
|
|
4523
4532
|
)), /* @__PURE__ */ import_react75.default.createElement(
|
|
4524
4533
|
"button",
|
|
@@ -4529,40 +4538,43 @@ var UniversalBuyCryptoPage = ({
|
|
|
4529
4538
|
className: "flex items-center gap-2 bg-neutral-100 hover:bg-neutral-200 transition-colors rounded-full px-3 py-1.5 shrink-0 outline-none"
|
|
4530
4539
|
},
|
|
4531
4540
|
/* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: selectedCrypto.logoUrl, alt: selectedCrypto.code, fallbackText: selectedCrypto.code }),
|
|
4532
|
-
/* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs
|
|
4541
|
+
/* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black" }, selectedCrypto.code),
|
|
4533
4542
|
/* @__PURE__ */ import_react75.default.createElement("svg", { className: "w-3.5 h-3.5 text-neutral-500 ml-0.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react75.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
4534
|
-
))), rateDisplay && /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between text-[11px] text-neutral-500 px-1 -mt-2" }, /* @__PURE__ */ import_react75.default.createElement("span", null, "Exchange Rate"), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-black
|
|
4543
|
+
))), rateDisplay && /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between text-[11px] text-neutral-500 px-1 -mt-2" }, /* @__PURE__ */ import_react75.default.createElement("span", null, "Exchange Rate"), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-black " }, rateDisplay)), !hideRecipientSection && /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-4 pt-2" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ import_react75.default.createElement("label", { className: "text-[11px] tracking-widest text-neutral-400" }, "Network / Blockchain"), /* @__PURE__ */ import_react75.default.createElement(
|
|
4535
4544
|
"button",
|
|
4536
4545
|
{
|
|
4537
4546
|
type: "button",
|
|
4538
|
-
onClick: () => setIsNetworkDialogOpen(true),
|
|
4539
|
-
disabled: isSubmitting || selectedCrypto?.networks?.length <= 1,
|
|
4540
|
-
className:
|
|
4547
|
+
onClick: () => !readOnlyRecipientSection && setIsNetworkDialogOpen(true),
|
|
4548
|
+
disabled: isSubmitting || selectedCrypto?.networks?.length <= 1 || readOnlyRecipientSection,
|
|
4549
|
+
className: `border rounded-xl p-3.5 flex items-center justify-between transition-colors text-left outline-none bg-white ${readOnlyRecipientSection ? "border-neutral-100 opacity-80 cursor-not-allowed" : "border-neutral-200 hover:border-black"}`
|
|
4541
4550
|
},
|
|
4542
|
-
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black
|
|
4543
|
-
selectedCrypto?.networks?.length > 1 && /* @__PURE__ */ import_react75.default.createElement("svg", { className: "w-4 h-4 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react75.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
4544
|
-
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react75.default.createElement("label", { className: "text-[11px] tracking-widest text-neutral-400" }, "Recipient Wallet Address"), isAddressValid !== null && /* @__PURE__ */ import_react75.default.createElement("span", { className: `text-[10px]
|
|
4551
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black " }, selectedNetwork.name)),
|
|
4552
|
+
!readOnlyRecipientSection && selectedCrypto?.networks?.length > 1 && /* @__PURE__ */ import_react75.default.createElement("svg", { className: "w-4 h-4 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react75.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
4553
|
+
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react75.default.createElement("label", { className: "text-[11px] tracking-widest text-neutral-400" }, "Recipient Wallet Address"), isAddressValid !== null && /* @__PURE__ */ import_react75.default.createElement("span", { className: `text-[10px] flex items-center gap-1 ${isAddressValid ? "text-green-600" : "text-red-500"}` }, isAddressValid ? /* @__PURE__ */ import_react75.default.createElement(import_react75.default.Fragment, null, /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CheckmarkCircle01Icon, size: 12 }), " Valid Address") : "Invalid Address Format")), /* @__PURE__ */ import_react75.default.createElement("div", { className: `border rounded-xl p-3.5 flex items-center justify-between transition-all bg-white ${readOnlyRecipientSection ? "border-neutral-100 opacity-80" : isAddressValid === true ? "border-green-500" : isAddressValid === false ? "border-red-400" : "border-neutral-200 focus-within:border-black"}` }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4545
4554
|
"input",
|
|
4546
4555
|
{
|
|
4547
4556
|
type: "text",
|
|
4548
4557
|
value: recipientAddress,
|
|
4549
4558
|
onChange: (e) => setRecipientAddress(e.target.value),
|
|
4550
4559
|
placeholder: `Enter your ${selectedNetwork.symbol} address`,
|
|
4551
|
-
disabled: isSubmitting,
|
|
4560
|
+
disabled: isSubmitting || readOnlyRecipientSection,
|
|
4552
4561
|
spellCheck: "false",
|
|
4553
4562
|
autoComplete: "off",
|
|
4554
|
-
className:
|
|
4563
|
+
className: `text-xs text-black bg-transparent outline-none w-full placeholder-neutral-300 ${readOnlyRecipientSection ? "cursor-not-allowed" : ""}`
|
|
4555
4564
|
}
|
|
4556
|
-
)))), /* @__PURE__ */ import_react75.default.createElement(
|
|
4557
|
-
|
|
4565
|
+
)))), /* @__PURE__ */ import_react75.default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4566
|
+
ThreeDActionButton,
|
|
4558
4567
|
{
|
|
4559
4568
|
type: "button",
|
|
4560
4569
|
onClick: handleCheckout,
|
|
4561
4570
|
disabled: isButtonDisabled,
|
|
4562
|
-
|
|
4571
|
+
isLoading: isSubmitting,
|
|
4572
|
+
className: "w-full"
|
|
4563
4573
|
},
|
|
4564
|
-
|
|
4565
|
-
|
|
4574
|
+
"Buy ",
|
|
4575
|
+
selectedCrypto.code,
|
|
4576
|
+
" Now"
|
|
4577
|
+
))), isCryptoDialogOpen && /* @__PURE__ */ import_react75.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "absolute inset-0", onClick: () => setIsCryptoDialogOpen(false) }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4566
4578
|
"button",
|
|
4567
4579
|
{
|
|
4568
4580
|
onClick: () => setIsCryptoDialogOpen(false),
|
|
@@ -4579,7 +4591,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4579
4591
|
className: `flex items-center gap-4 p-3 rounded-xl hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "border-black bg-neutral-50/50" : "border-transparent"}`
|
|
4580
4592
|
},
|
|
4581
4593
|
/* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
|
|
4582
|
-
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black
|
|
4594
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black truncate" }, c.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
|
|
4583
4595
|
isSelected && /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.Tick02Icon, size: 16, className: "text-black" })
|
|
4584
4596
|
);
|
|
4585
4597
|
}))))), isNetworkDialogOpen && /* @__PURE__ */ import_react75.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "absolute inset-0", onClick: () => setIsNetworkDialogOpen(false) }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
@@ -4602,7 +4614,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4602
4614
|
className: `flex items-center gap-4 p-3 rounded-xl hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "border-black bg-neutral-50/50" : "border-transparent"}`
|
|
4603
4615
|
},
|
|
4604
4616
|
/* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
|
|
4605
|
-
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black
|
|
4617
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black truncate" }, net.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
|
|
4606
4618
|
isSelected && /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.Tick02Icon, size: 16, className: "text-black" })
|
|
4607
4619
|
);
|
|
4608
4620
|
}))))));
|
package/dist/index.mjs
CHANGED
|
@@ -4330,7 +4330,6 @@ import toast11 from "react-hot-toast";
|
|
|
4330
4330
|
import { HugeiconsIcon as HugeiconsIcon31 } from "@hugeicons/react";
|
|
4331
4331
|
import {
|
|
4332
4332
|
ArrowLeft01Icon as ArrowLeft01Icon12,
|
|
4333
|
-
Loading03Icon as Loading03Icon19,
|
|
4334
4333
|
CheckmarkCircle01Icon as CheckmarkCircle01Icon2,
|
|
4335
4334
|
Tick02Icon
|
|
4336
4335
|
} from "@hugeicons/core-free-icons";
|
|
@@ -4346,7 +4345,7 @@ var CircularLogo = ({ src, alt, fallbackText }) => {
|
|
|
4346
4345
|
onError: () => setHasError(true),
|
|
4347
4346
|
className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`
|
|
4348
4347
|
}
|
|
4349
|
-
)) : /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] text-black
|
|
4348
|
+
)) : /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] text-black uppercase" }, fallbackText.substring(0, 2)));
|
|
4350
4349
|
};
|
|
4351
4350
|
var DEFAULT_NETWORK_REGEX = {
|
|
4352
4351
|
EVM: /^0x[a-fA-F0-9]{40}$/,
|
|
@@ -4374,6 +4373,11 @@ var UniversalBuyCryptoPage = ({
|
|
|
4374
4373
|
fiatCurrency,
|
|
4375
4374
|
cryptoOptions = [],
|
|
4376
4375
|
defaultCryptoCode,
|
|
4376
|
+
hideBackButton = false,
|
|
4377
|
+
hideRecipientSection = false,
|
|
4378
|
+
readOnlyRecipientSection = false,
|
|
4379
|
+
defaultRecipientAddress = "",
|
|
4380
|
+
defaultNetworkId,
|
|
4377
4381
|
onCalculateRate,
|
|
4378
4382
|
onSubmitCheckout,
|
|
4379
4383
|
onBack
|
|
@@ -4394,6 +4398,10 @@ var UniversalBuyCryptoPage = ({
|
|
|
4394
4398
|
};
|
|
4395
4399
|
});
|
|
4396
4400
|
const [selectedNetwork, setSelectedNetwork] = useState31(() => {
|
|
4401
|
+
if (defaultNetworkId && selectedCrypto?.networks) {
|
|
4402
|
+
const foundNet = selectedCrypto.networks.find((n) => n.id === defaultNetworkId);
|
|
4403
|
+
if (foundNet) return foundNet;
|
|
4404
|
+
}
|
|
4397
4405
|
return selectedCrypto?.networks?.[0] || { id: "POLYGON", name: "Polygon (MATIC)", symbol: "POLYGON" };
|
|
4398
4406
|
});
|
|
4399
4407
|
const [fiatAmount, setFiatAmount] = useState31("");
|
|
@@ -4401,7 +4409,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4401
4409
|
const [activeSource, setActiveSource] = useState31("FIAT");
|
|
4402
4410
|
const [isCalculating, setIsCalculating] = useState31(false);
|
|
4403
4411
|
const [rateDisplay, setRateDisplay] = useState31(null);
|
|
4404
|
-
const [recipientAddress, setRecipientAddress] = useState31(
|
|
4412
|
+
const [recipientAddress, setRecipientAddress] = useState31(defaultRecipientAddress);
|
|
4405
4413
|
const [isAddressValid, setIsAddressValid] = useState31(null);
|
|
4406
4414
|
const [isCryptoDialogOpen, setIsCryptoDialogOpen] = useState31(false);
|
|
4407
4415
|
const [isNetworkDialogOpen, setIsNetworkDialogOpen] = useState31(false);
|
|
@@ -4516,7 +4524,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4516
4524
|
}
|
|
4517
4525
|
};
|
|
4518
4526
|
const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
|
|
4519
|
-
return /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React45.createElement(ManagedToaster, null), /* @__PURE__ */ React45.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React45.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: ArrowLeft01Icon12, size: 16 }), " Back")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ React45.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ React45.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full
|
|
4527
|
+
return /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React45.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ React45.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React45.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: ArrowLeft01Icon12, size: 16 }), " Back")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ React45.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ React45.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React45.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ React45.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ React45.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ React45.createElement(
|
|
4520
4528
|
"input",
|
|
4521
4529
|
{
|
|
4522
4530
|
type: "text",
|
|
@@ -4525,9 +4533,9 @@ var UniversalBuyCryptoPage = ({
|
|
|
4525
4533
|
onChange: handleFiatInputChange,
|
|
4526
4534
|
placeholder: "0.00",
|
|
4527
4535
|
disabled: isSubmitting,
|
|
4528
|
-
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4536
|
+
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300 "
|
|
4529
4537
|
}
|
|
4530
|
-
)), /* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-2 bg-neutral-50
|
|
4538
|
+
)), /* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-2 bg-neutral-50 rounded-full px-3 py-1.5 shrink-0 select-none" }, /* @__PURE__ */ React45.createElement(CircularLogo, { src: fiatCurrency.logoUrl, alt: fiatCurrency.code, fallbackText: fiatCurrency.code }), /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black" }, fiatCurrency.code))), /* @__PURE__ */ React45.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10" }, /* @__PURE__ */ React45.createElement("div", { className: "w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center " }, /* @__PURE__ */ React45.createElement("svg", { className: "w-4 h-4 text-black", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React45.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" })))), /* @__PURE__ */ React45.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Receive"), isCalculating && activeSource === "FIAT" ? /* @__PURE__ */ React45.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ React45.createElement(
|
|
4531
4539
|
"input",
|
|
4532
4540
|
{
|
|
4533
4541
|
type: "text",
|
|
@@ -4536,7 +4544,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4536
4544
|
onChange: handleCryptoInputChange,
|
|
4537
4545
|
placeholder: "0.00",
|
|
4538
4546
|
disabled: isSubmitting,
|
|
4539
|
-
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4547
|
+
className: "text-xl sm:text-2xl text-black bg-transparent outline-none w-full placeholder-neutral-300 "
|
|
4540
4548
|
}
|
|
4541
4549
|
)), /* @__PURE__ */ React45.createElement(
|
|
4542
4550
|
"button",
|
|
@@ -4547,40 +4555,43 @@ var UniversalBuyCryptoPage = ({
|
|
|
4547
4555
|
className: "flex items-center gap-2 bg-neutral-100 hover:bg-neutral-200 transition-colors rounded-full px-3 py-1.5 shrink-0 outline-none"
|
|
4548
4556
|
},
|
|
4549
4557
|
/* @__PURE__ */ React45.createElement(CircularLogo, { src: selectedCrypto.logoUrl, alt: selectedCrypto.code, fallbackText: selectedCrypto.code }),
|
|
4550
|
-
/* @__PURE__ */ React45.createElement("span", { className: "text-xs
|
|
4558
|
+
/* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black" }, selectedCrypto.code),
|
|
4551
4559
|
/* @__PURE__ */ React45.createElement("svg", { className: "w-3.5 h-3.5 text-neutral-500 ml-0.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React45.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
4552
|
-
))), rateDisplay && /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between text-[11px] text-neutral-500 px-1 -mt-2" }, /* @__PURE__ */ React45.createElement("span", null, "Exchange Rate"), /* @__PURE__ */ React45.createElement("span", { className: "text-black
|
|
4560
|
+
))), rateDisplay && /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between text-[11px] text-neutral-500 px-1 -mt-2" }, /* @__PURE__ */ React45.createElement("span", null, "Exchange Rate"), /* @__PURE__ */ React45.createElement("span", { className: "text-black " }, rateDisplay)), !hideRecipientSection && /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-4 pt-2" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React45.createElement("label", { className: "text-[11px] tracking-widest text-neutral-400" }, "Network / Blockchain"), /* @__PURE__ */ React45.createElement(
|
|
4553
4561
|
"button",
|
|
4554
4562
|
{
|
|
4555
4563
|
type: "button",
|
|
4556
|
-
onClick: () => setIsNetworkDialogOpen(true),
|
|
4557
|
-
disabled: isSubmitting || selectedCrypto?.networks?.length <= 1,
|
|
4558
|
-
className:
|
|
4564
|
+
onClick: () => !readOnlyRecipientSection && setIsNetworkDialogOpen(true),
|
|
4565
|
+
disabled: isSubmitting || selectedCrypto?.networks?.length <= 1 || readOnlyRecipientSection,
|
|
4566
|
+
className: `border rounded-xl p-3.5 flex items-center justify-between transition-colors text-left outline-none bg-white ${readOnlyRecipientSection ? "border-neutral-100 opacity-80 cursor-not-allowed" : "border-neutral-200 hover:border-black"}`
|
|
4559
4567
|
},
|
|
4560
|
-
/* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React45.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black
|
|
4561
|
-
selectedCrypto?.networks?.length > 1 && /* @__PURE__ */ React45.createElement("svg", { className: "w-4 h-4 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React45.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
4562
|
-
)), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React45.createElement("label", { className: "text-[11px] tracking-widest text-neutral-400" }, "Recipient Wallet Address"), isAddressValid !== null && /* @__PURE__ */ React45.createElement("span", { className: `text-[10px]
|
|
4568
|
+
/* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React45.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black " }, selectedNetwork.name)),
|
|
4569
|
+
!readOnlyRecipientSection && selectedCrypto?.networks?.length > 1 && /* @__PURE__ */ React45.createElement("svg", { className: "w-4 h-4 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React45.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
4570
|
+
)), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1.5" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React45.createElement("label", { className: "text-[11px] tracking-widest text-neutral-400" }, "Recipient Wallet Address"), isAddressValid !== null && /* @__PURE__ */ React45.createElement("span", { className: `text-[10px] flex items-center gap-1 ${isAddressValid ? "text-green-600" : "text-red-500"}` }, isAddressValid ? /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle01Icon2, size: 12 }), " Valid Address") : "Invalid Address Format")), /* @__PURE__ */ React45.createElement("div", { className: `border rounded-xl p-3.5 flex items-center justify-between transition-all bg-white ${readOnlyRecipientSection ? "border-neutral-100 opacity-80" : isAddressValid === true ? "border-green-500" : isAddressValid === false ? "border-red-400" : "border-neutral-200 focus-within:border-black"}` }, /* @__PURE__ */ React45.createElement(
|
|
4563
4571
|
"input",
|
|
4564
4572
|
{
|
|
4565
4573
|
type: "text",
|
|
4566
4574
|
value: recipientAddress,
|
|
4567
4575
|
onChange: (e) => setRecipientAddress(e.target.value),
|
|
4568
4576
|
placeholder: `Enter your ${selectedNetwork.symbol} address`,
|
|
4569
|
-
disabled: isSubmitting,
|
|
4577
|
+
disabled: isSubmitting || readOnlyRecipientSection,
|
|
4570
4578
|
spellCheck: "false",
|
|
4571
4579
|
autoComplete: "off",
|
|
4572
|
-
className:
|
|
4580
|
+
className: `text-xs text-black bg-transparent outline-none w-full placeholder-neutral-300 ${readOnlyRecipientSection ? "cursor-not-allowed" : ""}`
|
|
4573
4581
|
}
|
|
4574
|
-
)))), /* @__PURE__ */ React45.createElement(
|
|
4575
|
-
|
|
4582
|
+
)))), /* @__PURE__ */ React45.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React45.createElement(
|
|
4583
|
+
ThreeDActionButton,
|
|
4576
4584
|
{
|
|
4577
4585
|
type: "button",
|
|
4578
4586
|
onClick: handleCheckout,
|
|
4579
4587
|
disabled: isButtonDisabled,
|
|
4580
|
-
|
|
4588
|
+
isLoading: isSubmitting,
|
|
4589
|
+
className: "w-full"
|
|
4581
4590
|
},
|
|
4582
|
-
|
|
4583
|
-
|
|
4591
|
+
"Buy ",
|
|
4592
|
+
selectedCrypto.code,
|
|
4593
|
+
" Now"
|
|
4594
|
+
))), isCryptoDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsCryptoDialogOpen(false) }), /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React45.createElement(
|
|
4584
4595
|
"button",
|
|
4585
4596
|
{
|
|
4586
4597
|
onClick: () => setIsCryptoDialogOpen(false),
|
|
@@ -4597,7 +4608,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4597
4608
|
className: `flex items-center gap-4 p-3 rounded-xl hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "border-black bg-neutral-50/50" : "border-transparent"}`
|
|
4598
4609
|
},
|
|
4599
4610
|
/* @__PURE__ */ React45.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
|
|
4600
|
-
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black
|
|
4611
|
+
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black truncate" }, c.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
|
|
4601
4612
|
isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: Tick02Icon, size: 16, className: "text-black" })
|
|
4602
4613
|
);
|
|
4603
4614
|
}))))), isNetworkDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsNetworkDialogOpen(false) }), /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React45.createElement(
|
|
@@ -4620,7 +4631,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4620
4631
|
className: `flex items-center gap-4 p-3 rounded-xl hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "border-black bg-neutral-50/50" : "border-transparent"}`
|
|
4621
4632
|
},
|
|
4622
4633
|
/* @__PURE__ */ React45.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
|
|
4623
|
-
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black
|
|
4634
|
+
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black truncate" }, net.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
|
|
4624
4635
|
isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: Tick02Icon, size: 16, className: "text-black" })
|
|
4625
4636
|
);
|
|
4626
4637
|
}))))));
|