+
+
+ (APP_CATEGORY.ALL);
+
+ const handleClick = (category: APP_CATEGORY) => {
+ setActive(active === category ? APP_CATEGORY.ALL : category);
+ onChange?.(active === category ? APP_CATEGORY.ALL : category);
+ };
+
+ useEffect(() => {
+ setActive(value || APP_CATEGORY.ALL);
+ }, [value]);
+
+ return (
+ {}} />);
+
+ options.forEach((option) => {
+ expect(screen.getByText(option.label)).toBeInTheDocument();
+ });
+ });
+
+ it("toggles checkbox option selection state on click", () => {
+ const handleChange = vi.fn();
+ render(([]);
+
+ const handleToggle = (value: APP_CATEGORY) => {
+ const currentIndex = selectedValues.indexOf(value);
+ const newSelectedValues = [...selectedValues];
+
+ if (currentIndex === -1) {
+ newSelectedValues.push(value);
+ } else {
+ newSelectedValues.splice(currentIndex, 1);
+ }
+
+ setSelectedValues(newSelectedValues);
+ onChange(newSelectedValues);
+ };
+
+ return (
+
+
+ );
+
+ // Ensure ToggleSlider items are rendered
+ expect(screen.getByText("Archived")).toBeInTheDocument();
+ expect(screen.getByText("Current")).toBeInTheDocument();
+
+ // Ensure Archived component renders the button when type is CURRENT
+ expect(screen.queryByText("Create Poll")).toBeInTheDocument();
+ });
+
+ it("switches between tabs correctly and updates Archived component", () => {
+ render(
+
+
+ );
+
+ // Click on "Archived" tab
+ fireEvent.click(screen.getByText("Archived"));
+
+ // Button should not be present if type is not CURRENT
+ expect(screen.queryByText("Create Poll")).not.toBeInTheDocument();
+
+ // Click on "Current" tab
+ fireEvent.click(screen.getByText("Current"));
+
+ // Button should be present if type is CURRENT
+ expect(screen.queryByText("Create Poll")).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Community/components/Archived/__test__/index.test.tsx b/src/components/Community/components/Archived/__test__/index.test.tsx
new file mode 100644
index 0000000..8e94960
--- /dev/null
+++ b/src/components/Community/components/Archived/__test__/index.test.tsx
@@ -0,0 +1,85 @@
+// Archived.test.tsx
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { useNavigate } from "react-router-dom";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { VoteSectionType } from "@/components/VoteSection/type";
+import { COMMUNITY_TYPE } from "@/constants/vote";
+import useData from "@/hooks/useData";
+
+import Archived from "../index";
+
+// Mock the hooks and components that Archived depends on
+vi.mock("react-router-dom", () => ({
+ useNavigate: vi.fn(), // Mock `useNavigate` with Vitest's vi.fn()
+}));
+
+vi.mock("@/hooks/useData", () => ({
+ default: vi.fn(),
+}));
+
+vi.mock("@/components/VoteSection", () => ({
+ default: ({ data }: { data: VoteSectionType }) => (
+ ;
+
+ beforeEach(() => {
+ // Mock navigate function
+ mockNavigate = vi.fn();
+ (useNavigate as vi.Mock).mockReturnValue(mockNavigate);
+
+ (useData as vi.Mock).mockReturnValue({
+ data: {
+ data: [
+ { proposalId: "1", proposalTitle: "Vote 1" },
+ { proposalId: "2", proposalTitle: "Vote 2" },
+ ],
+ },
+ isLoading: false,
+ });
+ });
+
+ it("renders without crashing", () => {
+ render(([]);
+ const [pageIndex, setPageIndex] = useState(0);
+ const [currentType, setCurrentType] = useState(type);
+
+ const navigate = useNavigate();
+
+ const { data, isLoading } = useData(
+ `/api/app/ranking/poll-list?${new URLSearchParams({
+ chainId,
+ type: currentType,
+ skipCount: (pageIndex * PAGE_SIZE).toString(),
+ maxResultCount: PAGE_SIZE.toString(),
+ }).toString()}`
+ );
+
+ useEffect(() => {
+ setSections([]);
+ setCurrentType(type);
+ setPageIndex(0);
+ }, [type]);
+
+ useEffect(() => {
+ const { data: sectionList } = data || {};
+ if (sectionList && Array.isArray(sectionList)) {
+ setSections((prev) =>
+ pageIndex === 0 ? sectionList : [...prev, ...sectionList]
+ );
+ setHasMore(sectionList?.length >= PAGE_SIZE);
+ }
+ }, [data, pageIndex]);
+
+ useEffect(() => {
+ if (scrollTop && scrollTop < 50 && hasMore && !isLoading) {
+ setPageIndex((prevPageIndex) => prevPageIndex + 1);
+ }
+ }, [hasMore, isLoading, scrollTop]);
+
+ return (
+ (null);
+ const confetti = useRef(null);
+
+ useEffect(() => {
+ if (!canvasRef.current) {
+ return;
+ }
+
+ confetti.current = canvasConfetti.create(canvasRef.current, {
+ resize: true,
+ useWorker: true,
+ });
+
+ onInit?.({
+ confetti: confetti.current,
+ });
+
+ return () => {
+ confetti.current?.reset();
+ };
+ }, [onInit]);
+
+ return (
+
+ );
+};
+
+export default Confetti;
diff --git a/src/components/Confetti/types/index.ts b/src/components/Confetti/types/index.ts
new file mode 100644
index 0000000..613b8a9
--- /dev/null
+++ b/src/components/Confetti/types/index.ts
@@ -0,0 +1,5 @@
+export type {
+ CreateTypes as TCanvasConfettiInstance,
+ GlobalOptions as TCanvasConfettiGlobalOptions,
+ Options as TCanvasConfettiAnimationOptions,
+} from "canvas-confetti";
diff --git a/src/components/Countdown/__test__/index.test.tsx b/src/components/Countdown/__test__/index.test.tsx
new file mode 100644
index 0000000..4848c3e
--- /dev/null
+++ b/src/components/Countdown/__test__/index.test.tsx
@@ -0,0 +1,55 @@
+// Countdown.test.tsx
+import { act } from "react";
+
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+import Countdown from "../index";
+
+describe("Countdown Component", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.clearAllTimers();
+ });
+
+ it("renders with initial time", () => {
+ render( = ({ initialTime, onFinish }) => {
+ const [remainingTime, setRemainingTime] = useState(initialTime);
+
+ useEffect(() => {
+ if (remainingTime <= 0) {
+ onFinish?.();
+ return;
+ }
+
+ const timer = setInterval(() => {
+ setRemainingTime((prevTime) => prevTime - 1);
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, [onFinish, remainingTime]);
+
+ useEffect(() => {
+ setRemainingTime(initialTime);
+ }, [initialTime]);
+
+ const formatTime = (time: number): string => {
+ const durationObj = dayjs.duration(time, "seconds");
+ const days = Math.floor(durationObj.asDays());
+ const hours = durationObj.hours();
+ const minutes = durationObj.minutes();
+
+ return `${days}d ${hours}h ${minutes}m`;
+ };
+
+ return (
+
+ {formatTime(remainingTime)}
+
+ );
+};
+
+export default Countdown;
diff --git a/src/components/DailyRewards/__test__/index.test.tsx b/src/components/DailyRewards/__test__/index.test.tsx
new file mode 100644
index 0000000..df7cebc
--- /dev/null
+++ b/src/components/DailyRewards/__test__/index.test.tsx
@@ -0,0 +1,123 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+
+import DailyRewards, {
+ getLastConsecutiveTrueLength, // Option 1: Export and import the helper function
+} from "../index";
+
+// Mock DAILY_REWARDS for testing
+vi.mock("@/constants/discover", () => {
+ const mockDAILY_REWARDS = [10, 20, 30, 40, 50, 60, 70];
+ return {
+ DAILY_REWARDS: mockDAILY_REWARDS,
+ };
+});
+
+vi.mock("@/provider/types/UserProviderType", () => ({
+ UserPoints: {
+ dailyPointsClaimedStatus: [true, true, false, false, false, false],
+ },
+}));
+
+describe("DailyRewards Component", () => {
+ const mockDAILY_REWARDS = [10, 20, 30, 40, 50, 60, 70];
+ it("renders the component with the correct number of rewards", () => {
+ render(
+
+
+ );
+
+ // Initially not visible
+ expect(screen.queryByText("Content")).not.toBeInTheDocument();
+
+ // Rerender with visible
+ rerender(
+
+
+ );
+ expect(screen.getByText("Content")).toBeInTheDocument();
+ });
+
+ it("calls onClose when background is clicked", () => {
+ const onClose = vi.fn();
+
+ render(
+
+
+ );
+
+ // Click the backdrop (select the correct element)
+ const backdrop = screen.getByTestId("backdrop-testid");
+ if (backdrop) fireEvent.click(backdrop);
+
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("applies correct class based on direction", () => {
+ render(
+
+
+ );
+
+ const drawer = screen.getByText("Content").parentElement;
+ expect(drawer).toHaveClass("right-0");
+ });
+});
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
new file mode 100644
index 0000000..eff6b14
--- /dev/null
+++ b/src/components/Drawer/index.tsx
@@ -0,0 +1,92 @@
+
+import { ReactNode, useEffect, useRef, useState } from "react";
+
+import clsx from "clsx";
+import { AnimatePresence, motion } from "framer-motion";
+
+interface IDrawerProps {
+ role?: string;
+ isVisible?: boolean;
+ direction?: "left" | "right" | "top" | "bottom";
+ children: ReactNode | ReactNode[];
+ canClose?: boolean;
+ rootClassName?: string;
+ onClose?: (visible: boolean) => void;
+}
+
+const Drawer = ({
+ role = "dialog",
+ isVisible,
+ direction = "left",
+ children,
+ rootClassName,
+ canClose,
+ onClose,
+}: IDrawerProps) => {
+ const containerRef = useRef(null);
+ const [isVisibleState, setIsVisibleState] = useState(isVisible);
+
+ const variants = {
+ hidden: {
+ x: direction === "left" ? "-100%" : direction === "right" ? "100%" : "0",
+ y: direction === "top" ? "-100%" : direction === "bottom" ? "100%" : "0",
+ transition: { type: "tween", ease: "easeInOut", duration: 0.2 },
+ },
+ visible: {
+ x: 0,
+ y: 0,
+ transition: { type: "tween", ease: "easeInOut", duration: 0.2 },
+ },
+ };
+
+ const handleClose = (event: React.MouseEvent) => {
+ event.preventDefault();
+ event.stopPropagation();
+ if (canClose) {
+ setIsVisibleState(false);
+ onClose?.(false);
+ }
+ };
+
+ useEffect(() => {
+ setIsVisibleState(isVisible);
+ }, [isVisible]);
+
+ return (
+ <>
+ {isVisibleState && (
+
+ )}
+
+ {isVisibleState && (
+
+ {children}
+
+ )}
+
+
+ );
+};
+
+export default Drawer;
diff --git a/src/components/EnvUnsupported/__test__/index.test.tsx b/src/components/EnvUnsupported/__test__/index.test.tsx
new file mode 100644
index 0000000..1d779d3
--- /dev/null
+++ b/src/components/EnvUnsupported/__test__/index.test.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+
+import { retrieveLaunchParams } from "@telegram-apps/sdk-react";
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { EnvUnsupported } from "../index"; // Adjust to your file structure
+
+import "@testing-library/jest-dom";
+
+// Mock AppRoot and Placeholder
+vi.mock("@telegram-apps/telegram-ui", () => ({
+ AppRoot: ({
+ children,
+ platform,
+ }: {
+ children: React.ReactNode;
+ platform: string;
+ }) => (
+ ).mockImplementation(
+ () => {
+ throw new Error("Mocked error");
+ }
+ );
+
+ render().mockImplementation(
+ () => ({
+ platform: "macos",
+ })
+ );
+
+ render().mockImplementation(
+ () => ({
+ platform: "android",
+ })
+ );
+
+ render(
+
+ Unsupported environment
+
+
+ );
+}
diff --git a/src/components/ForYou/ActionButton/index.tsx b/src/components/ForYou/ActionButton/index.tsx
new file mode 100644
index 0000000..6d4e488
--- /dev/null
+++ b/src/components/ForYou/ActionButton/index.tsx
@@ -0,0 +1,181 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { CreateTypes } from "canvas-confetti";
+
+import Confetti from "@/components/Confetti";
+import { TgLink } from "@/config";
+import { chainId } from "@/constants/app";
+import { HEART_SHAPE } from "@/constants/canvas-confetti";
+import { postWithToken } from "@/hooks/useData";
+import { getShareText } from "@/pageComponents/PollDetail/utils";
+import { useUserContext } from "@/provider/UserProvider";
+import { VoteApp } from "@/types/app";
+import { stringifyStartAppParams, stringToHex } from "@/utils/start-params";
+
+interface IActionButton {
+ item: VoteApp;
+ totalLikes: number;
+ totalComments: number;
+ totalShares: number;
+ updateOpenAppClick: (alias: string) => void;
+ updateReviewClick: (item: VoteApp) => void;
+ updateLikeAppClick: (likesCount: number) => void;
+}
+
+const ActionButton = ({
+ item,
+ totalLikes = 0,
+ totalComments = 0,
+ totalShares = 0,
+ updateLikeAppClick,
+ updateOpenAppClick,
+ updateReviewClick,
+}: IActionButton) => {
+ const {
+ user: { userPoints },
+ updateUserPoints,
+ } = useUserContext();
+ const confettiInstance = useRef(null);
+ const [totalCurrentLikes, setTotalCurrentLikes] = useState(totalLikes);
+ const [likeCount, setLikeCount] = useState(0);
+
+ const handleClick = () => {
+ setLikeCount((prevCount) => prevCount + 1);
+ };
+
+ const fetchRankingLike = useCallback(
+ async (likeCount: number) => {
+ const {
+ data: { userTotalPoints },
+ } = await postWithToken("/api/app/ranking/like", {
+ chainId,
+ proposalId: "",
+ likeList: [
+ {
+ alias: item.alias,
+ likeAmount: likeCount,
+ },
+ ],
+ });
+ updateUserPoints(userTotalPoints || userPoints?.userTotalPoints);
+ },
+ [updateUserPoints, userPoints?.userTotalPoints]
+ );
+
+ // Effect to handle debouncing
+ useEffect(() => {
+ if (likeCount > 0) {
+ const timer = setTimeout(() => {
+ updateLikeAppClick(likeCount);
+ setTotalCurrentLikes((prev) => prev + likeCount);
+ fetchRankingLike(likeCount);
+ setLikeCount(0);
+ }, 700);
+
+ return () => clearTimeout(timer); // Cleanup timeout on unmount or update
+ }
+ }, [item.alias, likeCount]);
+
+ const onInit = ({ confetti }: { confetti: CreateTypes }) => {
+ confettiInstance.current = confetti;
+ };
+
+ const onLikeClick = () => {
+ confettiInstance.current?.({
+ angle: 110,
+ particleCount: 15,
+ spread: 70,
+ origin: { y: 0.2, x: 0.88 },
+ disableForReducedMotion: true,
+ shapes: [HEART_SHAPE],
+ zIndex: 10,
+ });
+
+ window.Telegram.WebApp.HapticFeedback.notificationOccurred("success");
+
+ handleClick();
+ };
+
+ const onOpenAppClick = () => {
+ shareToTelegram();
+ updateOpenAppClick(item.alias);
+ window.Telegram.WebApp.HapticFeedback.notificationOccurred("success");
+ };
+
+ const generateShareUrl = () => {
+ const paramsStr = stringifyStartAppParams({
+ alias: stringToHex(item.alias),
+ });
+ return `${TgLink}?startapp=${paramsStr}`;
+ };
+
+ const shareToTelegram = () => {
+ if (window?.Telegram?.WebApp?.openTelegramLink) {
+ const url = encodeURIComponent(generateShareUrl());
+ const shareText = encodeURIComponent(
+ getShareText(
+ `I just found this awesome app "${item.title}" on Votigram! 🌟`,
+ `Join me on Votigram to discover more fun apps, and earn points for USDT airdrops! 💎 \n`
+ )
+ );
+ window?.Telegram?.WebApp?.openTelegramLink(
+ `https://t.me/share/url?url=${url}&text=${shareText}`
+ );
+ }
+ };
+
+ return (
+ <>
+ (null);
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target as Node)
+ ) {
+ setIsExpand(false);
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener("mousedown", handleClickOutside, true);
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside, true);
+ };
+ }, []);
+
+ const onOpenAppClick = () => {
+ updateOpenAppClick(item.alias, item.url);
+ };
+
+ return (
+ {
+ setIsExpand(!isExpand);
+ }}
+ >
+
+ {item.longDescription}
+
+
+
+ );
+};
+
+export default AppDetail;
diff --git a/src/components/ForYou/index.tsx b/src/components/ForYou/index.tsx
new file mode 100644
index 0000000..7a306d8
--- /dev/null
+++ b/src/components/ForYou/index.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState } from "react";
+
+import { useThrottleFn } from "ahooks";
+import { motion, PanInfo } from "framer-motion";
+
+import { chainId } from "@/constants/app";
+import {
+ APP_CATEGORY,
+ APP_TYPE,
+ DISCOVER_CATEGORY,
+} from "@/constants/discover";
+import { postWithToken } from "@/hooks/useData";
+import { useUserContext } from "@/provider/UserProvider";
+import { VoteApp } from "@/types/app";
+
+import ImageCarousel from "../ImageCarousel";
+import AppDetail from "./AppDetail";
+import AdVideo from "../AdVideo";
+import Modal from "../Modal";
+import ActionButton from "./ActionButton";
+import CheckboxGroup from "../CheckboxGroup";
+import Drawer from "../Drawer";
+import ReviewComment from "../ReviewComment";
+import TelegramHeader from "../TelegramHeader";
+
+interface IForYouType {
+ currentForyouPage: number;
+ items: VoteApp[];
+ fetchForYouData: (alias: string[]) => void;
+}
+
+const ForYou = ({
+ items,
+ fetchForYouData,
+ currentForyouPage = 1,
+}: IForYouType) => {
+ const {
+ user: { isNewUser },
+ updateUserStatus,
+ } = useUserContext();
+ const [isInputFocus, setIsInputFocus] = useState(false);
+ const currentPage = useRef(currentForyouPage);
+ const [forYouItems, setForYouItems] = useState(items);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isShowReviews, setIsShowReviews] = useState(false);
+ const [showChoosen, setShowChoosen] = useState(isNewUser);
+ const [interests, setInterests] = useState([]);
+ const [currentActiveApp, setCurrentActiveApp] = useState<
+ VoteApp | undefined
+ >();
+ const height = window.innerHeight;
+
+ useEffect(() => {
+ if (items && items.length === 0) {
+ fetchForYouData([]);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [items]);
+
+ useEffect(() => {
+ if (items) {
+ setForYouItems((prev) =>
+ currentForyouPage > currentPage.current
+ ? [...prev, ...(items || [])]
+ : items
+ );
+ }
+ }, [items, currentForyouPage]);
+
+ const handleDragEnd = async (
+ _: MouseEvent | TouchEvent | PointerEvent,
+ info: PanInfo
+ ) => {
+ // Check velocity to determine the predominant direction
+ const predominantDirection =
+ Math.abs(info.velocity.y) > Math.abs(info.velocity.x);
+ if (predominantDirection) {
+ const direction = info.offset.y > 0 ? -1 : 1;
+ let nextIndex = currentIndex + direction;
+
+ // Ensure nextIndex is within bounds
+ if (nextIndex < 0) {
+ nextIndex = 0;
+ } else if (nextIndex >= forYouItems.length) {
+ nextIndex = forYouItems.length - 1;
+ }
+
+ setCurrentIndex(nextIndex);
+ // Load more videos when reaching the second-to-last item
+ if (nextIndex >= forYouItems.length - 5) {
+ await fetchForYouData(forYouItems.slice(-10).map((item) => item.alias));
+ }
+ }
+ };
+
+ const updateLikeAppClick = (likesCount: number) => {
+ const list = [...forYouItems];
+ list[currentIndex].totalLikes =
+ (list[currentIndex].totalLikes || 0) + likesCount;
+ setForYouItems(list);
+ };
+
+ const updateShareAppClick = (alias: string) => {
+ postWithToken("/api/app/user/share-app", {
+ chainId,
+ alias,
+ });
+ const list = [...forYouItems];
+ list[currentIndex].totalShares = (list[currentIndex].totalShares || 0) + 1;
+ setForYouItems(list);
+ };
+
+ const updateOpenAppClick = (alias: string, url: string) => {
+ postWithToken("/api/app/user/open-app", {
+ chainId,
+ alias,
+ });
+ window.open(url)
+ };
+
+ const updateReviewClick = (item: VoteApp) => {
+ setIsShowReviews(true);
+ setCurrentActiveApp(item);
+ };
+
+ const onDrawerClose = () => {
+ setIsShowReviews(false);
+ };
+
+ const onComment = (totalComments: number) => {
+ const list = [...forYouItems];
+ list[currentIndex].totalComments = totalComments;
+ setForYouItems(list);
+ };
+
+ const { run: chooseInterest } = useThrottleFn(
+ async () => {
+ setShowChoosen(false);
+ updateUserStatus(false);
+ try {
+ await postWithToken("/api/app/discover/choose", {
+ chainId,
+ choices: interests,
+ });
+ } catch (error) {
+ console.error(error);
+ }
+ },
+ { wait: 700 }
+ );
+
+ return (
+ <>
+
+
+
+ );
+
+ expect(screen.getByText("Test Label")).toBeInTheDocument();
+ expect(screen.getByTestId("test-input")).toBeInTheDocument();
+ });
+
+ it("displays the description if provided", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("This is a description.")).toBeInTheDocument();
+ });
+
+ it("displays the error text if provided", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("*This is an error.")).toBeInTheDocument();
+ });
+
+ it("shows required asterisk when required is true", () => {
+ render(
+
+
+
+ );
+
+ const labelElement = screen.getByText("Test Label");
+ const asteriskElement = labelElement.closest("span")?.querySelector("span");
+ expect(asteriskElement).toHaveTextContent("*");
+ });
+
+ it("applies custom className to container", () => {
+ render(
+
+
+
+ );
+
+ // Directly query the root div by additional specificity if needed
+ const container = screen.getByTestId("form-item-container");
+ expect(container).toHaveClass("custom-class");
+ });
+});
diff --git a/src/components/FormItem/index.tsx b/src/components/FormItem/index.tsx
new file mode 100644
index 0000000..d946f19
--- /dev/null
+++ b/src/components/FormItem/index.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import clsx from "clsx";
+
+
+interface IFormItemProps {
+ label: string;
+ className?: string;
+ desc?: string;
+ children: React.ReactNode;
+ errorText?: string;
+ required?: boolean;
+}
+
+// FormItem component
+const FormItem: React.FC = ({
+ label,
+ desc,
+ className,
+ children,
+ errorText,
+ required,
+}) => {
+ return (
+ (null);
+ const [searchList, setSearchList] = useState([]);
+ const [pageIndex, setPageIndex] = useState(0);
+ const [newAmount, setNewAmount] = useState(0);
+ const [noMore, setNoMore] = useState(false);
+ const [keyward, setKeyward] = useState("");
+ const [category, setCategory] = useState(APP_CATEGORY.ALL);
+ const [adPrams, setAdParams] = useState<{
+ timeStamp?: number;
+ signature?: string;
+ }>({});
+ const { updateQueryParam } = useSetSearchParams();
+
+ const { data: searchData, isLoading } = useData(
+ isSearching && (category || keyward)
+ ? `/api/app/discover/app-list?${new URLSearchParams({
+ chainId,
+ category: category.toString(),
+ search: keyward,
+ skipCount: (pageIndex * PAGE_SIZE).toString(),
+ maxResultCount: PAGE_SIZE.toString(),
+ }).toString()}`
+ : null
+ );
+
+ const { data: bannerInfo } = useData(
+ `/api/app/ranking/banner-info?chainId=${chainId}`
+ );
+ useEffect(() => {
+ const { data } = searchData || {};
+ if (data && Array.isArray(data)) {
+ setSearchList((prev) => (pageIndex === 0 ? data : [...prev, ...data]));
+ setNoMore(data.length < PAGE_SIZE);
+ }
+ }, [category, pageIndex, searchData]);
+
+ useEffect(() => {
+ const { notViewedNewAppCount } = bannerInfo || {};
+ if (notViewedNewAppCount) {
+ setNewAmount(notViewedNewAppCount || 0);
+ }
+ }, [bannerInfo]);
+
+ const onViewApp = (item: VoteApp) => {
+ onAppItemClick(item);
+ setNewAmount((prev) => prev - 1);
+ postWithToken("/api/app/discover/view-app", {
+ chainId,
+ aliases: [item.alias],
+ });
+ };
+
+ const onClaimClick = async () => {
+ try {
+ const result = await postWithToken("/api/app/user/login-points/collect", {
+ chainId,
+ timeStamp: adPrams?.timeStamp?.toString(),
+ signature: adPrams.signature,
+ });
+ if (result?.data?.userTotalPoints) {
+ updateDailyLoginPointsStatus(result?.data?.userTotalPoints);
+ } else {
+ updateDailyLoginPointsStatus(userPoints?.userTotalPoints || 0);
+ }
+ } catch (e) {
+ console.error(e);
+ updateDailyLoginPointsStatus(userPoints?.userTotalPoints || 0);
+ }
+ };
+
+ const showAd = useAdsgram({
+ blockId: import.meta.env.VITE_ADSGRAM_ID.toString() || "",
+ onReward: updateUserPoints,
+ onError: () => {},
+ onSkip: () => {},
+ onFinish: (timeStamp, signature) => setAdParams({ timeStamp, signature }),
+ });
+
+ useEffect(() => {
+ const scrollRef = scrollViewRef.current;
+
+ const handleScroll = () => {
+ const scrollRef = scrollViewRef.current;
+ if (!scrollRef) return;
+ if (
+ scrollRef.scrollHeight - scrollRef.scrollTop - scrollRef.clientHeight <
+ 50 &&
+ !noMore &&
+ !isLoading
+ ) {
+ setPageIndex((page) => page + 1);
+ }
+ };
+
+ if (scrollRef) {
+ scrollRef.addEventListener("scroll", handleScroll);
+ }
+
+ return () => {
+ if (scrollRef) {
+ scrollRef.removeEventListener("scroll", handleScroll);
+ }
+ };
+ }, [isLoading, noMore, scrollViewRef]);
+
+ return (
+ <>
+ {isSearching &&
+
+
+ );
+};
+
+export default Home;
diff --git a/src/components/ImageCarousel/__test__/index.test.tsx b/src/components/ImageCarousel/__test__/index.test.tsx
new file mode 100644
index 0000000..39006e7
--- /dev/null
+++ b/src/components/ImageCarousel/__test__/index.test.tsx
@@ -0,0 +1,77 @@
+// ImageCarousel.test.tsx
+import React from "react";
+
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import ImageCarousel from "../index"; // Adjust the path as necessary
+
+import "@testing-library/jest-dom"; // For extended assertions
+
+// Mock the Telegram WebApp Haptic Feedback
+const mockImpactOccurred = vi.fn();
+
+beforeEach(() => {
+ global.window.Telegram = {
+ WebApp: {
+ HapticFeedback: {
+ impactOccurred: mockImpactOccurred,
+ notificationOccurred: vi.fn(),
+ selectionChanged: vi.fn(),
+ },
+ },
+ } as unknown as TelegramWebApp;
+});
+
+// Mock Swiper components
+vi.mock("swiper/react", () => ({
+ Swiper: ({
+ children,
+ onActiveIndexChange,
+ }: {
+ children: React.ReactNode;
+ onActiveIndexChange: () => void;
+ }) => {
+ React.useEffect(() => {
+ if (onActiveIndexChange) {
+ onActiveIndexChange(); // Simulate active index change
+ }
+ }, [onActiveIndexChange]);
+ return {
+ window.Telegram.WebApp.HapticFeedback.impactOccurred("light");
+ }}
+ >
+ {items?.map((item: string) => (
+
+ 
+
+ ))}
+
+ );
+};
+
+export default ImageCarousel;
diff --git a/src/components/Input/__test__/index.test.tsx b/src/components/Input/__test__/index.test.tsx
new file mode 100644
index 0000000..a9b74a3
--- /dev/null
+++ b/src/components/Input/__test__/index.test.tsx
@@ -0,0 +1,47 @@
+// Input.test.tsx
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi } from "vitest";
+
+import Input from "../index";
+
+describe("Input Component", () => {
+ it("renders with placeholder text", () => {
+ render();
+ const inputElement = screen.getByPlaceholderText("Type here...");
+ expect(inputElement).toBeInTheDocument();
+ });
+
+ it("updates value on change and calls onChange", () => {
+ const handleChange = vi.fn();
+ render();
+ const inputElement = screen.getByPlaceholderText("Please Enter...");
+
+ fireEvent.change(inputElement, { target: { value: "new value" } });
+
+ expect(inputElement).toHaveValue("new value");
+ expect(handleChange).toHaveBeenCalledWith("new value");
+ });
+
+ it("renders clear button and clears input on click", () => {
+ const handleChange = vi.fn();
+ render(
+
+ );
+
+ const inputElement = screen.getByPlaceholderText("Please Enter...");
+ expect(inputElement).toHaveValue("to clear");
+
+ const clearButton = screen.getByRole("button");
+ fireEvent.click(clearButton);
+
+ expect(inputElement).toHaveValue("");
+ expect(handleChange).toHaveBeenCalledWith("");
+ });
+
+ it("does not show clear button when showClearBtn is false", () => {
+ render();
+ const clearButton = screen.queryByRole("button");
+ expect(clearButton).not.toBeInTheDocument();
+ });
+});
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
new file mode 100644
index 0000000..48a6d4a
--- /dev/null
+++ b/src/components/Input/index.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+
+import clsx from "clsx";
+
+
+interface IInputProps {
+ value?: string;
+ maxLength?: number;
+ defaultValue?: string;
+ className?: string;
+ placeholder?: string;
+ showClearBtn?: boolean;
+ onChange?: (value: string) => void;
+}
+
+const Input = ({
+ value: parentValue,
+ defaultValue,
+ placeholder,
+ className,
+ maxLength,
+ showClearBtn,
+ onChange,
+}: IInputProps) => {
+ const [value, setValue] = useState(defaultValue || "");
+
+ const handleChange = (e: React.ChangeEvent) => {
+ setValue(e.target.value || '');
+ onChange?.(e.target.value || '');
+ };
+
+ const clearInput = () => {
+ setValue("");
+ onChange?.('');
+ };
+
+ useEffect(() => {
+ setValue(parentValue || "");
+ }, [parentValue]);
+
+ return (
+ = ({ value, defaultValues, onChange }) => {
+ const [options, setOptions] = useState(value || defaultValues || []);
+
+ const addOptionToEnd = () => {
+ const opts = [...options, { id: Date.now(), title: "" }]
+ setOptions(opts);
+ onChange?.(opts);
+ };
+
+ const removeOption = (index: number) => {
+ const newOptions = options.filter((_, i) => i !== index);
+ setOptions(newOptions);
+ onChange?.(newOptions);
+ };
+
+ const handleInputChange = (index: number, value: string) => {
+ const newOptions = [...options];
+ newOptions[index].title = value;
+ setOptions(newOptions);
+ onChange?.(newOptions);
+ };
+
+ const handleIconChange = (index: number, icon: string) => {
+ const newOptions = [...options];
+ newOptions[index].icon = icon;
+ setOptions(newOptions);
+ onChange?.(newOptions);
+ };
+
+ useEffect(() => {
+ if (value?.length) {
+ setOptions(value);
+ }
+ }, [value])
+
+ return (
+ <>
+ {options.map((option, index) => (
+
+
+ Share
+
+
+
+ );
+};
+
+export default InviteFriendsStatus;
diff --git a/src/components/Loading/__test__/index.test.tsx b/src/components/Loading/__test__/index.test.tsx
new file mode 100644
index 0000000..d9f5259
--- /dev/null
+++ b/src/components/Loading/__test__/index.test.tsx
@@ -0,0 +1,56 @@
+// Loading.test.tsx
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import Loading from "../index"; // Adjust the import to your file structure
+
+import "@testing-library/jest-dom";
+
+describe("Loading Component", () => {
+ it("renders the spinner and container with default classes", () => {
+ render( = ({ className, iconClassName }) => {
+ return (
+
+
+ );
+
+ expect(screen.getByText(childContent)).toBeInTheDocument();
+ });
+
+ it("does not render when not visible", () => {
+ const childContent = "You should not see this";
+ render(
+
+
+ );
+
+ expect(screen.queryByText(childContent)).not.toBeInTheDocument();
+ });
+
+ it("applies the root class name", () => {
+ render(
+
+
+ );
+
+ const modal = screen.getByText("Content").parentElement; // get motion.div
+ expect(modal).toHaveClass("custom-class");
+ });
+});
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
new file mode 100644
index 0000000..b1b29d0
--- /dev/null
+++ b/src/components/Modal/index.tsx
@@ -0,0 +1,41 @@
+
+import React, { ReactNode } from "react";
+
+import clsx from "clsx";
+import { motion } from "framer-motion";
+
+interface IModalProps {
+ isVisible: boolean;
+ children: ReactNode | ReactNode[];
+ rootClassName?: string;
+}
+
+const Modal = ({ isVisible, children, rootClassName }: IModalProps) => {
+ // Variants for the modal animation
+ const variants = {
+ hidden: { opacity: 0, scale: 0.75 },
+ visible: { opacity: 1, scale: 1 },
+ };
+
+ return (
+ isVisible && (
+ = ({ activeTab, onMenuClick }) => {
+ const tabPositions = {
+ [TAB_LIST.HOME]: 0,
+ [TAB_LIST.FOR_YOU]: 1,
+ [TAB_LIST.VOTE]: 2,
+ [TAB_LIST.PEN]: 3,
+ };
+
+ const tabWidth = 70;
+ const indicatorStyle = {
+ transform: `translateX(${tabPositions[activeTab] * tabWidth}px)`,
+ transition: "transform 0.3s ease",
+ };
+
+ return (
+ = ({
+ start = 0,
+ end,
+ duration,
+}) => {
+ const [count, setCount] = useState(start);
+
+ useEffect(() => {
+ let startTime: number | null = null;
+ const step = (timestamp: number) => {
+ if (!startTime) startTime = timestamp;
+
+ const progress = timestamp - startTime;
+ const progressFraction = Math.min(progress / duration, 1);
+
+ const currentNumber = Math.floor(
+ progressFraction * (end - start) + start
+ );
+
+ setCount(currentNumber);
+
+ if (progress < duration) {
+ requestAnimationFrame(step);
+ }
+ };
+
+ requestAnimationFrame(step);
+
+ return () => {
+ startTime = null;
+ };
+ }, [start, end, duration]);
+
+ return (
+
+ {count.toLocaleString()}
+
+ );
+};
+
+export default PointsCounter;
diff --git a/src/components/Profile/components/Achievements/index.css b/src/components/Profile/components/Achievements/index.css
new file mode 100644
index 0000000..387ac8f
--- /dev/null
+++ b/src/components/Profile/components/Achievements/index.css
@@ -0,0 +1,13 @@
+.time-picker {
+ .m-style-picker-mask {
+ @apply !bg-none;
+ }
+
+ .m-style-picker-indicator-vertical {
+ @apply border-gray-border;
+ }
+
+ .m-style-picker-item-selected {
+ @apply text-white;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Profile/components/Achievements/index.tsx b/src/components/Profile/components/Achievements/index.tsx
new file mode 100644
index 0000000..29b6ad6
--- /dev/null
+++ b/src/components/Profile/components/Achievements/index.tsx
@@ -0,0 +1,156 @@
+import { useEffect, useState } from "react";
+
+import DailyRewards from "@/components/DailyRewards";
+import Loading from "@/components/Loading";
+import { chainId } from "@/constants/app";
+import useData from "@/hooks/useData";
+import { useUserContext } from "@/provider/UserProvider";
+import { InviteItem } from "@/types/task";
+
+interface IAchievementsProps {
+ scrollTop: number;
+}
+
+type MyInfoType = {
+ first_name: string;
+ last_name: string;
+ photo_url: string;
+};
+
+const Achievements = ({ scrollTop }: IAchievementsProps) => {
+ const {
+ user: { userPoints },
+ } = useUserContext();
+ const [inviteList, setInviteList] = useState([]);
+ const [hasMore, setHasMore] = useState(true);
+ const [pageIndex, setPageIndex] = useState(0);
+ const [myInvited, setMyInvited] = useState();
+ const [myInfo, setMyInfo] = useState();
+
+ const PAGE_SIZE = 20;
+
+ const { data: inviteDetail, isLoading } = useData(
+ `/api/app/referral/invite-leader-board?${new URLSearchParams({
+ chainId,
+ skipCount: (pageIndex * PAGE_SIZE).toString(),
+ maxResultCount: PAGE_SIZE.toString(),
+ }).toString()}`
+ );
+
+ useEffect(() => {
+ if (window?.Telegram) {
+ const { first_name, last_name, photo_url } =
+ window?.Telegram?.WebApp?.initDataUnsafe.user || {};
+ setMyInfo({
+ first_name,
+ last_name,
+ photo_url,
+ });
+ }
+ }, []);
+
+ useEffect(() => {
+ const { data: inviteList, me } = inviteDetail || {};
+ if (inviteList && Array.isArray(inviteList)) {
+ setInviteList((prev) =>
+ pageIndex === 0 ? inviteList : [...prev, ...inviteList]
+ );
+ setHasMore(inviteList?.length >= PAGE_SIZE);
+ }
+
+ if (me) {
+ setMyInvited(me);
+ }
+ }, [inviteDetail, pageIndex]);
+
+ useEffect(() => {
+ if (scrollTop && scrollTop < 50 && hasMore && !isLoading) {
+ setPageIndex((prevPageIndex) => prevPageIndex + 1);
+ }
+ }, [hasMore, isLoading, scrollTop]);
+
+ return (
+ <>
+ ([]);
+ const [inviteInfo, setInviteInfo] = useState();
+ const [showShare, setShowShare] = useState(false);
+
+ const { data } = useData(`/api/app/user/task-list?chainId=${chainId}`);
+
+ const { data: inviteDetail } = useData(
+ `/api/app/referral/invite-detail?chainId=${chainId}`
+ );
+
+ useEffect(() => {
+ if (inviteDetail) {
+ setInviteInfo(inviteDetail);
+ }
+ }, [inviteDetail]);
+
+ useEffect(() => {
+ const { taskList } = data || {};
+ if (taskList && Array.isArray(taskList)) {
+ setTasks(taskList);
+ }
+ }, [data, tasks]);
+
+ const refresh = (points?: number) => {
+ mutate(`/api/app/user/task-list?chainId=${chainId}`);
+ if (points) {
+ onReward(points);
+ }
+ };
+
+ return (
+ <>
+ setShowShare(!showShare)}
+ />
+
+ {tasks.map(({ data, userTask }: TaskModuleType, index: number) => (
+ setShowShare(true)}
+ refresh={refresh}
+ description={index === 0 ? "Complete quests to earn rewards!" : ""}
+ key={`${userTask}_${index}`}
+ />
+ ))}
+
+ );
+};
+
+export default Tasks;
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
new file mode 100644
index 0000000..77d697a
--- /dev/null
+++ b/src/components/Profile/index.tsx
@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+
+import TelegramHeader from "@/components/TelegramHeader";
+import { TAB_LIST } from "@/constants/navigation";
+import { PROFILE_TABS } from "@/constants/vote";
+import { useAdsgram } from "@/hooks/useAdsgram";
+import { useUserContext } from "@/provider/UserProvider";
+
+import Tabs from "../Tabs";
+import Achievements from "./components/Achievements";
+import Tasks from "./components/Tasks";
+
+
+
+
+
+const tabs = [{
+ label: PROFILE_TABS.TASK,
+ value: 0,
+}, {
+ label: PROFILE_TABS.ACHIEVEMENTS,
+ value: 1,
+}]
+
+interface IProfileProps {
+ switchTab: (tab: TAB_LIST) => void;
+}
+
+const Profile = ({ switchTab }: IProfileProps) => {
+ const {
+ user,
+ updateUserPoints
+ } = useUserContext();
+ const { userPoints } = user;
+ const [currentTab, setCurrentTab] = useState(0);
+ const scrollViewRef = useRef(null);
+ const [scrollTop, setScrollTop] = useState(0);
+
+ const onReward = (totalPoints: number = 0) => {
+ updateUserPoints(totalPoints);
+ }
+
+ const showAd = useAdsgram({
+ blockId: import.meta.env.VITE_ADSGRAM_ID.toString() || "",
+ onReward,
+ onError: () => {},
+ onSkip: () => {},
+ });
+
+ const handleScroll = useCallback(() => {
+ const scrollRef = scrollViewRef.current;
+ if (scrollRef) {
+ setScrollTop(
+ scrollRef.scrollHeight - scrollRef.scrollTop - scrollRef.clientHeight
+ );
+ }
+ }, [scrollViewRef]);
+
+ useEffect(() => {
+ const scrollRef = scrollViewRef.current;
+ if (currentTab === 1 && scrollRef) {
+ scrollRef.addEventListener("scroll", handleScroll);
+ }
+
+ return () => {
+ if (scrollRef) {
+ scrollRef.removeEventListener("scroll", handleScroll);
+ }
+ };
+ }, [currentTab, handleScroll, scrollViewRef]);
+
+ return (
+ <>
+ ([]);
+ const [pageIndex, setPageIndex] = useState(0);
+
+ const { data, isLoading } = useData(
+ `/api/app/discussion/comment-list?${new URLSearchParams({
+ chainId,
+ skipCount: (pageIndex * PAGE_SIZE).toString(),
+ maxResultCount: PAGE_SIZE.toString(),
+ alias: currentActiveApp?.alias || "",
+ }).toString()}`
+ );
+
+ useEffect(() => {
+ if (data) {
+ setCommentList((prev) => [...prev, ...data.items]);
+ setTotalCount(data.totalCount || 0);
+ onComment?.(data.totalCount);
+ }
+
+ return () => {
+ setCommentList([]);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [data]);
+
+ const { run: onCommentSubmit } = useThrottleFn(
+ async (e) => {
+ try {
+ e.preventDefault();
+ const { data } = await postWithToken(
+ "/api/app/discussion/new-comment",
+ {
+ chainId,
+ alias: currentActiveApp?.alias,
+ comment,
+ }
+ );
+ if (data?.success) {
+ setCommentList((prev) => [data?.comment, ...prev]);
+ setComment("");
+ onComment?.(totalCount + 1);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ },
+ { wait: 700 }
+ );
+
+ const onCommentChange = (value: string) => {
+ setComment(value);
+ };
+
+ return (
+ <>
+
+
+ );
+};
+
+export default AdVideo;
diff --git a/src/components/AppItem/__test__/index.test.tsx b/src/components/AppItem/__test__/index.test.tsx
new file mode 100644
index 0000000..e4d71cf
--- /dev/null
+++ b/src/components/AppItem/__test__/index.test.tsx
@@ -0,0 +1,61 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+import { voteAppData } from "@/__mocks__/VoteApp";
+
+import AppItem from "../index";
+
+const mockUpdateOpenAppClick = vi.fn();
+
+describe("AppItem Component", () => {
+ it("renders with default props correctly", () => {
+ render(
+ 0 ? `${(currentTime / duration) * 100}%` : "0%",
+ }}
+ />
+
+ {
+ onAppItemClick(item);
+ }}
+ className="flex gap-[18px] items-center"
+ >
+ 
+
+ );
+};
+
+export default AppItem;
diff --git a/src/components/AppList/__test__/index.test.tsx b/src/components/AppList/__test__/index.test.tsx
new file mode 100644
index 0000000..803ac3a
--- /dev/null
+++ b/src/components/AppList/__test__/index.test.tsx
@@ -0,0 +1,52 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+import { voteAppListData } from "@/__mocks__/VoteApp";
+
+import AppList from "../index";
+
+const onAppItemClick = vi.fn();
+
+describe("AppList Component", () => {
+ it("renders the title correctly", () => {
+ render(
+
+
+ {item?.title}
+
+
+ {item?.description}
+
+
+ {showArrow && (
+
+ )}
+
+
+ {title}
+
+
+ );
+};
+
+export default AppList;
diff --git a/src/components/BackBtn/__test__/index.test.tsx b/src/components/BackBtn/__test__/index.test.tsx
new file mode 100644
index 0000000..334399e
--- /dev/null
+++ b/src/components/BackBtn/__test__/index.test.tsx
@@ -0,0 +1,57 @@
+// BackBtn.test.tsx
+import { render, screen, fireEvent } from "@testing-library/react";
+import { useNavigate, useLocation } from "react-router-dom";
+import "@testing-library/jest-dom";
+import { describe, it, vi, expect } from "vitest";
+
+import BackBtn from "../index"; // Adjust the path to wherever your component is located
+
+vi.mock("react-router-dom", () => ({
+ ...vi.importActual("react-router-dom"),
+ useNavigate: vi.fn(),
+ useLocation: vi.fn(),
+}));
+
+describe("BackBtn Component", () => {
+ const mockNavigate = vi.fn();
+ const mockLocation = { state: { from: "/previous-route" } };
+
+ beforeEach(() => {
+ // Mock the hooks from react-router-dom
+ (useNavigate as vi.Mock).mockReturnValue(mockNavigate);
+ (useLocation as vi.Mock).mockReturnValue(mockLocation);
+ vi.clearAllMocks();
+ });
+
+ it("renders the button correctly", () => {
+ render(
+ {items?.map((item, index) => (
+
+
+ {options.map((item) => (
+
+ );
+};
+
+export default ButtonRadio;
diff --git a/src/components/CategoryPillList/__test__/index.test.tsx b/src/components/CategoryPillList/__test__/index.test.tsx
new file mode 100644
index 0000000..01004b6
--- /dev/null
+++ b/src/components/CategoryPillList/__test__/index.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "vitest";
+
+import { DISCOVER_CATEGORY } from "@/constants/discover";
+
+import CategoryPillList from "../index";
+
+describe("CategoryPillList Component", () => {
+ it("renders the correct number of categories", () => {
+ render( handleSelect(item)}
+ >
+
+ {item.label}
+
+
+ ))}
+
+ {items.map((item) => (
+
+ );
+};
+
+export default CategoryPillList;
diff --git a/src/components/CheckboxGroup/__test__/index.test.tsx b/src/components/CheckboxGroup/__test__/index.test.tsx
new file mode 100644
index 0000000..d638df9
--- /dev/null
+++ b/src/components/CheckboxGroup/__test__/index.test.tsx
@@ -0,0 +1,61 @@
+// CheckboxGroup.test.tsx
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+import { APP_CATEGORY, DISCOVER_CATEGORY } from "@/constants/discover";
+
+import CheckboxGroup from "../index"; // Adjust to your actual path
+
+const options = DISCOVER_CATEGORY;
+
+describe("CheckboxGroup Component", () => {
+ it("renders all checkbox options", () => {
+ render( handleClick(item.value)}
+ >
+
+
+ ))}
+
+ {options.map((option) => (
+
+ );
+};
+
+export default CheckboxGroup;
diff --git a/src/components/Community/__test__/index.test.tsx b/src/components/Community/__test__/index.test.tsx
new file mode 100644
index 0000000..5995ed1
--- /dev/null
+++ b/src/components/Community/__test__/index.test.tsx
@@ -0,0 +1,80 @@
+// Community.test.tsx
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { MemoryRouter } from "react-router-dom";
+import { describe, it, expect, vi } from "vitest";
+
+import { IToggleSlider } from "@/components/ToggleSlider/type";
+import { COMMUNITY_TYPE } from "@/constants/vote";
+
+import Community from "../index";
+
+vi.mock("../ToggleSlider", () => ({
+ default: ({
+ items,
+ current,
+ onChange,
+ className,
+ activeItemClassName,
+ itemClassName,
+ }: IToggleSlider) => (
+ handleToggle(option.value)}
+ >
+ {option.label}
+
+ ))}
+
+ {items.map((item: string, index: number) => (
+
+ ),
+}));
+
+vi.mock("./components/Archived", () => ({
+ default: ({ type }: { type: COMMUNITY_TYPE }) => (
+ onChange?.(index)}
+ >
+ {item}
+
+ ))}
+
+ {type === COMMUNITY_TYPE.CURRENT && (
+
+ )}
+
+ ),
+}));
+
+describe("Community Component", () => {
+ it("renders the component with ToggleSlider and Archived", () => {
+ render(
+ {data.proposalTitle}
+ ),
+}));
+
+describe("Archived Component", () => {
+ let mockNavigate: ReturnType
+ {type === COMMUNITY_TYPE.CURRENT && (
+
+ )}
+ {sections?.map((vote, index) => (
+
+ );
+};
+
+export default Archived;
diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx
new file mode 100644
index 0000000..426d6e8
--- /dev/null
+++ b/src/components/Community/index.tsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+
+import { COMMUNITY_LABEL, COMMUNITY_TYPE } from "@/constants/vote";
+import useSetSearchParams from "@/hooks/useSetSearchParams";
+
+import Tabs from "../Tabs";
+import Archived from "./components/Archived";
+
+
+
+const communityTabs = [
+ {
+ label: COMMUNITY_LABEL.ARCHIVED,
+ value: 0,
+ },
+ {
+ label: COMMUNITY_LABEL.CURRENT,
+ value: 1,
+ },
+];
+interface ICommunityProps {
+ scrollTop: number;
+}
+
+const Community = ({ scrollTop }: ICommunityProps) => {
+ const { querys, updateQueryParam } = useSetSearchParams();
+ const activeTab = querys.get("community");
+ const [currentTab, setCurrentTab] = useState(
+ activeTab === "0" ? Number(activeTab) : 1
+ );
+
+ const onTabChange = (index: number) => {
+ setCurrentTab(index);
+ updateQueryParam({ key: "community", value: index.toString() });
+ };
+
+ return (
+ <>
+
+
+ )}
+
+
+ Daily Rewards
+
+
+ Log in everyday to earn extra points!
+
+
+
+ {DAILY_REWARDS.map((item, index) => (
+
+
+ );
+};
+
+export default DailyRewards;
diff --git a/src/components/DiscoveryHiddenGems/__test__/index.test.tsx b/src/components/DiscoveryHiddenGems/__test__/index.test.tsx
new file mode 100644
index 0000000..be34d1b
--- /dev/null
+++ b/src/components/DiscoveryHiddenGems/__test__/index.test.tsx
@@ -0,0 +1,37 @@
+// DiscoveryHiddenGems.test.tsx
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi } from "vitest";
+
+import { voteAppData } from "@/__mocks__/VoteApp";
+
+import DiscoveryHiddenGems from "../index";
+
+// Mocking AppItem
+vi.mock("../../AppItem", () => ({
+ default: () => ,
+}));
+
+const mockUpdateOpenAppClick = vi.fn();
+
+describe("DiscoveryHiddenGems Component", () => {
+ it("renders the component with the correct text", () => {
+ render(
+
+ Day {index + 1}
+ {index < claimedDays ? (
+
+ ))}
+
+
+
+ ) : (
+
+ + {item.toLocaleString()}
+
+ )}
+
+
+ );
+};
+
+export default DiscoveryHiddenGems;
diff --git a/src/components/Drawer/__test__/index.test.tsx b/src/components/Drawer/__test__/index.test.tsx
new file mode 100644
index 0000000..00340e6
--- /dev/null
+++ b/src/components/Drawer/__test__/index.test.tsx
@@ -0,0 +1,78 @@
+// Drawer.test.tsx
+import React from "react";
+
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi } from "vitest";
+
+import Drawer from "../index";
+
+// Mock `motion.div` for testing
+vi.mock("framer-motion", async () => {
+ const actual = await vi.importActual("framer-motion");
+ return {
+ ...actual,
+ motion: {
+ div: ({
+ children,
+ className,
+ ...props
+ }: {
+ children: React.ReactNode;
+ className?: string;
+ }) => (
+
+
+
+
+ Discover Hidden Gems!
+
+
+
+ {children}
+
+ ),
+ },
+ };
+});
+
+describe("Drawer Component", () => {
+ it("renders content only when visible", () => {
+ const { rerender } = render(
+ Content
+ Content
+ Content
+ Content
+
+ {children}
+
+ ),
+ Placeholder: ({
+ header,
+ description,
+ className,
+ children,
+ }: {
+ header: string;
+ description: string;
+ className?: string;
+ children?: React.ReactNode;
+ }) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock retrieveLaunchParams
+vi.mock("@telegram-apps/sdk-react", () => ({
+ retrieveLaunchParams: vi.fn(),
+}));
+
+describe("EnvUnsupported Component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks(); // Clear mocks before each test
+ });
+
+ it("renders the Placeholder with default platform when retrieveLaunchParams throws", () => {
+ // Mock retrieveLaunchParams to throw an error
+ (retrieveLaunchParams as ReturnType
+
+
+
+
+
+
+
+ {totalCurrentLikes + likeCount}
+
+ {
+ updateReviewClick(item);
+ window.Telegram.WebApp.HapticFeedback.notificationOccurred(
+ "success"
+ );
+ }}
+ >
+
+
+
+
+
+ {totalComments}
+
+
+
+
+
+
+
+ {totalShares}
+
+
+ 
+
+
+
+ {item.title}
+
+
+ {item.description}
+
+
+
+
+
+ {item.categories?.map((category) => (
+
+
+
+
+ ))}
+
+
+
+
+ {forYouItems?.length > 0 && (
+
+ {forYouItems.map((item, index) => (
+
+ )}
+
+
+ Select Your Areas of Interest
+
+
+ Your preferences will help us create a journey unique to you.
+
+
+
+
+
+
+
+ );
+};
+
+export default ForYou;
diff --git a/src/components/FormItem/__test__/index.test.tsx b/src/components/FormItem/__test__/index.test.tsx
new file mode 100644
index 0000000..5fd1d68
--- /dev/null
+++ b/src/components/FormItem/__test__/index.test.tsx
@@ -0,0 +1,63 @@
+// FormItem.test.tsx
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "vitest";
+
+import FormItem from "../index";
+
+describe("FormItem Component", () => {
+ it("renders the component with label and children", () => {
+ render(
+
+ {item.appType === APP_TYPE.AD && index === currentIndex ? (
+
+ ))}
+
+
+ );
+};
+
+export default FormItem;
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
new file mode 100644
index 0000000..5a45f6b
--- /dev/null
+++ b/src/components/Home/index.tsx
@@ -0,0 +1,334 @@
+import { useEffect, useRef, useState } from "react";
+
+import { chainId } from "@/constants/app";
+import { APP_CATEGORY, DISCOVER_CATEGORY } from "@/constants/discover";
+import { TAB_LIST } from "@/constants/navigation";
+import { TMSAP_TAB, VOTE_TABS } from "@/constants/vote";
+import { useAdsgram } from "@/hooks/useAdsgram";
+import useData, { postWithToken } from "@/hooks/useData";
+import useSetSearchParams from "@/hooks/useSetSearchParams";
+import { useUserContext } from "@/provider/UserProvider";
+import { VoteApp } from "@/types/app";
+
+import AppList from "../AppList";
+import CategoryPillList from "../CategoryPillList";
+import DailyRewards from "../DailyRewards";
+import DiscoveryHiddenGems from "../DiscoveryHiddenGems";
+import Modal from "../Modal";
+import PointsCounter from "../PointsCounter";
+import SearchPanel from "../SearchPanel";
+import TelegramHeader from "../TelegramHeader";
+import TopVotedApps from "../TopVotedApps";
+
+interface IHomeProps {
+ weeklyTopVotedApps: VoteApp[];
+ discoverHiddenGems: VoteApp;
+ madeForYouItems: VoteApp[];
+ onAppItemClick: (item?: VoteApp) => void;
+ recommendList: VoteApp[];
+ switchTab: (tab: TAB_LIST) => void;
+}
+
+const PAGE_SIZE = 20;
+
+const Home = ({
+ onAppItemClick,
+ switchTab,
+ recommendList,
+ weeklyTopVotedApps,
+ discoverHiddenGems,
+ madeForYouItems,
+}: IHomeProps) => {
+ const {
+ user: { userPoints },
+ updateUserPoints,
+ updateDailyLoginPointsStatus,
+ } = useUserContext();
+
+ const [isSearching, setIsSearching] = useState(false);
+ const scrollViewRef = useRef
+
+ {label}
+ {required && *}
+
+ {desc && (
+
+ {desc}
+
+ )}
+
+ {children}
+ {errorText && (
+
+ *{errorText}
+
+ )}
+
+ {
+ setPageIndex(0);
+ setCategory(value);
+ setIsSearching(value !== APP_CATEGORY.ALL);
+ }}
+ />
+ {isSearching ? (
+ 0 || keyward?.length > 0
+ ? searchList
+ : recommendList
+ }
+ updateUserPoints={updateUserPoints}
+ onAppItemClick={onViewApp}
+ />
+ ) : (
+ <>
+
+
+
+
+ {isSearching ? (
+ {
+ setCategory(APP_CATEGORY.ALL);
+ setIsSearching(false);
+ }}
+ />
+ ) : (
+
+ Hi,
+ {window?.Telegram?.WebApp?.initDataUnsafe?.user?.first_name ||
+ " "}
+
+ )}
+
+
+
+ {
+ setPageIndex(0);
+ setKeyward(e.target.value);
+ }}
+ maxLength={200}
+ onFocus={() => {
+ setIsSearching(true);
+ }}
+ />
+
+ {isSearching && keyward.length >= 200 && (
+
+ Should contain no more than 200 characters.
+
+ )}
+
+
+ {
+ updateQueryParam(
+ [
+ {
+ key: "vote_tab",
+ value: VOTE_TABS.TMAS,
+ },
+ {
+ key: "tmas",
+ value: TMSAP_TAB.CURRENT.toString(),
+ },
+ ],
+ true
+ );
+ switchTab(TAB_LIST.VOTE);
+ }}
+ >
+ 
+
+
+
+
+
+
+ Community Leaderboard
+
+
+ Vote for your favourite TMAs
+
+
+
+ onAppItemClick()}
+ >
+
+
+
+
+
+ Browse TMAs
+
+ switchTab(TAB_LIST.PEN)}
+ >
+ 
+
+
+
+
+
+
+ My Profile
+
+
+
+ {children}
;
+ },
+ SwiperSlide: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}));
+
+describe("ImageCarousel", () => {
+ const items = [
+ "https://example.com/image1.jpg",
+ "https://example.com/image2.jpg",
+ "https://example.com/image3.jpg",
+ ];
+
+ it("renders without crashing", () => {
+ render(
+
+ {value && showClearBtn && (
+
+ )}
+
+ );
+};
+
+export default Input;
diff --git a/src/components/InputGroup/__test__/index.test.tsx b/src/components/InputGroup/__test__/index.test.tsx
new file mode 100644
index 0000000..9bc6171
--- /dev/null
+++ b/src/components/InputGroup/__test__/index.test.tsx
@@ -0,0 +1,119 @@
+// InputGroup.test.tsx
+import { ReactNode } from "react";
+
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import InputGroup from "../index";
+import { VoteOption } from "../type";
+
+interface IInputProps {
+ value?: string;
+ maxLength?: number;
+ className?: string;
+ placeholder?: string;
+ showClearBtn?: boolean;
+ onChange?: (value: string) => void;
+}
+
+interface IUploadProps {
+ extensions?: string[];
+ fileLimit?: string;
+ className?: string;
+ needCrop?: boolean;
+ children?: ReactNode;
+ aspect?: number;
+ onFinish?(url: string): void;
+}
+
+// Mock the input and upload components
+vi.mock("../Input", () => ({
+ default: ({ onChange, value, placeholder }: IInputProps) => (
+ onChange?.(e.target.value)}
+ />
+ ),
+}));
+
+vi.mock("../Upload", () => ({
+ default: ({ onFinish }: IUploadProps) => (
+ onFinish?.("new-icon")}
+ />
+ ),
+}));
+
+describe("InputGroup Component", () => {
+ const mockOptions: VoteOption[] = [
+ { id: 1, title: "Option 1" },
+ { id: 2, title: "Option 2" },
+ ];
+
+ let handleChange: (options: VoteOption[]) => void;
+
+ beforeEach(() => {
+ handleChange = vi.fn();
+ });
+
+ it("renders the initial options", () => {
+ render(
+ handleIconChange(index, value)}
+ >
+
+
+ handleInputChange(index, value)}
+ placeholder={`Option ${index + 1}`}
+ maxLength={50}
+ showClearBtn
+ />
+
+ ))}
+
+
+ );
+};
+
+export default InputGroup;
diff --git a/src/components/InputGroup/type/index.ts b/src/components/InputGroup/type/index.ts
new file mode 100644
index 0000000..9989cb2
--- /dev/null
+++ b/src/components/InputGroup/type/index.ts
@@ -0,0 +1,6 @@
+export type VoteOption = {
+ id?: number;
+ title: string;
+ icon?: string;
+ sourceType?: number;
+}
diff --git a/src/components/InviteFriends/index.tsx b/src/components/InviteFriends/index.tsx
new file mode 100644
index 0000000..2e43ae1
--- /dev/null
+++ b/src/components/InviteFriends/index.tsx
@@ -0,0 +1,245 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { useConnectWallet } from "@aelf-web-login/wallet-adapter-react";
+import AElf from "aelf-sdk";
+import { useRequest } from "ahooks";
+import clsx from "clsx";
+import { QRCode } from "react-qrcode-logo";
+import { useCopyToClipboard } from "react-use";
+
+import { connectUrl, portkeyServer, TgLink } from "@/config";
+import { chainId, projectCode } from "@/constants/app";
+import { InviteDetail, IStartAppParams } from "@/types/task";
+import { stringifyStartAppParams } from "@/utils/start-params";
+
+import Drawer from "../Drawer";
+import Loading from "../Loading";
+import { getShareText } from "@/pageComponents/PollDetail/utils";
+
+interface IInviteFriendsStatusProps {
+ data?: InviteDetail;
+ isShowDrawer?: boolean;
+ onClickInvite?(): void;
+}
+
+const InviteFriendsStatus = ({
+ data,
+ isShowDrawer,
+ onClickInvite,
+}: IInviteFriendsStatusProps) => {
+ const [, setCopied] = useCopyToClipboard();
+ const [isCopied, setIsCopied] = useState(false);
+ const [inviteCode, setInviteCode] = useState("");
+ const { walletInfo: wallet, isConnected } = useConnectWallet();
+ const progress = useMemo(() => {
+ if (!data?.totalInvitesNeeded) return 0;
+ const percentage =
+ ((data?.votigramVoteAll || 0) / data?.totalInvitesNeeded) * 100;
+ return percentage < 100 ? percentage : 100;
+ }, [data]);
+
+ const handleCopy = () => {
+ setCopied(tgLinkWithCode);
+ setIsCopied(true);
+ };
+
+ const {
+ run: fetchReferralCode,
+ loading,
+ cancel,
+ } = useRequest(
+ async () => {
+ const timestamp = Date.now();
+ const {
+ portkeyInfo: { walletInfo },
+ publicKey,
+ } = wallet?.extraInfo || {};
+ const message = Buffer.from(
+ `${walletInfo?.address}-${timestamp}`
+ ).toString("hex");
+ const signature = AElf.wallet
+ .sign(message, walletInfo?.keyPair)
+ .toString("hex");
+ const requestObject = {
+ grant_type: "signature",
+ client_id: "CAServer_App",
+ scope: "CAServer",
+ signature: signature,
+ pubkey: publicKey,
+ timestamp: timestamp.toString(),
+ ca_hash: wallet?.extraInfo?.portkeyInfo?.caInfo?.caHash,
+ chain_id: chainId,
+ };
+ const portKeyRes = await fetch(connectUrl + "/connect/token", {
+ method: "POST",
+ body: new URLSearchParams(requestObject).toString(),
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ });
+ const portKeyResObj = await portKeyRes.json();
+ if (portKeyRes?.ok && portKeyResObj?.access_token) {
+ const token = portKeyResObj.access_token;
+ const response = await fetch(
+ portkeyServer +
+ `/api/app/growth/shortLink?projectCode=${projectCode}`,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ const resObj = await response.json();
+ if (resObj?.userGrowthInfo?.inviteCode) {
+ setInviteCode(resObj?.userGrowthInfo?.inviteCode);
+ cancel();
+ }
+ }
+ },
+ {
+ manual: true,
+ pollingInterval: 1500,
+ }
+ );
+
+ const startAppParams: IStartAppParams = {
+ referralCode: inviteCode,
+ };
+ const tgLinkWithCode =
+ TgLink +
+ (inviteCode ? `?startapp=${stringifyStartAppParams(startAppParams)}` : "");
+
+ const shareToTelegram = () => {
+ if (window?.Telegram?.WebApp?.openTelegramLink) {
+ const url = encodeURIComponent(tgLinkWithCode);
+ const shareText = encodeURIComponent(
+ getShareText(
+ `Join Votigram, and Discover more fun Telegram apps with me! 🌐`,
+ `Vote Now and Earn points for USDT airdrop! 🎉`
+ )
+ );
+ window?.Telegram?.WebApp?.openTelegramLink(
+ `https://t.me/share/url?url=${url}&text=${shareText}`
+ );
+ }
+ };
+
+ useEffect(() => {
+ if (isConnected) {
+ fetchReferralCode();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isConnected]);
+
+ useEffect(() => {
+ if (isCopied) {
+ setTimeout(() => {
+ setIsCopied(false);
+ }, 2000);
+ }
+ }, [isCopied]);
+
+ return (
+ <>
+ removeOption(index)}
+ className="ml-[3px] flex items-center justify-center w-[15px] h-[15px] leading-[13px] font-bold text-[16px] bg-transparent border border-input-placeholder text-input-placeholder rounded-[50%] flex-none"
+ >
+ -
+
+
+
+
+
+
+
+ {"Invite friends\n& get points!"}
+
+
+ +{data?.pointsFirstReferralVote?.toLocaleString()}
+
+
+
+
+
+
+
+
+
+ {data?.votigramVoteAll || 0}/{data?.totalInvitesNeeded || 20}
+
+
+ {loading ? (
+
+
+
+
+
+
+ Referral Link
+
+
+
+
+
+ )}
+
+
+ {tgLinkWithCode}
+
+
+ {isCopied ? (
+
+ Copied
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+};
+
+export default Loading;
diff --git a/src/components/Modal/__test__/index.test.tsx b/src/components/Modal/__test__/index.test.tsx
new file mode 100644
index 0000000..b79f36e
--- /dev/null
+++ b/src/components/Modal/__test__/index.test.tsx
@@ -0,0 +1,42 @@
+// Modal.test.tsx
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import Modal from "../index"; // Adjust to your actual path
+
+import "@testing-library/jest-dom";
+
+describe("Modal Component", () => {
+ it("renders children when visible", () => {
+ const childContent = "This is a modal";
+ render(
+ {childContent}
+ {childContent}
+ Content
+
+
+ {children}
+
+
+ )
+ );
+};
+
+export default Modal;
diff --git a/src/components/Navigation/__test__/index.test.tsx b/src/components/Navigation/__test__/index.test.tsx
new file mode 100644
index 0000000..1056a51
--- /dev/null
+++ b/src/components/Navigation/__test__/index.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi } from "vitest";
+
+import { TAB_LIST } from "@/constants/navigation";
+
+import Navigation from "../index";
+
+describe("Navigation Component", () => {
+ const setup = (activeTab = TAB_LIST.HOME) => {
+ const onMenuClick = vi.fn();
+ render(
+
+ );
+};
+
+export default Navigation;
diff --git a/src/components/PointsCounter/__test__/index.test.tsx b/src/components/PointsCounter/__test__/index.test.tsx
new file mode 100644
index 0000000..2dbff6b
--- /dev/null
+++ b/src/components/PointsCounter/__test__/index.test.tsx
@@ -0,0 +1,56 @@
+// PointsCounter.test.tsx
+import { render, screen, act } from "@testing-library/react";
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+
+import PointsCounter from "../index";
+
+import "@testing-library/jest-dom";
+
+describe("PointsCounter Component", () => {
+ let originalRequestAnimationFrame: typeof globalThis.requestAnimationFrame;
+ let animationFrameCallbacks: Array<(timestamp: number) => void> = [];
+
+ beforeEach(() => {
+ // Save original requestAnimationFrame
+ originalRequestAnimationFrame = global.requestAnimationFrame;
+
+ animationFrameCallbacks = [];
+ global.requestAnimationFrame = (callback: (timestamp: number) => void) => {
+ animationFrameCallbacks.push(callback);
+ return animationFrameCallbacks.length - 1;
+ };
+ });
+
+ afterEach(() => {
+ // Restore original requestAnimationFrame
+ global.requestAnimationFrame = originalRequestAnimationFrame;
+ animationFrameCallbacks = [];
+ });
+
+ const triggerAnimationFrames = (frameCount: number, interval: number) => {
+ for (let i = 0; i < frameCount; i++) {
+ act(() => {
+ animationFrameCallbacks.forEach((callback) => callback(i * interval));
+ });
+ }
+ };
+
+ it("renders with the starting count", () => {
+ render( onMenuClick(TAB_LIST.HOME)}
+ >
+
+
+ onMenuClick(TAB_LIST.FOR_YOU)}
+ >
+
+
+ onMenuClick(TAB_LIST.VOTE)}
+ >
+
+
+ onMenuClick(TAB_LIST.PEN)}
+ >
+
+
+
+
+
+
+ Referral Leaderboard
+
+
+ Climb the Referral Leaderboard by inviting friends!
+
+
+
+
+
+ );
+};
+
+export default Achievements;
diff --git a/src/components/Profile/components/Tasks/index.tsx b/src/components/Profile/components/Tasks/index.tsx
new file mode 100644
index 0000000..e0d0479
--- /dev/null
+++ b/src/components/Profile/components/Tasks/index.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+
+import { mutate } from "swr";
+
+import InviteFriendsStatus from "@/components/InviteFriends";
+import TaskModule from "@/components/TaskModule";
+import { chainId } from "@/constants/app";
+import { TAB_LIST } from "@/constants/navigation";
+import useData from "@/hooks/useData";
+import { InviteDetail, TaskModule as TaskModuleType } from "@/types/task";
+interface ITasksProps {
+ totalPoints: number;
+ switchTab: (tab: TAB_LIST) => void;
+ onReward(points?: number): void;
+}
+
+const Tasks = ({ totalPoints, switchTab, onReward }: ITasksProps) => {
+ const [tasks, setTasks] = useState
+ Rank
+
+
+
+ Name
+
+ Invited
+
+
+
+ {myInvited?.rank || "--"}
+
+
+ {inviteList.map((item) => (
+
+ 
+
+
+ {window?.Telegram?.WebApp?.initDataUnsafe?.user?.first_name ||
+ myInvited?.firstName ||
+ " "}
+
+ ME
+
+
+
+
+ {myInvited?.inviteAndVoteCount || 0}
+
+
+
+ {item?.rank || "--"}
+
+
+ ))}
+
+ {isLoading &&
+
+
+ {item?.firstName
+ ? `${item?.firstName} ${item?.lastName}`
+ : `ELF_${item.inviter}_${chainId}`}
+
+
+
+ {item?.inviteAndVoteCount || 0}
+
+
+
+
+ );
+};
+
+export default Profile;
diff --git a/src/components/ProgressBar/__test__/index.test.tsx b/src/components/ProgressBar/__test__/index.test.tsx
new file mode 100644
index 0000000..bef3b21
--- /dev/null
+++ b/src/components/ProgressBar/__test__/index.test.tsx
@@ -0,0 +1,45 @@
+// ProgressBar.test.tsx
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "vitest";
+
+import ProgressBar from "../index";
+
+describe("ProgressBar Component", () => {
+ it("renders with correct width and progress", () => {
+ const { container } = render(
+ 
+
+
+
+
+ Hi,
+ {window?.Telegram?.WebApp?.initDataUnsafe?.user?.first_name ||
+ " "}
+
+
+
+
+ Total earned points:
+
+
+ {userPoints?.userTotalPoints.toLocaleString() || 0}
+
+
+
+
+
+
+
+
+
+ {currentTab === 0 ? (
+
+ 100 ? 100 : progress}%` }}
+ >
+
+
+ );
+};
+
+export default ProgressBar;
diff --git a/src/components/ReviewComment/index.tsx b/src/components/ReviewComment/index.tsx
new file mode 100644
index 0000000..97d8ee9
--- /dev/null
+++ b/src/components/ReviewComment/index.tsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+
+import { useThrottleFn } from "ahooks";
+import clsx from "clsx";
+
+import { chainId } from "@/constants/app";
+import useData, { postWithToken } from "@/hooks/useData";
+import { VoteApp } from "@/types/app";
+import { Comment } from "@/types/comment";
+
+import Loading from "../Loading";
+import ReviewList from "../ReviewList";
+import Textarea from "../Textarea";
+
+interface IReviewDrawerProps {
+ onComment?(totalComments: number): void;
+ onDrawerClose: () => void;
+ currentActiveApp: VoteApp | undefined;
+ setIsInputFocus: (val: boolean) => void;
+}
+
+const PAGE_SIZE = 20;
+
+const ReviewComment = ({
+ onComment,
+ onDrawerClose,
+ currentActiveApp,
+ setIsInputFocus,
+}: IReviewDrawerProps) => {
+ const [totalCount, setTotalCount] = useState(0);
+ const [comment, setComment] = useState("");
+ const [commentList, setCommentList] = useState
+
+ Reviews
+
+
+
+
+ setPageIndex((pageIndex) => pageIndex + 1)}
+ emptyText="Write the first review!"
+ rootClassname="px-5"
+ renderLoading={() => isLoading &&
+
+