@chainloyalty/react 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -8,7 +8,9 @@ export { RewardsDashboard } from './RewardsDashboard.js';
 export type { RewardsDashboardProps, Badge, RewardHistoryItem, TierInfo, DashboardData } from './RewardsDashboard.js';
 export { Leaderboard } from './Leaderboard.js';
 export type { LeaderboardProps, LeaderboardEntry, LeaderboardTimeframe } from './Leaderboard.js';
+export { RewardsDashboardPage } from './pages/RewardsDashboardPage.js';
+export { LeaderboardPage } from './pages/LeaderboardPage.js';
 export { getThemeColors, getThemeStylesheet, createThemeStyles } from './theme.js';
 export type { ThemeColors } from './theme.js';
-export declare const PACKAGE_VERSION = "1.0.0";
+export declare const PACKAGE_VERSION = "1.3.0";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGjG,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACnF,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9C,eAAO,MAAM,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGjG,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACnF,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9C,eAAO,MAAM,eAAe,UAAU,CAAC"}

package/dist/index.js

@@ -7,8 +7,11 @@ export { useTrackEvent, trackEvent } from './useTrackEvent.js';
 // Export components
 export { RewardsDashboard } from './RewardsDashboard.js';
 export { Leaderboard } from './Leaderboard.js';
+// Export page components
+export { RewardsDashboardPage } from './pages/RewardsDashboardPage.js';
+export { LeaderboardPage } from './pages/LeaderboardPage.js';
 // Export theme utilities
 export { getThemeColors, getThemeStylesheet, createThemeStyles } from './theme.js';
 // Version info
-export const PACKAGE_VERSION = '1.0.0';
+export const PACKAGE_VERSION = '1.3.0';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAe;AACf,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG/D,oBAAoB;AACpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,yBAAyB;AACzB,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGnF,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAe;AACf,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG/D,oBAAoB;AACpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,yBAAyB;AACzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,yBAAyB;AACzB,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGnF,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC"}

package/dist/pages/LeaderboardPage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @chainloyalty/react - Leaderboard Page
+ *
+ * A full-page wrapper for the Leaderboard component.
+ * Use this in your app's routing to display the leaderboard on a dedicated page.
+ *
+ * Example usage in your app's router:
+ * ```tsx
+ * import { LeaderboardPage } from '@chainloyalty/react';
+ *
+ * // Add to your routes
+ * { path: '/leaderboard', element: <LeaderboardPage walletAddress={userWallet} /> }
+ * ```
+ */
+import React from 'react';
+import { type LeaderboardProps } from '../Leaderboard.js';
+export declare const LeaderboardPage: React.FC<LeaderboardProps>;
+export default LeaderboardPage;
+//# sourceMappingURL=LeaderboardPage.d.ts.map

package/dist/pages/LeaderboardPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeaderboardPage.d.ts","sourceRoot":"","sources":["../../src/pages/LeaderboardPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuBtD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/pages/LeaderboardPage.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Leaderboard } from '../Leaderboard.js';
+export const LeaderboardPage = (props) => {
+    return (_jsxs("div", { className: "min-h-screen", style: { backgroundColor: 'hsl(var(--background))' }, children: [_jsx("div", { className: "border-b", style: { borderColor: 'hsl(var(--border))' }, children: _jsxs("div", { className: "container mx-auto px-4 py-6", children: [_jsx("h1", { className: "text-3xl font-bold", style: { color: 'hsl(var(--foreground))' }, children: "Leaderboard" }), _jsx("p", { className: "text-sm mt-1", style: { color: 'hsl(var(--muted-foreground))' }, children: "See how you rank against other community members" })] }) }), _jsx("div", { className: "container mx-auto px-4 py-8", children: _jsx("div", { className: "max-w-6xl mx-auto", children: _jsx(Leaderboard, { ...props }) }) })] }));
+};
+export default LeaderboardPage;
+//# sourceMappingURL=LeaderboardPage.js.map

package/dist/pages/LeaderboardPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeaderboardPage.js","sourceRoot":"","sources":["../../src/pages/LeaderboardPage.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AAEvE,MAAM,CAAC,MAAM,eAAe,GAA+B,CAAC,KAAK,EAAE,EAAE;IACnE,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,aAEhF,cAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,oBAAoB,EAAE,YACpE,eAAK,SAAS,EAAC,6BAA6B,aAC1C,aAAI,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,4BAExE,EACL,YAAG,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,iEAExE,IACA,GACF,EAGN,cAAK,SAAS,EAAC,6BAA6B,YAC1C,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,WAAW,OAAK,KAAK,GAAI,GACtB,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/pages/RewardsDashboardPage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @chainloyalty/react - RewardsDashboard Page
+ *
+ * A full-page wrapper for the RewardsDashboard component.
+ * Use this in your app's routing to display rewards on a dedicated page.
+ *
+ * Example usage in your app's router:
+ * ```tsx
+ * import { RewardsDashboardPage } from '@chainloyalty/react';
+ *
+ * // Add to your routes
+ * { path: '/rewards', element: <RewardsDashboardPage walletAddress={userWallet} /> }
+ * ```
+ */
+import React from 'react';
+import { type RewardsDashboardProps } from '../RewardsDashboard.js';
+export declare const RewardsDashboardPage: React.FC<RewardsDashboardProps>;
+export default RewardsDashboardPage;
+//# sourceMappingURL=RewardsDashboardPage.d.ts.map

