@retinalabsllc/zairusjs 13.0.35 → 13.0.45

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +36 -1
  2. package/dist/index.d.ts +36 -1
  3. package/dist/index.js +116 -13
  4. package/dist/index.mjs +119 -13
  5. package/package.json +4 -1
package/dist/index.d.mts CHANGED
@@ -818,4 +818,39 @@ interface UniversalVerificationPageProps {
818
818
  }
819
819
  declare const UniversalVerificationPage: React.FC<UniversalVerificationPageProps>;
820
820
 
821
- export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
821
+ interface RewardProfile {
822
+ web3Name: string;
823
+ username: string;
824
+ avatarUrl: string | null;
825
+ }
826
+ interface LeaderboardItem {
827
+ position: number;
828
+ amount: string;
829
+ profile: RewardProfile;
830
+ }
831
+ interface RewardItem {
832
+ id: string;
833
+ rewardKey: string;
834
+ title: string;
835
+ description: string;
836
+ amount: string;
837
+ status: string;
838
+ handler: string;
839
+ endpoint: string;
840
+ config: any;
841
+ createdAt: string;
842
+ isEligible: boolean;
843
+ progressText: string;
844
+ }
845
+ interface UniversalRewardPageProps {
846
+ leaderboardToday: LeaderboardItem[];
847
+ leaderboardWeek: LeaderboardItem[];
848
+ leaderboardMonth: LeaderboardItem[];
849
+ rewards: RewardItem[];
850
+ onBack?: () => void;
851
+ isLoading: boolean;
852
+ onRefresh: () => void;
853
+ }
854
+ declare const UniversalRewardPage: React.FC<UniversalRewardPageProps>;
855
+
856
+ export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
package/dist/index.d.ts CHANGED
@@ -818,4 +818,39 @@ interface UniversalVerificationPageProps {
818
818
  }
819
819
  declare const UniversalVerificationPage: React.FC<UniversalVerificationPageProps>;
820
820
 
821
- export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
821
+ interface RewardProfile {
822
+ web3Name: string;
823
+ username: string;
824
+ avatarUrl: string | null;
825
+ }
826
+ interface LeaderboardItem {
827
+ position: number;
828
+ amount: string;
829
+ profile: RewardProfile;
830
+ }
831
+ interface RewardItem {
832
+ id: string;
833
+ rewardKey: string;
834
+ title: string;
835
+ description: string;
836
+ amount: string;
837
+ status: string;
838
+ handler: string;
839
+ endpoint: string;
840
+ config: any;
841
+ createdAt: string;
842
+ isEligible: boolean;
843
+ progressText: string;
844
+ }
845
+ interface UniversalRewardPageProps {
846
+ leaderboardToday: LeaderboardItem[];
847
+ leaderboardWeek: LeaderboardItem[];
848
+ leaderboardMonth: LeaderboardItem[];
849
+ rewards: RewardItem[];
850
+ onBack?: () => void;
851
+ isLoading: boolean;
852
+ onRefresh: () => void;
853
+ }
854
+ declare const UniversalRewardPage: React.FC<UniversalRewardPageProps>;
855
+
856
+ export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
package/dist/index.js CHANGED
@@ -64,6 +64,7 @@ __export(index_exports, {
64
64
  UniversalOrganizationPage: () => UniversalOrganizationPage,
65
65
  UniversalProfilePage: () => UniversalProfilePage,
66
66
  UniversalProfileSettings: () => UniversalProfileSettings,
67
+ UniversalRewardPage: () => UniversalRewardPage,
67
68
  UniversalSecurityPage: () => UniversalSecurityPage,
68
69
  UniversalSidebar: () => UniversalSidebar,
69
70
  UniversalTransactionPage: () => UniversalTransactionPage,
@@ -543,7 +544,7 @@ function AuthFormInner({
543
544
  else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
544
545
  else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
545
546
  else handleAuthRequestSubmit();
546
- } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block uppercase" }, "Invitation Code"), /* @__PURE__ */ import_react6.default.createElement(
547
+ } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Invitation Code"), /* @__PURE__ */ import_react6.default.createElement(
547
548
  "input",
548
549
  {
549
550
  type: "text",
@@ -551,7 +552,7 @@ function AuthFormInner({
551
552
  onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
552
553
  required: true,
553
554
  autoFocus: true,
554
- className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest font-mono",
555
+ className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
555
556
  placeholder: "Invitation Code"
556
557
  }
557
558
  ))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react6.default.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react6.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react6.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ import_react6.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ import_react6.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
@@ -579,7 +580,7 @@ function AuthFormInner({
579
580
  {
580
581
  onClick: triggerPasskeyLogin,
581
582
  disabled: isSubmitting,
582
- className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs font-medium tracking-wide transition-colors outline-none disabled:opacity-50"
583
+ className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
583
584
  },
584
585
  "Use Passkey / Biometrics"
585
586
  ))))));
