@retinalabsllc/zairusjs 16.0.30 → 16.0.40
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.js +31 -30
- package/dist/index.mjs +31 -31
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -382,12 +382,21 @@ var import_browser = require("@simplewebauthn/browser");
|
|
|
382
382
|
// src/components/TextInput.tsx
|
|
383
383
|
var import_react6 = __toESM(require("react"));
|
|
384
384
|
var InputSpinner = () => /* @__PURE__ */ import_react6.default.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react6.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react6.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
385
|
+
var getCustomFlagUrl = (code) => {
|
|
386
|
+
const map = {
|
|
387
|
+
"NG": "https://retinalabs.company/assets/images/ng.avif",
|
|
388
|
+
"GH": "https://retinalabs.company/assets/images/gh.avif",
|
|
389
|
+
"KE": "https://retinalabs.company/assets/images/ksh.avif",
|
|
390
|
+
"UG": "https://retinalabs.company/assets/images/ugx.avif"
|
|
391
|
+
};
|
|
392
|
+
return map[code?.toUpperCase()] || map["NG"];
|
|
393
|
+
};
|
|
385
394
|
var FlagImage = ({ countryCode }) => {
|
|
386
395
|
const [loaded, setLoaded] = (0, import_react6.useState)(false);
|
|
387
396
|
return /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative w-5 h-5 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ import_react6.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ import_react6.default.createElement(InputSpinner, null)), /* @__PURE__ */ import_react6.default.createElement(
|
|
388
397
|
"img",
|
|
389
398
|
{
|
|
390
|
-
src:
|
|
399
|
+
src: getCustomFlagUrl(countryCode),
|
|
391
400
|
alt: countryCode,
|
|
392
401
|
className: `object-cover w-full h-full transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`,
|
|
393
402
|
onLoad: () => setLoaded(true)
|
|
@@ -458,7 +467,7 @@ var PhoneInput = ({
|
|
|
458
467
|
className: "flex items-center gap-1.5 outline-none hover:opacity-80 transition-opacity"
|
|
459
468
|
},
|
|
460
469
|
/* @__PURE__ */ import_react6.default.createElement(FlagImage, { countryCode: selectedCountry.code }),
|
|
461
|
-
/* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm text-black
|
|
470
|
+
/* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm text-black pl-1" }, selectedCountry.dialCode),
|
|
462
471
|
/* @__PURE__ */ import_react6.default.createElement("svg", { className: "w-3 h-3 text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react6.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
463
472
|
), /* @__PURE__ */ import_react6.default.createElement(
|
|
464
473
|
"input",
|
|
@@ -4010,14 +4019,7 @@ var UniversalReferralPage = ({
|
|
|
4010
4019
|
const finalSrc = src || fallbackUrl;
|
|
4011
4020
|
return /* @__PURE__ */ import_react69.default.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.Loading03Icon, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ import_react69.default.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
|
|
4012
4021
|
};
|
|
4013
|
-
return /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react69.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react69.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react69.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_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ import_react69.default.createElement("div", null, /* @__PURE__ */ import_react69.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "bg-[#
|
|
4014
|
-
"img",
|
|
4015
|
-
{
|
|
4016
|
-
src: "https://retinalabs.company/assets/images/gift_box.avif",
|
|
4017
|
-
alt: "Rewards",
|
|
4018
|
-
className: "absolute bottom-0 right-2 translate-x-1/4 translate-y-[16%] w-28 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
|
|
4019
|
-
}
|
|
4020
|
-
))), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ import_react69.default.createElement(
|
|
4022
|
+
return /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react69.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react69.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react69.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_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ import_react69.default.createElement("div", null, /* @__PURE__ */ import_react69.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "bg-[#143731] rounded-3xl p-4 relative overflow-hidden flex flex-col min-h-25 w-full mt-2" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[11px] text-white leading-tight mb-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-white/60" }, "AFT Balance")), isLoading ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-8 w-32 bg-white/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-lg text-white tracking-tight mt-1" }, referralCoins)))), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ import_react69.default.createElement(
|
|
4021
4023
|
"button",
|
|
4022
4024
|
{
|
|
4023
4025
|
onClick: handleCopyCode,
|
|
@@ -4328,7 +4330,7 @@ var CircularLogo = ({ src, alt, fallbackText }) => {
|
|
|
4328
4330
|
onError: () => setHasError(true),
|
|
4329
4331
|
className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`
|
|
4330
4332
|
}
|
|
4331
|
-
)) : /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] text-black
|
|
4333
|
+
)) : /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] text-black uppercase" }, fallbackText.substring(0, 2)));
|
|
4332
4334
|
};
|
|
4333
4335
|
var DEFAULT_NETWORK_REGEX = {
|
|
4334
4336
|
EVM: /^0x[a-fA-F0-9]{40}$/,
|
|
@@ -4507,7 +4509,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4507
4509
|
}
|
|
4508
4510
|
};
|
|
4509
4511
|
const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
|
|
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(
|
|
4512
|
+
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(
|
|
4511
4513
|
"input",
|
|
4512
4514
|
{
|
|
4513
4515
|
type: "text",
|
|
@@ -4516,9 +4518,9 @@ var UniversalBuyCryptoPage = ({
|
|
|
4516
4518
|
onChange: handleFiatInputChange,
|
|
4517
4519
|
placeholder: "0.00",
|
|
4518
4520
|
disabled: isSubmitting,
|
|
4519
|
-
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4521
|
+
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300"
|
|
4520
4522
|
}
|
|
4521
|
-
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-2 bg-neutral-50
|
|
4523
|
+
)), /* @__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(
|
|
4522
4524
|
"input",
|
|
4523
4525
|
{
|
|
4524
4526
|
type: "text",
|
|
@@ -4527,7 +4529,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4527
4529
|
onChange: handleCryptoInputChange,
|
|
4528
4530
|
placeholder: "0.00",
|
|
4529
4531
|
disabled: isSubmitting,
|
|
4530
|
-
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4532
|
+
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300"
|
|
4531
4533
|
}
|
|
4532
4534
|
)), /* @__PURE__ */ import_react75.default.createElement(
|
|
4533
4535
|
"button",
|
|
@@ -4538,31 +4540,30 @@ var UniversalBuyCryptoPage = ({
|
|
|
4538
4540
|
className: "flex items-center gap-2 bg-neutral-100 hover:bg-neutral-200 transition-colors rounded-full px-1 py-1.5 shrink-0 outline-none"
|
|
4539
4541
|
},
|
|
4540
4542
|
/* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: selectedCrypto.logoUrl, alt: selectedCrypto.code, fallbackText: selectedCrypto.code }),
|
|
4541
|
-
/* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs
|
|
4543
|
+
/* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-black" }, selectedCrypto.code),
|
|
4542
4544
|
/* @__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" }))
|
|
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
|
|
4545
|
+
))), 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-6 pt-4 border-t border-neutral-100" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "space-y-2 flex-1 w-full relative" }, /* @__PURE__ */ import_react75.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Network / Blockchain"), /* @__PURE__ */ import_react75.default.createElement(
|
|
4544
4546
|
"button",
|
|
4545
4547
|
{
|
|
4546
4548
|
type: "button",
|
|
4547
4549
|
onClick: () => !readOnlyRecipientSection && setIsNetworkDialogOpen(true),
|
|
4548
4550
|
disabled: isSubmitting || selectedCrypto?.networks?.length <= 1 || readOnlyRecipientSection,
|
|
4549
|
-
className: `
|
|
4551
|
+
className: `w-full px-2 py-3 text-sm bg-transparent border-b text-black transition-all outline-none flex items-center justify-between ${readOnlyRecipientSection ? "border-neutral-100 cursor-not-allowed" : "border-neutral-200 hover:border-black focus:border-black"}`
|
|
4550
4552
|
},
|
|
4551
|
-
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-
|
|
4553
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ import_react75.default.createElement("span", null, selectedNetwork.name)),
|
|
4552
4554
|
!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(
|
|
4554
|
-
|
|
4555
|
+
)), /* @__PURE__ */ import_react75.default.createElement(
|
|
4556
|
+
TextInput,
|
|
4555
4557
|
{
|
|
4558
|
+
label: "Recipient Wallet Address",
|
|
4556
4559
|
type: "text",
|
|
4557
4560
|
value: recipientAddress,
|
|
4558
|
-
onChange:
|
|
4561
|
+
onChange: setRecipientAddress,
|
|
4559
4562
|
placeholder: `Enter your ${selectedNetwork.symbol} address`,
|
|
4560
4563
|
disabled: isSubmitting || readOnlyRecipientSection,
|
|
4561
|
-
|
|
4562
|
-
autoComplete: "off",
|
|
4563
|
-
className: `text-xs text-black bg-transparent outline-none w-full placeholder-neutral-300 ${readOnlyRecipientSection ? "cursor-not-allowed" : ""}`
|
|
4564
|
+
readOnly: readOnlyRecipientSection
|
|
4564
4565
|
}
|
|
4565
|
-
))
|
|
4566
|
+
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4566
4567
|
ThreeDActionButton,
|
|
4567
4568
|
{
|
|
4568
4569
|
type: "button",
|
|
@@ -4588,10 +4589,10 @@ var UniversalBuyCryptoPage = ({
|
|
|
4588
4589
|
{
|
|
4589
4590
|
key: c.code,
|
|
4590
4591
|
onClick: () => handleCryptoSelect(c),
|
|
4591
|
-
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "
|
|
4592
|
+
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
|
|
4592
4593
|
},
|
|
4593
4594
|
/* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
|
|
4594
|
-
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-
|
|
4595
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[13px] text-black truncate" }, c.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
|
|
4595
4596
|
isSelected && /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CheckmarkCircle02Icon, size: 16, className: "text-black" })
|
|
4596
4597
|
);
|
|
4597
4598
|
}))))), 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(
|
|
@@ -4611,10 +4612,10 @@ var UniversalBuyCryptoPage = ({
|
|
|
4611
4612
|
setSelectedNetwork(net);
|
|
4612
4613
|
setIsNetworkDialogOpen(false);
|
|
4613
4614
|
},
|
|
4614
|
-
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "
|
|
4615
|
+
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
|
|
4615
4616
|
},
|
|
4616
4617
|
/* @__PURE__ */ import_react75.default.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
|
|
4617
|
-
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-
|
|
4618
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[13px] text-black truncate" }, net.name), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
|
|
4618
4619
|
isSelected && /* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CheckmarkCircle02Icon, size: 16, className: "text-black" })
|
|
4619
4620
|
);
|
|
4620
4621
|
}))))));
|
package/dist/index.mjs
CHANGED
|
@@ -302,12 +302,21 @@ import { startAuthentication } from "@simplewebauthn/browser";
|
|
|
302
302
|
// src/components/TextInput.tsx
|
|
303
303
|
import React5, { useState as useState3 } from "react";
|
|
304
304
|
var InputSpinner = () => /* @__PURE__ */ React5.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
305
|
+
var getCustomFlagUrl = (code) => {
|
|
306
|
+
const map = {
|
|
307
|
+
"NG": "https://retinalabs.company/assets/images/ng.avif",
|
|
308
|
+
"GH": "https://retinalabs.company/assets/images/gh.avif",
|
|
309
|
+
"KE": "https://retinalabs.company/assets/images/ksh.avif",
|
|
310
|
+
"UG": "https://retinalabs.company/assets/images/ugx.avif"
|
|
311
|
+
};
|
|
312
|
+
return map[code?.toUpperCase()] || map["NG"];
|
|
313
|
+
};
|
|
305
314
|
var FlagImage = ({ countryCode }) => {
|
|
306
315
|
const [loaded, setLoaded] = useState3(false);
|
|
307
316
|
return /* @__PURE__ */ React5.createElement("div", { className: "relative w-5 h-5 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ React5.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)), /* @__PURE__ */ React5.createElement(
|
|
308
317
|
"img",
|
|
309
318
|
{
|
|
310
|
-
src:
|
|
319
|
+
src: getCustomFlagUrl(countryCode),
|
|
311
320
|
alt: countryCode,
|
|
312
321
|
className: `object-cover w-full h-full transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`,
|
|
313
322
|
onLoad: () => setLoaded(true)
|
|
@@ -378,7 +387,7 @@ var PhoneInput = ({
|
|
|
378
387
|
className: "flex items-center gap-1.5 outline-none hover:opacity-80 transition-opacity"
|
|
379
388
|
},
|
|
380
389
|
/* @__PURE__ */ React5.createElement(FlagImage, { countryCode: selectedCountry.code }),
|
|
381
|
-
/* @__PURE__ */ React5.createElement("span", { className: "text-sm text-black
|
|
390
|
+
/* @__PURE__ */ React5.createElement("span", { className: "text-sm text-black pl-1" }, selectedCountry.dialCode),
|
|
382
391
|
/* @__PURE__ */ React5.createElement("svg", { className: "w-3 h-3 text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React5.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
|
|
383
392
|
), /* @__PURE__ */ React5.createElement(
|
|
384
393
|
"input",
|
|
@@ -4019,14 +4028,7 @@ var UniversalReferralPage = ({
|
|
|
4019
4028
|
const finalSrc = src || fallbackUrl;
|
|
4020
4029
|
return /* @__PURE__ */ React42.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: Loading03Icon17, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React42.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
|
|
4021
4030
|
};
|
|
4022
|
-
return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React42.createElement(ManagedToaster, null), /* @__PURE__ */ React42.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React42.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: ArrowLeft01Icon10, size: 16 }), " Back")), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ React42.createElement("div", { className: "bg-[#
|
|
4023
|
-
"img",
|
|
4024
|
-
{
|
|
4025
|
-
src: "https://retinalabs.company/assets/images/gift_box.avif",
|
|
4026
|
-
alt: "Rewards",
|
|
4027
|
-
className: "absolute bottom-0 right-2 translate-x-1/4 translate-y-[16%] w-28 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
|
|
4028
|
-
}
|
|
4029
|
-
))), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React42.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ React42.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ React42.createElement(
|
|
4031
|
+
return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React42.createElement(ManagedToaster, null), /* @__PURE__ */ React42.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React42.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: ArrowLeft01Icon10, size: 16 }), " Back")), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-4 mb-6 px-1" }, /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ React42.createElement("div", { className: "bg-[#143731] rounded-3xl p-4 relative overflow-hidden flex flex-col min-h-25 w-full mt-2" }, /* @__PURE__ */ React42.createElement("div", { className: "relative z-10 flex flex-col items-start" }, /* @__PURE__ */ React42.createElement("p", { className: "text-[11px] text-white leading-tight mb-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-white/60" }, "AFT Balance")), isLoading ? /* @__PURE__ */ React42.createElement("div", { className: "h-8 w-32 bg-white/10 animate-pulse rounded mt-2" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-lg text-white tracking-tight mt-1" }, referralCoins)))), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-6 p-4 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React42.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ React42.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-sm text-black tracking-widest" }, referralCode)), /* @__PURE__ */ React42.createElement(
|
|
4030
4032
|
"button",
|
|
4031
4033
|
{
|
|
4032
4034
|
onClick: handleCopyCode,
|
|
@@ -4330,7 +4332,6 @@ import toast11 from "react-hot-toast";
|
|
|
4330
4332
|
import { HugeiconsIcon as HugeiconsIcon31 } from "@hugeicons/react";
|
|
4331
4333
|
import {
|
|
4332
4334
|
ArrowLeft01Icon as ArrowLeft01Icon12,
|
|
4333
|
-
CheckmarkCircle01Icon as CheckmarkCircle01Icon2,
|
|
4334
4335
|
CheckmarkCircle02Icon
|
|
4335
4336
|
} from "@hugeicons/core-free-icons";
|
|
4336
4337
|
var CircularLogo = ({ src, alt, fallbackText }) => {
|
|
@@ -4345,7 +4346,7 @@ var CircularLogo = ({ src, alt, fallbackText }) => {
|
|
|
4345
4346
|
onError: () => setHasError(true),
|
|
4346
4347
|
className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`
|
|
4347
4348
|
}
|
|
4348
|
-
)) : /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] text-black
|
|
4349
|
+
)) : /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] text-black uppercase" }, fallbackText.substring(0, 2)));
|
|
4349
4350
|
};
|
|
4350
4351
|
var DEFAULT_NETWORK_REGEX = {
|
|
4351
4352
|
EVM: /^0x[a-fA-F0-9]{40}$/,
|
|
@@ -4524,7 +4525,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4524
4525
|
}
|
|
4525
4526
|
};
|
|
4526
4527
|
const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
|
|
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(
|
|
4528
|
+
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(
|
|
4528
4529
|
"input",
|
|
4529
4530
|
{
|
|
4530
4531
|
type: "text",
|
|
@@ -4533,9 +4534,9 @@ var UniversalBuyCryptoPage = ({
|
|
|
4533
4534
|
onChange: handleFiatInputChange,
|
|
4534
4535
|
placeholder: "0.00",
|
|
4535
4536
|
disabled: isSubmitting,
|
|
4536
|
-
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4537
|
+
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300"
|
|
4537
4538
|
}
|
|
4538
|
-
)), /* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-2 bg-neutral-50
|
|
4539
|
+
)), /* @__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(
|
|
4539
4540
|
"input",
|
|
4540
4541
|
{
|
|
4541
4542
|
type: "text",
|
|
@@ -4544,7 +4545,7 @@ var UniversalBuyCryptoPage = ({
|
|
|
4544
4545
|
onChange: handleCryptoInputChange,
|
|
4545
4546
|
placeholder: "0.00",
|
|
4546
4547
|
disabled: isSubmitting,
|
|
4547
|
-
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300
|
|
4548
|
+
className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300"
|
|
4548
4549
|
}
|
|
4549
4550
|
)), /* @__PURE__ */ React45.createElement(
|
|
4550
4551
|
"button",
|
|
@@ -4555,31 +4556,30 @@ var UniversalBuyCryptoPage = ({
|
|
|
4555
4556
|
className: "flex items-center gap-2 bg-neutral-100 hover:bg-neutral-200 transition-colors rounded-full px-1 py-1.5 shrink-0 outline-none"
|
|
4556
4557
|
},
|
|
4557
4558
|
/* @__PURE__ */ React45.createElement(CircularLogo, { src: selectedCrypto.logoUrl, alt: selectedCrypto.code, fallbackText: selectedCrypto.code }),
|
|
4558
|
-
/* @__PURE__ */ React45.createElement("span", { className: "text-xs
|
|
4559
|
+
/* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black" }, selectedCrypto.code),
|
|
4559
4560
|
/* @__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" }))
|
|
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
|
|
4561
|
+
))), 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-6 pt-4 border-t border-neutral-100" }, /* @__PURE__ */ React45.createElement("div", { className: "space-y-2 flex-1 w-full relative" }, /* @__PURE__ */ React45.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Network / Blockchain"), /* @__PURE__ */ React45.createElement(
|
|
4561
4562
|
"button",
|
|
4562
4563
|
{
|
|
4563
4564
|
type: "button",
|
|
4564
4565
|
onClick: () => !readOnlyRecipientSection && setIsNetworkDialogOpen(true),
|
|
4565
4566
|
disabled: isSubmitting || selectedCrypto?.networks?.length <= 1 || readOnlyRecipientSection,
|
|
4566
|
-
className: `
|
|
4567
|
+
className: `w-full px-2 py-3 text-sm bg-transparent border-b text-black transition-all outline-none flex items-center justify-between ${readOnlyRecipientSection ? "border-neutral-100 cursor-not-allowed" : "border-neutral-200 hover:border-black focus:border-black"}`
|
|
4567
4568
|
},
|
|
4568
|
-
/* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-
|
|
4569
|
+
/* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React45.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ React45.createElement("span", null, selectedNetwork.name)),
|
|
4569
4570
|
!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(
|
|
4571
|
-
|
|
4571
|
+
)), /* @__PURE__ */ React45.createElement(
|
|
4572
|
+
TextInput,
|
|
4572
4573
|
{
|
|
4574
|
+
label: "Recipient Wallet Address",
|
|
4573
4575
|
type: "text",
|
|
4574
4576
|
value: recipientAddress,
|
|
4575
|
-
onChange:
|
|
4577
|
+
onChange: setRecipientAddress,
|
|
4576
4578
|
placeholder: `Enter your ${selectedNetwork.symbol} address`,
|
|
4577
4579
|
disabled: isSubmitting || readOnlyRecipientSection,
|
|
4578
|
-
|
|
4579
|
-
autoComplete: "off",
|
|
4580
|
-
className: `text-xs text-black bg-transparent outline-none w-full placeholder-neutral-300 ${readOnlyRecipientSection ? "cursor-not-allowed" : ""}`
|
|
4580
|
+
readOnly: readOnlyRecipientSection
|
|
4581
4581
|
}
|
|
4582
|
-
))
|
|
4582
|
+
)), /* @__PURE__ */ React45.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React45.createElement(
|
|
4583
4583
|
ThreeDActionButton,
|
|
4584
4584
|
{
|
|
4585
4585
|
type: "button",
|
|
@@ -4605,10 +4605,10 @@ var UniversalBuyCryptoPage = ({
|
|
|
4605
4605
|
{
|
|
4606
4606
|
key: c.code,
|
|
4607
4607
|
onClick: () => handleCryptoSelect(c),
|
|
4608
|
-
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "
|
|
4608
|
+
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
|
|
4609
4609
|
},
|
|
4610
4610
|
/* @__PURE__ */ React45.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
|
|
4611
|
-
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-
|
|
4611
|
+
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[13px] text-black truncate" }, c.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
|
|
4612
4612
|
isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle02Icon, size: 16, className: "text-black" })
|
|
4613
4613
|
);
|
|
4614
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(
|
|
@@ -4628,10 +4628,10 @@ var UniversalBuyCryptoPage = ({
|
|
|
4628
4628
|
setSelectedNetwork(net);
|
|
4629
4629
|
setIsNetworkDialogOpen(false);
|
|
4630
4630
|
},
|
|
4631
|
-
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "
|
|
4631
|
+
className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
|
|
4632
4632
|
},
|
|
4633
4633
|
/* @__PURE__ */ React45.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
|
|
4634
|
-
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-
|
|
4634
|
+
/* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[13px] text-black truncate" }, net.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
|
|
4635
4635
|
isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle02Icon, size: 16, className: "text-black" })
|
|
4636
4636
|
);
|
|
4637
4637
|
}))))));
|