= ({
willChange: "transform, opacity",
}}
>
+ {/* Light theme image */}
+
+ {/* Dark theme image */}
)}
diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx
index 859def9..6ae76af 100644
--- a/src/app/demo/page.tsx
+++ b/src/app/demo/page.tsx
@@ -1,19 +1,11 @@
"use client";
-import { useState } from "react";
-import Image from "next/image";
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card";
+import React, { useState, useEffect, useRef } from "react";
+import type { JSX } from "react";
import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Progress } from "@/components/ui/progress";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import Link from "next/link";
+import Image from "next/image";
+import { ThemeToggle } from "@/components/theme-toggle";
import {
Send,
CreditCard,
@@ -25,40 +17,53 @@ import {
RotateCcw,
ArrowRight,
CheckCircle,
+ Home,
+ User,
} from "lucide-react";
-import Link from "next/link";
-import { ThemeToggle } from "@/components/theme-toggle";
export default function DemoPage() {
const [currentStep, setCurrentStep] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [demoProgress, setDemoProgress] = useState(0);
+ const [walletConnected, setWalletConnected] = useState(false);
+ const [sendAmount, setSendAmount] = useState("125.50");
+ const [recipient, setRecipient] = useState("alice.stark");
+ const [groupProgress, setGroupProgress] = useState(80);
+ const [creditScore, setCreditScore] = useState(742);
+ const [activeTab, setActiveTab] = useState("interactive");
+ const intervalRef = useRef
(null);
+ const stepIntervalRef = useRef(null);
const demoSteps = [
{
title: "Connect Your Wallet",
description: "Securely connect your StarkNet wallet to get started",
component: "wallet-connect",
+ duration: 3000,
},
{
title: "Send Money Globally",
description: "Transfer funds instantly with minimal fees",
component: "send-money",
+ duration: 4000,
},
{
title: "Join Savings Groups",
description: "Participate in community savings circles",
component: "savings-groups",
+ duration: 3500,
},
{
title: "Access Microloans",
description: "Get loans based on your credit score",
component: "microloans",
+ duration: 3000,
},
{
title: "Build Credit Score",
description: "Improve your on-chain financial reputation",
component: "credit-score",
+ duration: 2500,
},
];
@@ -66,23 +71,97 @@ export default function DemoPage() {
setIsPlaying(true);
setCurrentStep(0);
setDemoProgress(0);
+ setWalletConnected(false);
- const interval = setInterval(() => {
+ // Reset demo state
+ setSendAmount("125.50");
+ setRecipient("alice.stark");
+ setGroupProgress(80);
+ setCreditScore(742);
+
+ // Progress bar animation
+ intervalRef.current = setInterval(() => {
setDemoProgress((prev) => {
if (prev >= 100) {
- clearInterval(interval);
+ clearInterval(intervalRef.current as unknown as number);
setIsPlaying(false);
return 100;
}
- return prev + 2;
+ return prev + 0.5;
});
}, 100);
+
+ // Auto step progression
+ let stepIndex = 0;
+ const progressThroughSteps = () => {
+ if (stepIndex < demoSteps.length && isPlaying) {
+ setCurrentStep(stepIndex);
+
+ // Simulate interactions for each step
+ setTimeout(() => {
+ switch (stepIndex) {
+ case 0:
+ setWalletConnected(true);
+ break;
+ case 1:
+ // Animate send money process
+ setTimeout(() => setSendAmount("0.00"), 1000);
+ setTimeout(() => setSendAmount("125.50"), 2000);
+ break;
+ case 2:
+ // Animate group progress
+ let progress = 80;
+ const progressInterval = setInterval(() => {
+ progress += 2;
+ setGroupProgress(progress);
+ if (progress >= 100) clearInterval(progressInterval);
+ }, 100);
+ break;
+ case 4:
+ // Animate credit score
+ let score = 742;
+ const scoreInterval = setInterval(() => {
+ score += 1;
+ setCreditScore(score);
+ if (score >= 760) clearInterval(scoreInterval);
+ }, 50);
+ break;
+ }
+ }, 500);
+
+ stepIndex++;
+ if (stepIndex < demoSteps.length) {
+ stepIntervalRef.current = setTimeout(
+ progressThroughSteps,
+ demoSteps[stepIndex - 1].duration
+ );
+ }
+ }
+ };
+
+ progressThroughSteps();
+ };
+
+ const pauseDemo = () => {
+ setIsPlaying(false);
+ if (intervalRef.current)
+ clearInterval(intervalRef.current as unknown as number);
+ if (stepIntervalRef.current)
+ clearTimeout(stepIntervalRef.current as unknown as number);
};
const resetDemo = () => {
setIsPlaying(false);
setCurrentStep(0);
setDemoProgress(0);
+ setWalletConnected(false);
+ setSendAmount("125.50");
+ setRecipient("alice.stark");
+ setGroupProgress(80);
+ setCreditScore(742);
+
+ if (intervalRef.current) clearInterval(intervalRef.current);
+ if (stepIntervalRef.current) clearTimeout(stepIntervalRef.current);
};
const nextStep = () => {
@@ -97,12 +176,43 @@ export default function DemoPage() {
}
};
- const renderDemoComponent = (component: string) => {
+ const connectWallet = () => {
+ setWalletConnected(true);
+ };
+
+ const sendMoney = () => {
+ setSendAmount("0.00");
+ setTimeout(() => {
+ setSendAmount("125.50");
+ }, 2000);
+ };
+
+ const joinGroup = () => {
+ let progress = groupProgress;
+ const interval = setInterval(() => {
+ progress += 2;
+ setGroupProgress(progress);
+ if (progress >= 100) clearInterval(interval);
+ }, 100);
+ };
+
+ interface DemoStep {
+ title: string;
+ description: string;
+ component: string;
+ duration: number;
+ }
+
+ interface RenderDemoComponentProps {
+ component: string;
+ }
+
+ const renderDemoComponent = (component: string): JSX.Element | null => {
switch (component) {
case "wallet-connect":
return (
-
-
+
+
@@ -110,135 +220,209 @@ export default function DemoPage() {
Securely connect your wallet to access all ChainRemit features
-
-
-
-
+ {walletConnected ? (
+
+
+ Wallet Connected!
+
+
+ Address: 0x1234...5678
+
+
+ ) : (
+
+
+ )}
+
+
-
-
+
+
+
+
+
+
To
- alice.stark
+ {recipient}
Amount
-
- $125.50
+
+ ${sendAmount}
-
+ {sendAmount === "0.00" && (
+
+ Transfer Complete!
+
+ )}
+
-
-
+
+
+
);
case "savings-groups":
return (
-
-
-
+
+
+
12/15 members • $50 monthly
-
-
+
+
+ 12/15 members • $50 monthly
+
+
+
Progress to target
- 80%
+ {groupProgress}%
+
+
-
-
- JD
-
-
- AS
-
-
- MB
-
+
+ JD
+
+
+ AS
+
+
+ MB
+
+9 more
-
Join Group
-
-
+ {groupProgress >= 100 && (
+
+ Target Reached!
+
+ )}
+
+ {groupProgress >= 100 ? "Group Complete!" : "Join Group"}
+
+
+
-
-
+
+
+
-
+
+
+
+
DeFi Lender Pool
- 8.5% APR
+
+ 8.5% APR
+
Up to $500 • 30 days • No collateral required
-
Apply Now
+
+ Apply Now
+
+
+
+
+ Peer-to-Peer Lending
+
+ 7.2% APR
+
+
+
+ Up to $1,000 • 60 days • Community verified
+
+
+ View Details
+
-
-
+
);
case "credit-score":
return (
-
-
-
+
+
+
+
+
+
-
742
+
+ {creditScore}
+
-
750
+ ? "bg-green-100 text-green-800"
+ : "bg-blue-100 text-blue-800"
+ }`}
>
- Trust Level: A+
-
+ Trust Level: {creditScore > 750 ? "A+" : "A"}
+
- Excellent Credit
+ {creditScore > 750 ? "Excellent Credit" : "Very Good Credit"}
-
-
+
+ Score increased by {creditScore - 742} points this month
+
+
+