@@ -1443,15 +1444,6 @@ var UniversalTransactionPage = ({
1443
1444
  className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide mt-2"
1444
1445
  },
1445
1446
  "Report Transaction"
1446
- ), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ import_react23.default.createElement(
1447
- "a",
1448
- {
1449
- href: `https://basescan.org/tx/${selectedTransaction.reference}`,
1450
- target: "_blank",
1451
- rel: "noopener noreferrer",
1452
- className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide mt-2"
1453
- },
1454
- "View in block explorer"
1455
1447
  ))))), isDirectionModalOpen && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ import_react23.default.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Payment Type")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ import_react23.default.createElement(
1456
1448
  "button",
1457
1449
  {
@@ -2160,7 +2152,7 @@ var UniversalCardPage = ({
2160
2152
  },
2161
2153
  className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : canFlip ? "cursor-pointer" : "cursor-default"}`,
2162
2154
  style: {
2163
- height: 175,
2155
+ height: 180,
2164
2156
  transformStyle: "preserve-3d",
2165
2157
  transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
2166
2158
  }
@@ -4063,6 +4055,116 @@ var UniversalVerificationPage = ({
4063
4055
  }
4064
4056
  ))));
4065
4057
  };
4058
+
4059
+ // src/components/UniversalRewardPage.tsx
4060
+ var import_react71 = __toESM(require("react"));
4061
+ var import_axios = __toESM(require("axios"));
4062
+ var import_react_hot_toast9 = __toESM(require("react-hot-toast"));
4063
+ var import_react_confetti = __toESM(require("react-confetti"));
4064
+ var import_react_use = require("react-use");
4065
+ var import_react72 = require("@hugeicons/react");
4066
+ var import_core_free_icons24 = require("@hugeicons/core-free-icons");
4067
+ var formatWeb3Name = (name) => {
4068
+ if (!name) return "";
4069
+ return name.toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase());
4070
+ };
4071
+ var PageSpinner4 = () => /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex justify-center items-center py-12 w-full" }, /* @__PURE__ */ import_react71.default.createElement(import_react72.HugeiconsIcon, { icon: import_core_free_icons24.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
4072
+ var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
4073
+ const [isLoaded, setIsLoaded] = (0, import_react71.useState)(false);
4074
+ const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
4075
+ const finalSrc = src || fallbackUrl;
4076
+ return /* @__PURE__ */ import_react71.default.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-[3px] border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ import_react71.default.createElement(import_react72.HugeiconsIcon, { icon: import_core_free_icons24.Loading03Icon, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ import_react71.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"}` }));
4077
+ };
4078
+ var UniversalRewardPage = ({
4079
+ leaderboardToday,
4080
+ leaderboardWeek,
4081
+ leaderboardMonth,
4082
+ rewards,
4083
+ isLoading,
4084
+ onBack,
4085
+ onRefresh
4086
+ }) => {
4087
+ const { width, height } = (0, import_react_use.useWindowSize)();
4088
+ const onBackHandler = onBack ?? (() => {
4089
+ if (typeof window !== "undefined") window.history.back();
4090
+ });
4091
+ const [activeTabIndex, setActiveTabIndex] = (0, import_react71.useState)(1);
4092
+ const tabs = [{ label: "Today" }, { label: "Week" }, { label: "Month" }];
4093
+ const [selectedReward, setSelectedReward] = (0, import_react71.useState)(null);
4094
+ const [isClaiming, setIsClaiming] = (0, import_react71.useState)(false);
4095
+ const [showConfetti, setShowConfetti] = (0, import_react71.useState)(false);
4096
+ const getActiveLeaderboard = () => {
4097
+ if (activeTabIndex === 0) return leaderboardToday || [];
4098
+ if (activeTabIndex === 1) return leaderboardWeek || [];
4099
+ return leaderboardMonth || [];
4100
+ };
4101
+ const activeLeaderboard = getActiveLeaderboard();
4102
+ const firstPlace = activeLeaderboard.find((l) => l.position === 1);
4103
+ const secondPlace = activeLeaderboard.find((l) => l.position === 2);
4104
+ const thirdPlace = activeLeaderboard.find((l) => l.position === 3);
4105
+ const remainingLeaderboard = activeLeaderboard.filter((l) => l.position > 3);
4106
+ const handleClaimReward = async () => {
4107
+ if (!selectedReward || !selectedReward.isEligible || selectedReward.status === "CLAIMED") return;
4108
+ setIsClaiming(true);
4109
+ try {
4110
+ const res = await import_axios.default.post(selectedReward.endpoint, selectedReward.config);
4111
+ if (res.data.success) {
4112
+ setShowConfetti(true);
4113
+ import_react_hot_toast9.default.success(res.data.message || "Reward claimed successfully!");
4114
+ setSelectedReward(null);
4115
+ onRefresh();
4116
+ setTimeout(() => {
4117
+ setShowConfetti(false);
4118
+ }, 6e3);
4119
+ }
4120
+ } catch (error) {
4121
+ import_react_hot_toast9.default.error(error.response?.data?.error || "Failed to claim reward. Please try again.");
4122
+ } finally {
4123
+ setIsClaiming(false);
4124
+ }
4125
+ };
4126
+ return /* @__PURE__ */ import_react71.default.createElement("div", null, /* @__PURE__ */ import_react71.default.createElement("div", { className: "mb-6 flex max-w-3xl w-full mx-auto items-center px-1" }, /* @__PURE__ */ import_react71.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_react71.default.createElement(import_react72.HugeiconsIcon, { icon: import_core_free_icons24.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react71.default.createElement(ManagedToaster, null), showConfetti && /* @__PURE__ */ import_react71.default.createElement("div", { className: "fixed inset-0 z-200 pointer-events-none" }, /* @__PURE__ */ import_react71.default.createElement(import_react_confetti.default, { width, height, recycle: false, numberOfPieces: 500, gravity: 0.15 })), isLoading ? /* @__PURE__ */ import_react71.default.createElement(PageSpinner4, null) : /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full p-4 pt-10 mb-6 flex items-end justify-center gap-2 sm:gap-6 h-64 relative overflow-hidden" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col items-center w-1/3 z-10" }, secondPlace ? /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-black text-[10px] mb-2 truncate max-w-full px-1" }, formatWeb3Name(secondPlace.profile.web3Name)), /* @__PURE__ */ import_react71.default.createElement("div", { className: "relative shrink-0 mb-3" }, /* @__PURE__ */ import_react71.default.createElement(AvatarLogo, { src: secondPlace.profile.avatarUrl, alt: secondPlace.profile.username, name: formatWeb3Name(secondPlace.profile.web3Name), sizeClass: "w-14 h-14 ring-4 ring-orange-100" }), /* @__PURE__ */ import_react71.default.createElement("div", { className: "absolute -bottom-2 right-0 w-5 h-5 rounded-full bg-orange-400 text-white flex items-center justify-center text-[10px] border border-white " }, "2")), /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-orange-200 rounded-t-xl h-24 flex items-center justify-center" }, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-orange-400/30 text-2xl " }, "2nd"))) : /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-neutral-200 rounded-t-xl h-24 mt-auto" })), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col items-center w-1/3 z-20 -mt-8" }, firstPlace ? /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-black text-[10px] mb-2 truncate max-w-full px-1" }, formatWeb3Name(firstPlace.profile.web3Name)), /* @__PURE__ */ import_react71.default.createElement("div", { className: "relative shrink-0 mb-3" }, /* @__PURE__ */ import_react71.default.createElement(AvatarLogo, { src: firstPlace.profile.avatarUrl, alt: firstPlace.profile.username, name: formatWeb3Name(firstPlace.profile.web3Name), sizeClass: "w-17 h-17 ring-4 ring-purple-200" }), /* @__PURE__ */ import_react71.default.createElement("div", { className: "absolute -bottom-2 right-2 w-5 h-5 rounded-full bg-purple-500 text-white flex items-center justify-center text-[10px] border border-white " }, "1")), /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-purple-400 rounded-t-xl h-32 flex items-center justify-center " }, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-white/40 text-3xl tracking-widest" }, "1st"))) : /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-neutral-200 rounded-t-xl h-32 mt-auto" })), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col items-center w-1/3 z-10" }, thirdPlace ? /* @__PURE__ */ import_react71.default.createElement(import_react71.default.Fragment, null, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-black text-[10px] mb-2 truncate max-w-full px-1" }, formatWeb3Name(thirdPlace.profile.web3Name)), /* @__PURE__ */ import_react71.default.createElement("div", { className: "relative shrink-0 mb-3" }, /* @__PURE__ */ import_react71.default.createElement(AvatarLogo, { src: thirdPlace.profile.avatarUrl, alt: thirdPlace.profile.username, name: formatWeb3Name(thirdPlace.profile.web3Name), sizeClass: "w-12 h-12 ring-4 ring-blue-100" }), /* @__PURE__ */ import_react71.default.createElement("div", { className: "absolute -bottom-2 right-0 w-5 h-5 rounded-full bg-blue-400 text-white flex items-center justify-center text-[10px] border border-white " }, "3")), /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-blue-200 rounded-t-xl h-20 flex items-center justify-center" }, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-blue-400/30 text-xl " }, "3rd"))) : /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-neutral-200 rounded-t-xl h-20 mt-auto" }))), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex items-center justify-center mb-6 sm:mb-8 w-full animate-in fade-in duration-300 px-2" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar " }, tabs.map((tab, idx) => {
4127
+ const isActive = activeTabIndex === idx;
4128
+ return /* @__PURE__ */ import_react71.default.createElement(
4129
+ "button",
4130
+ {
4131
+ key: idx,
4132
+ onClick: () => setActiveTabIndex(idx),
4133
+ className: `px-5 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black " : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
4134
+ },
4135
+ tab.label
4136
+ );
4137
+ }))), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col gap-6 w-full" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "bg-white rounded-2xl p-6 " }, /* @__PURE__ */ import_react71.default.createElement("h2", { className: "text-black text-lg mb-4 tracking-tight" }, "Available Tasks"), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col" }, rewards.length === 0 ? /* @__PURE__ */ import_react71.default.createElement("p", { className: "text-xs text-neutral-400 py-6 text-center" }, "No rewards available at the moment.") : rewards.map((reward) => {
4138
+ const statusText = reward.status === "CLAIMED" ? "Claimed" : "Unclaimed";
4139
+ return /* @__PURE__ */ import_react71.default.createElement(
4140
+ "div",
4141
+ {
4142
+ key: reward.id,
4143
+ onClick: () => setSelectedReward(reward),
4144
+ className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
4145
+ },
4146
+ /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full flex items-center justify-center border border-neutral-200 text-black" }, /* @__PURE__ */ import_react71.default.createElement(import_react72.HugeiconsIcon, { icon: import_core_free_icons24.GiftIcon, size: 16 })), /* @__PURE__ */ import_react71.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col items-start gap-0.5 pr-4" }, /* @__PURE__ */ import_react71.default.createElement("p", { className: "text-[13px] text-black truncate w-full" }, reward.title), /* @__PURE__ */ import_react71.default.createElement("p", { className: `text-[10px] inline-flex items-center bg-neutral-50 rounded-full px-2 py-1 text-neutral-500 mt-0.5` }, statusText))),
4147
+ /* @__PURE__ */ import_react71.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1" }, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-[13px] text-black" }, reward.amount))
4148
+ );
4149
+ }))), remainingLeaderboard.length > 0 && /* @__PURE__ */ import_react71.default.createElement("div", { className: "bg-white rounded-2xl p-6 " }, /* @__PURE__ */ import_react71.default.createElement("h2", { className: "text-black text-lg mb-4 tracking-tight" }, "Leaderboard"), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col" }, remainingLeaderboard.map((lb) => /* @__PURE__ */ import_react71.default.createElement("div", { key: lb.profile.username, className: "flex items-center justify-between py-3 min-w-0" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "text-[12px] text-neutral-400 w-4" }, lb.position), /* @__PURE__ */ import_react71.default.createElement(AvatarLogo, { src: lb.profile.avatarUrl, alt: lb.profile.username, name: formatWeb3Name(lb.profile.web3Name), sizeClass: "w-9 h-9" }), /* @__PURE__ */ import_react71.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col" }, /* @__PURE__ */ import_react71.default.createElement("p", { className: "text-[13px] text-black truncate" }, formatWeb3Name(lb.profile.web3Name)), /* @__PURE__ */ import_react71.default.createElement("p", { className: "text-[11px] text-neutral-400 truncate" }, "@", lb.profile.username))), /* @__PURE__ */ import_react71.default.createElement("div", { className: "shrink-0 text-[13px] text-black" }, lb.amount))))))), selectedReward && /* @__PURE__ */ import_react71.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isClaiming && setSelectedReward(null) }), /* @__PURE__ */ import_react71.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-3xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex-1 p-6 flex flex-col items-center text-center mt-2" }, /* @__PURE__ */ import_react71.default.createElement("h2", { className: "text-xl text-black mb-2" }, selectedReward.title), /* @__PURE__ */ import_react71.default.createElement("p", { className: "text-[13px] text-neutral-500 mb-6 leading-relaxed" }, selectedReward.description), selectedReward.progressText && /* @__PURE__ */ import_react71.default.createElement("div", { className: "w-full mb-6" }, /* @__PURE__ */ import_react71.default.createElement("div", { className: `px-4 py-2 rounded-full text-[11px] tracking-wide ${selectedReward.status === "CLAIMED" ? "bg-green-50 text-green-600" : selectedReward.isEligible ? "bg-blue-50 text-blue-600" : "bg-neutral-100 text-neutral-600"}` }, selectedReward.progressText)), /* @__PURE__ */ import_react71.default.createElement("div", { className: " w-full rounded-xl p-4 mb-8 flex flex-col items-center" }, /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 uppercase mb-1" }, "Reward Value"), /* @__PURE__ */ import_react71.default.createElement("span", { className: "text-3xl text-black " }, selectedReward.amount)), /* @__PURE__ */ import_react71.default.createElement("div", { className: "flex flex-col gap-3 w-full" }, /* @__PURE__ */ import_react71.default.createElement(
4150
+ ThreeDActionButton,
4151
+ {
4152
+ onClick: handleClaimReward,
4153
+ isLoading: isClaiming,
4154
+ disabled: isClaiming || selectedReward.status === "CLAIMED" || !selectedReward.isEligible,
4155
+ className: "w-full"
4156
+ },
4157
+ selectedReward.status === "CLAIMED" ? "Already Claimed" : selectedReward.isEligible ? "Claim Reward" : "Not Eligible Yet"
4158
+ ), /* @__PURE__ */ import_react71.default.createElement(
4159
+ "button",
4160
+ {
4161
+ onClick: () => setSelectedReward(null),
4162
+ disabled: isClaiming,
4163
+ className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide mt-2"
4164
+ },
4165
+ "Cancel"
4166
+ )))))));
4167
+ };
4066
4168
  // Annotate the CommonJS export names for ESM import in node:
4067
4169
  0 && (module.exports = {
4068
4170
  AppBento2,
@@ -4098,6 +4200,7 @@ var UniversalVerificationPage = ({
4098
4200
  UniversalOrganizationPage,
4099
4201
  UniversalProfilePage,
4100
4202
  UniversalProfileSettings,
4203
+ UniversalRewardPage,
4101
4204
  UniversalSecurityPage,
4102
4205
  UniversalSidebar,
4103
4206
  UniversalTransactionPage,
package/dist/index.mjs CHANGED
@@ -470,7 +470,7 @@ function AuthFormInner({
470
470
  else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
471
471
  else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
472
472
  else handleAuthRequestSubmit();
473
- } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block uppercase" }, "Invitation Code"), /* @__PURE__ */ React5.createElement(
473
+ } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Invitation Code"), /* @__PURE__ */ React5.createElement(
474
474
  "input",
475
475
  {
476
476
  type: "text",
@@ -478,7 +478,7 @@ function AuthFormInner({
478
478
  onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
479
479
  required: true,
480
480
  autoFocus: true,
481
- className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest font-mono",
481
+ className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
482
482
  placeholder: "Invitation Code"
483
483
  }
484
484
  ))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ React5.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React5.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React5.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React5.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ React5.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ React5.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
@@ -506,7 +506,7 @@ function AuthFormInner({
506
506
  {
507
507
  onClick: triggerPasskeyLogin,
508
508
  disabled: isSubmitting,
509
- className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs font-medium tracking-wide transition-colors outline-none disabled:opacity-50"
509
+ className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
510
510
  },
511
511
  "Use Passkey / Biometrics"
512
512
  ))))));
@@ -1395,15 +1395,6 @@ var UniversalTransactionPage = ({
1395
1395
  className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide mt-2"
1396
1396
  },
1397
1397
  "Report Transaction"
1398
- ), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ React15.createElement(
1399
- "a",
1400
- {
1401
- href: `https://basescan.org/tx/${selectedTransaction.reference}`,
1402
- target: "_blank",
1403
- rel: "noopener noreferrer",
1404
- className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide mt-2"
1405
- },
1406
- "View in block explorer"
1407
1398
  ))))), isDirectionModalOpen && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ React15.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React15.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Payment Type")), /* @__PURE__ */ React15.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ React15.createElement(
