+ {isEligibleForRewards
+ ? "π You're eligible! Withdraw your rewards anytime."
+ : 'Invite friends and earn rewards when they buy tokens'}
+
-
- Collect your rewards
-
{/* Content */}
-
+
{/* Description - Left Side */}
-
-
- Rewards accumulate as your direct invitees participate in token sales. You can withdraw once
- {' '}
-
- {MIN_INVITEES}
+
+
+
+ Once
+ {' '}
+
+ {MIN_INVITEES}
+ {' '}
+ direct invitees
+
{' '}
- direct invitees
-
- {' '}
- have each
- spent at least
-
- {MIN_SPENT_AE}
+ have each spent at least
{' '}
- AE
-
- {' '}
- (cumulative).
-
-
+
+ {MIN_SPENT_AE}
+ {' '}
+ AE
+
+ {' '}
+ (cumulative) in token sales, you can withdraw accumulated rewards.
+ {' '}
+ Rewards build as your invitees participate.
+
+
+
+
+
+
Rewards reflect on-chain activity from your invitees
+
+
+ β
+
Withdraw after you meet the threshold and have a positive balance
+
+
+ β
+
Track per-invitee progress toward the spending minimum
+
+
+
Note: eligibility and rewards depend on on-chain activity and are not guaranteed.
@@ -305,10 +403,19 @@ const CollectRewardsCard = () => {
{/* Progress and Actions - Right Side */}
+ Create unique invite links and start earning rewards
+
-
- Generate Invites
-
{/* Description - Left Side */}
-
-
- Create invite links by funding a one-time AE reward per invite. Each
- link contains a secret code; when someone opens the link and claims
- it, they receive the funded reward and the invitation is marked as
- used.
-
-
- You can generate multiple links at once and share them with friends
- or your community. You can also revoke an invite before itβs claimed.
-
-
- Important: save your links before closing the popup. The secret code
- is only shown to you at creation time.
+
+
+
+ Earn up to 0.5%
+ {' '}
+ of every token purchase made by your invitees. Fund a one-time AE reward per invite;
+ {' '}
+ when someone claims the link, they receive it and the invite is used.
+
+
+
+
+ β
+
Fund AE to create unique invite links
+
+
+ β
+
Share links via social media or direct message
+
+
+ β
+
+ Earn automatically when invitees buy tokens; you can revoke unclaimed invites
+
+
+
+
+ Important: save your links before closing the popup.
+ {' '}
+ The secret is only shown at creation time.
diff --git a/src/features/trending/components/Invitation/StatsSection.tsx b/src/features/trending/components/Invitation/StatsSection.tsx
new file mode 100644
index 000000000..d3eeb2705
--- /dev/null
+++ b/src/features/trending/components/Invitation/StatsSection.tsx
@@ -0,0 +1,95 @@
+import { Trophy, TrendingUp, Users } from "lucide-react";
+
+interface StatsSectionProps {
+ className?: string;
+}
+
+export default function StatsSection({ className }: StatsSectionProps) {
+ // Placeholder stats - these would be fetched from API in real implementation
+ const stats = {
+ totalRewardsEarned: 0, // Would be fetched from API
+ totalInvitees: 0, // Would be fetched from API
+ topEarner: null as { address: string; amount: number } | null, // Would be fetched from API
+ };
+
+ // Only show if we have data (for now, showing placeholder structure)
+ const showStats = false; // Set to true when API integration is ready
+
+ if (!showStats) {
+ return null;
+ }
+
+ return (
+
+ {/* Animated background */}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ Community Stats
+
+
+ See how the community is earning together
+
+
+
+
+ {/* Stats Grid */}
+
+ {/* Total Rewards */}
+
+
+
+
+
+
+ Total Rewards
+
+
+
+ {/* Would display actual stats */}
+
+
+
+ {/* Total Invitees */}
+
+
+
+
+
+
+ Total Invitees
+
+
+
+ {/* Would display actual stats */}
+
+
+
+ {/* Top Earner */}
+ {stats.topEarner && (
+
+
+
+
+
+
+ Top Earner
+
+
+
+ {/* Would display top earner address */}
+
+
+ )}
+
+
+
+ );
+}
+
diff --git a/src/features/trending/components/Invitation/StepGuide.tsx b/src/features/trending/components/Invitation/StepGuide.tsx
new file mode 100644
index 000000000..17063791d
--- /dev/null
+++ b/src/features/trending/components/Invitation/StepGuide.tsx
@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { ChevronRight } from "lucide-react";
+
+interface Step {
+ number: number;
+ title: string;
+ description: string;
+ icon: string;
+}
+
+const steps: Step[] = [
+ {
+ number: 1,
+ title: "Generate Invite Links",
+ description: "Stake AE tokens to create unique invite links. Each invite requires a small amount of AE.",
+ icon: "π",
+ },
+ {
+ number: 2,
+ title: "Share with Friends",
+ description: "Send your invite links to friends, community members, or anyone interested in trend tokens.",
+ icon: "π€",
+ },
+ {
+ number: 3,
+ title: "They Buy Tokens",
+ description: "When your invitees purchase trend tokens, you automatically earn a percentage of their buy amount.",
+ icon: "π",
+ },
+ {
+ number: 4,
+ title: "Collect Rewards",
+ description: "Once 4+ invitees have purchased tokens, withdraw your accumulated rewards anytime.",
+ icon: "π°",
+ },
+];
+
+interface StepGuideProps {
+ onDismiss?: () => void;
+}
+
+export default function StepGuide({ onDismiss }: StepGuideProps) {
+ const [expandedStep, setExpandedStep] = useState(null);
+
+ return (
+
+ );
+}
+
diff --git a/src/features/trending/components/Invitation/index.ts b/src/features/trending/components/Invitation/index.ts
index 360b91dd8..1b7df57d7 100644
--- a/src/features/trending/components/Invitation/index.ts
+++ b/src/features/trending/components/Invitation/index.ts
@@ -2,3 +2,6 @@ export { default as InviteAndEarnCard } from './InviteAndEarnCard';
export { default as InvitationList } from './InvitationList';
export { default as CollectRewardsCard } from './CollectRewardsCard';
export { default as CollectInvitationLinkCard } from './CollectInvitationLinkCard';
+export { default as StepGuide } from './StepGuide';
+export { default as EarningExplanation } from './EarningExplanation';
+export { default as StatsSection } from './StatsSection';
diff --git a/src/views/Trendminer/Invite.tsx b/src/views/Trendminer/Invite.tsx
index c916786d5..3a7abcabb 100644
--- a/src/views/Trendminer/Invite.tsx
+++ b/src/views/Trendminer/Invite.tsx
@@ -8,104 +8,139 @@ import {
CollectRewardsCard,
InvitationList,
InviteAndEarnCard,
+ StepGuide,
+ EarningExplanation,
+ StatsSection,
} from '../../features/trending/components/Invitation';
import Shell from '../../components/layout/Shell';
import { useAeSdk } from '../../hooks';
+import { useInvitations } from '../../features/trending/hooks/useInvitations';
+import NetworkVisualization from '../../features/trending/components/Invitation/graphics/NetworkVisualization';
+import EarningFlow from '../../features/trending/components/Invitation/graphics/EarningFlow';
export default function Invite() {
const { activeAccount } = useAeSdk();
- const [showInfo, setShowInfo] = useState(() => {
+ const { invitations } = useInvitations();
+ const [showStepGuide, setShowStepGuide] = useState(() => {
try {
- return localStorage.getItem('invite_info_dismissed') !== '1';
+ if (localStorage.getItem('invite_step_guide_dismissed') === '1') return false;
+ if (localStorage.getItem('invite_info_dismissed') === '1') return false;
+ return true;
} catch {
return true;
}
});
+ const handleDismissStepGuide = () => {
+ try {
+ localStorage.setItem('invite_step_guide_dismissed', '1');
+ localStorage.setItem('invite_info_dismissed', '1');
+ } catch {}
+ setShowStepGuide(false);
+ };
+
+ const inviteCount = invitations?.length || 0;
+
return (
-
- {/* Hero Section */}
-
-
-
- Invite & Earn
-
-
- Build your network, earn rewards
+
+ {/* Hero Section - Redesigned */}
+
+
+
+
+
+ Invite & Earn
+
+
+
+ Earn up to
+ {' '}
+
+ 0.5%
+
+ {' '}
+ of Every Token Purchase
-
-
- {/* Info Card */}
- {showInfo && (
-
- {/* Close button - absolute positioned on all screen sizes for better space usage */}
-
+ Invite friends to join the platform.
+ {' '}
+ When they buy trend tokens, you automatically earn a percentage of their purchases.
+ {' '}
+ Simple, transparent, rewarding.
+
-
-
- π‘
+ {/* Quick Stats */}
+
+
+
+ Up to 0.5%
+
+
Commission Rate
-
-
- How it works
-
-
-
-
- 1
-
-
- Generate invite links by funding a one-time AE reward per invite
-
-
-
-
- 2
-
-
- Share links with friends and community
-
-
-
-
- 3
-
-
- After 4 unique invitees buy tokens, you can withdraw accumulated rewards
-