package/dist/pages/RewardsDashboardPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardsDashboardPage.d.ts","sourceRoot":"","sources":["../../src/pages/RewardsDashboardPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEtF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAuBhE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/pages/RewardsDashboardPage.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RewardsDashboard } from '../RewardsDashboard.js';
+export const RewardsDashboardPage = (props) => {
+    return (_jsxs("div", { className: "min-h-screen", style: { backgroundColor: 'hsl(var(--background))' }, children: [_jsx("div", { className: "border-b", style: { borderColor: 'hsl(var(--border))' }, children: _jsxs("div", { className: "container mx-auto px-4 py-6", children: [_jsx("h1", { className: "text-3xl font-bold", style: { color: 'hsl(var(--foreground))' }, children: "Your Rewards" }), _jsx("p", { className: "text-sm mt-1", style: { color: 'hsl(var(--muted-foreground))' }, children: "Track your points, badges, achievements, and tier level" })] }) }), _jsx("div", { className: "container mx-auto px-4 py-8", children: _jsx("div", { className: "max-w-4xl mx-auto", children: _jsx(RewardsDashboard, { ...props }) }) })] }));
+};
+export default RewardsDashboardPage;
+//# sourceMappingURL=RewardsDashboardPage.js.map

package/dist/pages/RewardsDashboardPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardsDashboardPage.js","sourceRoot":"","sources":["../../src/pages/RewardsDashboardPage.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,wBAAwB,CAAC;AAEtF,MAAM,CAAC,MAAM,oBAAoB,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC7E,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,wBAAwB,EAAE,aAEhF,cAAK,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,oBAAoB,EAAE,YACpE,eAAK,SAAS,EAAC,6BAA6B,aAC1C,aAAI,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,6BAExE,EACL,YAAG,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,wEAExE,IACA,GACF,EAGN,cAAK,SAAS,EAAC,6BAA6B,YAC1C,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,gBAAgB,OAAK,KAAK,GAAI,GAC3B,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@chainloyalty/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
-  "description": "ChainLoyalty React Components - Event tracking, rewards dashboard, and leaderboard with automatic light/dark theme detection",
+  "description": "ChainLoyalty React Components - Rewards dashboard and leaderboard pages with automatic theme detection. Install and add routes to your app.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/index.ts

@@ -14,9 +14,13 @@ export type { RewardsDashboardProps, Badge, RewardHistoryItem, TierInfo, Dashboa
 export { Leaderboard } from './Leaderboard.js';
 export type { LeaderboardProps, LeaderboardEntry, LeaderboardTimeframe } from './Leaderboard.js';
 
+// Export page components
+export { RewardsDashboardPage } from './pages/RewardsDashboardPage.js';
+export { LeaderboardPage } from './pages/LeaderboardPage.js';
+
 // Export theme utilities
 export { getThemeColors, getThemeStylesheet, createThemeStyles } from './theme.js';
 export type { ThemeColors } from './theme.js';
 
 // Version info
-export const PACKAGE_VERSION = '1.0.0';
+export const PACKAGE_VERSION = '1.3.0';

package/src/pages/LeaderboardPage.tsx

@@ -0,0 +1,44 @@
+/**
+ * @chainloyalty/react - Leaderboard Page
+ * 
+ * A full-page wrapper for the Leaderboard component.
+ * Use this in your app's routing to display the leaderboard on a dedicated page.
+ * 
+ * Example usage in your app's router:
+ * ```tsx
+ * import { LeaderboardPage } from '@chainloyalty/react';
+ * 
+ * // Add to your routes
+ * { path: '/leaderboard', element: <LeaderboardPage walletAddress={userWallet} /> }
+ * ```
+ */
+
+import React from 'react';
+import { Leaderboard, type LeaderboardProps } from '../Leaderboard.js';
+
+export const LeaderboardPage: React.FC<LeaderboardProps> = (props) => {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'hsl(var(--background))' }}>
+      {/* Header */}
+      <div className="border-b" style={{ borderColor: 'hsl(var(--border))' }}>
+        <div className="container mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold" style={{ color: 'hsl(var(--foreground))' }}>
+            Leaderboard
+          </h1>
+          <p className="text-sm mt-1" style={{ color: 'hsl(var(--muted-foreground))' }}>
+            See how you rank against other community members
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-6xl mx-auto">
+          <Leaderboard {...props} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LeaderboardPage;

package/src/pages/RewardsDashboardPage.tsx

@@ -0,0 +1,44 @@
+/**
+ * @chainloyalty/react - RewardsDashboard Page
+ * 
+ * A full-page wrapper for the RewardsDashboard component.
+ * Use this in your app's routing to display rewards on a dedicated page.
+ * 
+ * Example usage in your app's router:
+ * ```tsx
+ * import { RewardsDashboardPage } from '@chainloyalty/react';
+ * 
+ * // Add to your routes
+ * { path: '/rewards', element: <RewardsDashboardPage walletAddress={userWallet} /> }
+ * ```
+ */
+
+import React from 'react';
+import { RewardsDashboard, type RewardsDashboardProps } from '../RewardsDashboard.js';
+
+export const RewardsDashboardPage: React.FC<RewardsDashboardProps> = (props) => {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'hsl(var(--background))' }}>
+      {/* Header */}
+      <div className="border-b" style={{ borderColor: 'hsl(var(--border))' }}>
+        <div className="container mx-auto px-4 py-6">
+          <h1 className="text-3xl font-bold" style={{ color: 'hsl(var(--foreground))' }}>
+            Your Rewards
+          </h1>
+          <p className="text-sm mt-1" style={{ color: 'hsl(var(--muted-foreground))' }}>
+            Track your points, badges, achievements, and tier level
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <RewardsDashboard {...props} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RewardsDashboardPage;