1408
1399
  "button",
1409
1400
  {
@@ -2137,7 +2128,7 @@ var UniversalCardPage = ({
2137
2128
  },
2138
2129
  className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : canFlip ? "cursor-pointer" : "cursor-default"}`,
2139
2130
  style: {
2140
- height: 175,
2131
+ height: 180,
2141
2132
  transformStyle: "preserve-3d",
2142
2133
  transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
2143
2134
  }
@@ -4071,6 +4062,120 @@ var UniversalVerificationPage = ({
4071
4062
  }
4072
4063
  ))));
4073
4064
  };
4065
+
4066
+ // src/components/UniversalRewardPage.tsx
4067
+ import React43, { useState as useState27 } from "react";
4068
+ import axios from "axios";
4069
+ import toast8 from "react-hot-toast";
4070
+ import Confetti from "react-confetti";
4071
+ import { useWindowSize } from "react-use";
4072
+ import { HugeiconsIcon as HugeiconsIcon29 } from "@hugeicons/react";
4073
+ import {
4074
+ GiftIcon,
4075
+ Loading03Icon as Loading03Icon17,
4076
+ ArrowLeft01Icon as ArrowLeft01Icon9
4077
+ } from "@hugeicons/core-free-icons";
4078
+ var formatWeb3Name = (name) => {
4079
+ if (!name) return "";
4080
+ return name.toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase());
4081
+ };
4082
+ var PageSpinner4 = () => /* @__PURE__ */ React43.createElement("div", { className: "flex justify-center items-center py-12 w-full" }, /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: Loading03Icon17, size: 32, className: "animate-spin mb-4 text-black" }));
4083
+ var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
4084
+ const [isLoaded, setIsLoaded] = useState27(false);
4085
+ const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
4086
+ const finalSrc = src || fallbackUrl;
4087
+ return /* @__PURE__ */ React43.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-[3px] border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: Loading03Icon17, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React43.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
4088
+ };
4089
+ var UniversalRewardPage = ({
4090
+ leaderboardToday,
4091
+ leaderboardWeek,
4092
+ leaderboardMonth,
4093
+ rewards,
4094
+ isLoading,
4095
+ onBack,
4096
+ onRefresh
4097
+ }) => {
4098
+ const { width, height } = useWindowSize();
4099
+ const onBackHandler = onBack ?? (() => {
4100
+ if (typeof window !== "undefined") window.history.back();
4101
+ });
4102
+ const [activeTabIndex, setActiveTabIndex] = useState27(1);
4103
+ const tabs = [{ label: "Today" }, { label: "Week" }, { label: "Month" }];
4104
+ const [selectedReward, setSelectedReward] = useState27(null);
4105
+ const [isClaiming, setIsClaiming] = useState27(false);
4106
+ const [showConfetti, setShowConfetti] = useState27(false);
4107
+ const getActiveLeaderboard = () => {
4108
+ if (activeTabIndex === 0) return leaderboardToday || [];
4109
+ if (activeTabIndex === 1) return leaderboardWeek || [];
4110
+ return leaderboardMonth || [];
4111
+ };
4112
+ const activeLeaderboard = getActiveLeaderboard();
4113
+ const firstPlace = activeLeaderboard.find((l) => l.position === 1);
4114
+ const secondPlace = activeLeaderboard.find((l) => l.position === 2);
4115
+ const thirdPlace = activeLeaderboard.find((l) => l.position === 3);
4116
+ const remainingLeaderboard = activeLeaderboard.filter((l) => l.position > 3);
4117
+ const handleClaimReward = async () => {
4118
+ if (!selectedReward || !selectedReward.isEligible || selectedReward.status === "CLAIMED") return;
4119
+ setIsClaiming(true);
4120
+ try {
4121
+ const res = await axios.post(selectedReward.endpoint, selectedReward.config);
4122
+ if (res.data.success) {
4123
+ setShowConfetti(true);
4124
+ toast8.success(res.data.message || "Reward claimed successfully!");
4125
+ setSelectedReward(null);
4126
+ onRefresh();
4127
+ setTimeout(() => {
4128
+ setShowConfetti(false);
4129
+ }, 6e3);
4130
+ }
4131
+ } catch (error) {
4132
+ toast8.error(error.response?.data?.error || "Failed to claim reward. Please try again.");
4133
+ } finally {
4134
+ setIsClaiming(false);
4135
+ }
4136
+ };
4137
+ return /* @__PURE__ */ React43.createElement("div", null, /* @__PURE__ */ React43.createElement("div", { className: "mb-6 flex max-w-3xl w-full mx-auto items-center px-1" }, /* @__PURE__ */ React43.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: ArrowLeft01Icon9, size: 16 }), " Back")), /* @__PURE__ */ React43.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React43.createElement(ManagedToaster, null), showConfetti && /* @__PURE__ */ React43.createElement("div", { className: "fixed inset-0 z-200 pointer-events-none" }, /* @__PURE__ */ React43.createElement(Confetti, { width, height, recycle: false, numberOfPieces: 500, gravity: 0.15 })), isLoading ? /* @__PURE__ */ React43.createElement(PageSpinner4, null) : /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement("div", { className: "w-full p-4 pt-10 mb-6 flex items-end justify-center gap-2 sm:gap-6 h-64 relative overflow-hidden" }, /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col items-center w-1/3 z-10" }, secondPlace ? /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement("span", { className: "text-black text-[10px] mb-2 truncate max-w-full px-1" }, formatWeb3Name(secondPlace.profile.web3Name)), /* @__PURE__ */ React43.createElement("div", { className: "relative shrink-0 mb-3" }, /* @__PURE__ */ React43.createElement(AvatarLogo, { src: secondPlace.profile.avatarUrl, alt: secondPlace.profile.username, name: formatWeb3Name(secondPlace.profile.web3Name), sizeClass: "w-14 h-14 ring-4 ring-orange-100" }), /* @__PURE__ */ React43.createElement("div", { className: "absolute -bottom-2 right-0 w-5 h-5 rounded-full bg-orange-400 text-white flex items-center justify-center text-[10px] border border-white " }, "2")), /* @__PURE__ */ React43.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-orange-200 rounded-t-xl h-24 flex items-center justify-center" }, /* @__PURE__ */ React43.createElement("span", { className: "text-orange-400/30 text-2xl " }, "2nd"))) : /* @__PURE__ */ React43.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-neutral-200 rounded-t-xl h-24 mt-auto" })), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col items-center w-1/3 z-20 -mt-8" }, firstPlace ? /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement("span", { className: "text-black text-[10px] mb-2 truncate max-w-full px-1" }, formatWeb3Name(firstPlace.profile.web3Name)), /* @__PURE__ */ React43.createElement("div", { className: "relative shrink-0 mb-3" }, /* @__PURE__ */ React43.createElement(AvatarLogo, { src: firstPlace.profile.avatarUrl, alt: firstPlace.profile.username, name: formatWeb3Name(firstPlace.profile.web3Name), sizeClass: "w-17 h-17 ring-4 ring-purple-200" }), /* @__PURE__ */ React43.createElement("div", { className: "absolute -bottom-2 right-2 w-5 h-5 rounded-full bg-purple-500 text-white flex items-center justify-center text-[10px] border border-white " }, "1")), /* @__PURE__ */ React43.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-purple-400 rounded-t-xl h-32 flex items-center justify-center " }, /* @__PURE__ */ React43.createElement("span", { className: "text-white/40 text-3xl tracking-widest" }, "1st"))) : /* @__PURE__ */ React43.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-neutral-200 rounded-t-xl h-32 mt-auto" })), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col items-center w-1/3 z-10" }, thirdPlace ? /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement("span", { className: "text-black text-[10px] mb-2 truncate max-w-full px-1" }, formatWeb3Name(thirdPlace.profile.web3Name)), /* @__PURE__ */ React43.createElement("div", { className: "relative shrink-0 mb-3" }, /* @__PURE__ */ React43.createElement(AvatarLogo, { src: thirdPlace.profile.avatarUrl, alt: thirdPlace.profile.username, name: formatWeb3Name(thirdPlace.profile.web3Name), sizeClass: "w-12 h-12 ring-4 ring-blue-100" }), /* @__PURE__ */ React43.createElement("div", { className: "absolute -bottom-2 right-0 w-5 h-5 rounded-full bg-blue-400 text-white flex items-center justify-center text-[10px] border border-white " }, "3")), /* @__PURE__ */ React43.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-blue-200 rounded-t-xl h-20 flex items-center justify-center" }, /* @__PURE__ */ React43.createElement("span", { className: "text-blue-400/30 text-xl " }, "3rd"))) : /* @__PURE__ */ React43.createElement("div", { className: "w-full bg-linear-to-t from-neutral-100 to-neutral-200 rounded-t-xl h-20 mt-auto" }))), /* @__PURE__ */ React43.createElement("div", { className: "flex items-center justify-center mb-6 sm:mb-8 w-full animate-in fade-in duration-300 px-2" }, /* @__PURE__ */ React43.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar " }, tabs.map((tab, idx) => {
4138
+ const isActive = activeTabIndex === idx;
4139
+ return /* @__PURE__ */ React43.createElement(
4140
+ "button",
4141
+ {
4142
+ key: idx,
4143
+ onClick: () => setActiveTabIndex(idx),
4144
+ className: `px-5 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black " : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
4145
+ },
4146
+ tab.label
4147
+ );
4148
+ }))), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col gap-6 w-full" }, /* @__PURE__ */ React43.createElement("div", { className: "bg-white rounded-2xl p-6 " }, /* @__PURE__ */ React43.createElement("h2", { className: "text-black text-lg mb-4 tracking-tight" }, "Available Tasks"), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col" }, rewards.length === 0 ? /* @__PURE__ */ React43.createElement("p", { className: "text-xs text-neutral-400 py-6 text-center" }, "No rewards available at the moment.") : rewards.map((reward) => {
4149
+ const statusText = reward.status === "CLAIMED" ? "Claimed" : "Unclaimed";
4150
+ return /* @__PURE__ */ React43.createElement(
4151
+ "div",
4152
+ {
4153
+ key: reward.id,
4154
+ onClick: () => setSelectedReward(reward),
4155
+ className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
4156
+ },
4157
+ /* @__PURE__ */ React43.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React43.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full flex items-center justify-center border border-neutral-200 text-black" }, /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: GiftIcon, size: 16 })), /* @__PURE__ */ React43.createElement("div", { className: "min-w-0 flex-1 flex flex-col items-start gap-0.5 pr-4" }, /* @__PURE__ */ React43.createElement("p", { className: "text-[13px] text-black truncate w-full" }, reward.title), /* @__PURE__ */ React43.createElement("p", { className: `text-[10px] inline-flex items-center bg-neutral-50 rounded-full px-2 py-1 text-neutral-500 mt-0.5` }, statusText))),
4158
+ /* @__PURE__ */ React43.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1" }, /* @__PURE__ */ React43.createElement("span", { className: "text-[13px] text-black" }, reward.amount))
4159
+ );
4160
+ }))), remainingLeaderboard.length > 0 && /* @__PURE__ */ React43.createElement("div", { className: "bg-white rounded-2xl p-6 " }, /* @__PURE__ */ React43.createElement("h2", { className: "text-black text-lg mb-4 tracking-tight" }, "Leaderboard"), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col" }, remainingLeaderboard.map((lb) => /* @__PURE__ */ React43.createElement("div", { key: lb.profile.username, className: "flex items-center justify-between py-3 min-w-0" }, /* @__PURE__ */ React43.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React43.createElement("div", { className: "text-[12px] text-neutral-400 w-4" }, lb.position), /* @__PURE__ */ React43.createElement(AvatarLogo, { src: lb.profile.avatarUrl, alt: lb.profile.username, name: formatWeb3Name(lb.profile.web3Name), sizeClass: "w-9 h-9" }), /* @__PURE__ */ React43.createElement("div", { className: "min-w-0 flex-1 flex flex-col" }, /* @__PURE__ */ React43.createElement("p", { className: "text-[13px] text-black truncate" }, formatWeb3Name(lb.profile.web3Name)), /* @__PURE__ */ React43.createElement("p", { className: "text-[11px] text-neutral-400 truncate" }, "@", lb.profile.username))), /* @__PURE__ */ React43.createElement("div", { className: "shrink-0 text-[13px] text-black" }, lb.amount))))))), selectedReward && /* @__PURE__ */ React43.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React43.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isClaiming && setSelectedReward(null) }), /* @__PURE__ */ React43.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-3xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React43.createElement("div", { className: "flex-1 p-6 flex flex-col items-center text-center mt-2" }, /* @__PURE__ */ React43.createElement("h2", { className: "text-xl text-black mb-2" }, selectedReward.title), /* @__PURE__ */ React43.createElement("p", { className: "text-[13px] text-neutral-500 mb-6 leading-relaxed" }, selectedReward.description), selectedReward.progressText && /* @__PURE__ */ React43.createElement("div", { className: "w-full mb-6" }, /* @__PURE__ */ React43.createElement("div", { className: `px-4 py-2 rounded-full text-[11px] tracking-wide ${selectedReward.status === "CLAIMED" ? "bg-green-50 text-green-600" : selectedReward.isEligible ? "bg-blue-50 text-blue-600" : "bg-neutral-100 text-neutral-600"}` }, selectedReward.progressText)), /* @__PURE__ */ React43.createElement("div", { className: " w-full rounded-xl p-4 mb-8 flex flex-col items-center" }, /* @__PURE__ */ React43.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 uppercase mb-1" }, "Reward Value"), /* @__PURE__ */ React43.createElement("span", { className: "text-3xl text-black " }, selectedReward.amount)), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col gap-3 w-full" }, /* @__PURE__ */ React43.createElement(
4161
+ ThreeDActionButton,
4162
+ {
4163
+ onClick: handleClaimReward,
4164
+ isLoading: isClaiming,
4165
+ disabled: isClaiming || selectedReward.status === "CLAIMED" || !selectedReward.isEligible,
4166
+ className: "w-full"
4167
+ },
4168
+ selectedReward.status === "CLAIMED" ? "Already Claimed" : selectedReward.isEligible ? "Claim Reward" : "Not Eligible Yet"
4169
+ ), /* @__PURE__ */ React43.createElement(
4170
+ "button",
4171
+ {
4172
+ onClick: () => setSelectedReward(null),
4173
+ disabled: isClaiming,
4174
+ className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide mt-2"
4175
+ },
4176
+ "Cancel"
4177
+ )))))));
4178
+ };
4074
4179
  export {
4075
4180
  AppBento2,
4076
4181
  ConsultantShowcase,
@@ -4105,6 +4210,7 @@ export {
4105
4210
  UniversalOrganizationPage,
4106
4211
  UniversalProfilePage,
4107
4212
  UniversalProfileSettings,
4213
+ UniversalRewardPage,
4108
4214
  UniversalSecurityPage,
4109
4215
  UniversalSidebar,
4110
4216
  UniversalTransactionPage,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "13.0.35",
3
+ "version": "13.0.45",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",
@@ -41,9 +41,12 @@
41
41
  "@hugeicons/react": "^1.1.1",
42
42
  "@simplewebauthn/browser": "^13.3.0",
43
43
  "@simplewebauthn/server": "^13.3.2",
44
+ "axios": "^1.18.1",
44
45
  "clsx": "^2.1.1",
46
+ "react-confetti": "^6.4.0",
45
47
  "react-google-recaptcha-v3": "^1.11.0",
46
48
  "react-hot-toast": "^2.6.0",
49
+ "react-use": "^17.6.1",
47
50
  "tailwind-merge": "^3.6.0",
48
51
  "tw-animate-css": "^1.4.0"
49
52
  },