-
- {!isUndefined(chartData) ? (
-
- ) : (
-
-
-
- )}
-
-
-
-
-
- {markets.map((market, i) => (
-
-
-
- ))}
+
+ {experiments.map((experiment, index) => (
+
+
- {predictionMarkets.length > 0 ? (
-
-
-
-
- ) : null}
-
-
-
-
+ ))}
-
-
{
- setOnboardingDone(true);
- toggleGuide(false);
- }}
- />
+
);
diff --git a/src/app/apple-icon.png b/src/app/apple-icon.png
index 5be3a9a..d8a92b5 100644
Binary files a/src/app/apple-icon.png and b/src/app/apple-icon.png differ
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 64aac39..ccda0c1 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 05f199b..5c6230f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -81,6 +81,7 @@
--foreground: #171717;
--red-2: #f75c7b;
--green-2: #3fec65;
+ --klerosUIComponentsPrimaryBlue: #4872ff;
}
:root.dark {
@@ -88,6 +89,7 @@
--foreground: #ededed;
--red-2: #ffd2db;
--green-2: #d2ffdc;
+ --klerosUIComponentsPrimaryBlue: #4872ff;
}
body {
diff --git a/src/app/icon0.svg b/src/app/icon0.svg
index 2e9f294..ccdb56b 100644
--- a/src/app/icon0.svg
+++ b/src/app/icon0.svg
@@ -1,3 +1,11 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/icon1.png b/src/app/icon1.png
index d63709d..fffad8e 100644
Binary files a/src/app/icon1.png and b/src/app/icon1.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c340be2..a8d076d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,13 +2,6 @@ import { ThemeProvider } from "next-themes";
import clsx from "clsx";
import localFont from "next/font/local";
-import { headers } from "next/headers";
-import { ToastContainer } from "react-toastify";
-
-import Web3Context from "@/context/Web3Context";
-
-import Footer from "@/components/layout/Footer";
-import Header from "@/components/layout/Header";
import "@kleros/ui-components-library/style.css";
import "./globals.css";
@@ -31,8 +24,6 @@ export default function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
- const cookies = headers().get("cookie");
-
return (
@@ -44,14 +35,9 @@ export default function RootLayout({
"flex size-full flex-col",
)}
>
-
-
-
-
- {children}
-
-
-
+
+ {children}
+
);
diff --git a/src/app/settings/email-confirmation/page.tsx b/src/app/settings/email-confirmation/page.tsx
index 412f3a8..d241ac9 100644
--- a/src/app/settings/email-confirmation/page.tsx
+++ b/src/app/settings/email-confirmation/page.tsx
@@ -1,20 +1,21 @@
"use client";
import React, { useEffect, useRef, useState } from "react";
+import { useAtlasProvider } from "@kleros/kleros-app";
+import { Button } from "@kleros/ui-components-library";
+import clsx from "clsx";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
import { isAddress } from "viem";
-import { Button } from "@kleros/ui-components-library";
+import Loader from "@/components/Loader";
import CheckIcon from "@/assets/svg/check-circle.svg";
-import WarningIcon from "@/assets/svg/warning-outline.svg";
import InvalidIcon from "@/assets/svg/minus-outline.svg";
+import WarningIcon from "@/assets/svg/warning-outline.svg";
-import { useAtlasProvider } from "@kleros/kleros-app";
-import clsx from "clsx";
import { cn } from "@/utils";
-import { useSearchParams } from "next/navigation";
-import Loader from "@/components/Loader";
-import Link from "next/link";
+
import { tgLink } from "@/consts/markets";
enum TextColor {
diff --git a/src/app/settings/layout.tsx b/src/app/settings/layout.tsx
new file mode 100644
index 0000000..b5a6575
--- /dev/null
+++ b/src/app/settings/layout.tsx
@@ -0,0 +1,24 @@
+import { headers } from "next/headers";
+import { ToastContainer } from "react-toastify";
+
+import Web3Context from "@/context/Web3Context";
+
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/Header";
+
+export default function SettingsLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ const cookies = headers().get("cookie");
+
+ return (
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/settings/unsubscribe/page.tsx b/src/app/settings/unsubscribe/page.tsx
new file mode 100644
index 0000000..8821856
--- /dev/null
+++ b/src/app/settings/unsubscribe/page.tsx
@@ -0,0 +1,181 @@
+"use client";
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useAtlasProvider } from "@kleros/kleros-app";
+import { AlertMessage, Button } from "@kleros/ui-components-library";
+import clsx from "clsx";
+import Link from "next/link";
+import { usePrevious } from "react-use";
+import { useAccount } from "wagmi";
+
+import EnsureChain from "@/components/EnsureChain";
+import Loader from "@/components/Loader";
+
+import CheckIcon from "@/assets/svg/check-circle.svg";
+
+import { cn } from "@/utils";
+import { errorToast, infoToast, successToast } from "@/utils/wrapWithToast";
+
+const pageLayoutClassName = clsx(
+ "flex flex-col gap-x-4 gap-y-12 px-4 py-12 md:px-8 lg:px-32",
+ "size-full items-center justify-center",
+ "md:justify-between lg:flex-row",
+);
+
+const Unsubscribe: React.FC = () => {
+ const { address } = useAccount();
+ const [IsUnsubscribed, setIsUnsubscribed] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const {
+ isFetchingUser,
+ isVerified,
+ isSigningIn,
+ isDeletingUser,
+ authoriseUser,
+ deleteUser,
+ userExists,
+ } = useAtlasProvider();
+ const prevIsFetchingUser = usePrevious(isFetchingUser);
+
+ useEffect(() => {
+ if (!address || !isVerified) {
+ setIsLoading(false);
+ return;
+ }
+
+ if (isFetchingUser) {
+ setIsLoading(true);
+ return;
+ }
+
+ if (prevIsFetchingUser) {
+ setIsLoading(false);
+ return;
+ }
+
+ const timeoutId = window.setTimeout(() => setIsLoading(false), 50);
+ return () => window.clearTimeout(timeoutId);
+ }, [address, isVerified, isFetchingUser, prevIsFetchingUser]);
+
+ const isAlreadyUnsubscribed =
+ !isLoading && Boolean(address) && isVerified && !userExists;
+ const showSuccess = IsUnsubscribed || isAlreadyUnsubscribed;
+
+ const handleUnsubscribe = useCallback(async () => {
+ if (!address) return;
+
+ if (!isVerified) {
+ infoToast("Signing in User...");
+ try {
+ await authoriseUser();
+ successToast("Signed In successfully!");
+ } catch (error) {
+ console.error(error);
+ if (error instanceof Error) {
+ errorToast(`Sign-In failed: ${error.message}`);
+ }
+ return;
+ }
+ }
+
+ infoToast("Unsubscribing ...");
+ try {
+ const res = await deleteUser();
+ if (!res) {
+ errorToast("Unsubscribe failed: Unknown error");
+ return;
+ }
+ setIsUnsubscribed(true);
+ successToast("You have been unsubscribed from notifications.");
+ } catch (error) {
+ console.error("Unsubscribe failed:", error);
+ if (error instanceof Error) {
+ errorToast(`Unsubscribe failed: ${error.message}`);
+ }
+ }
+ }, [address, isVerified, authoriseUser, deleteUser]);
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+ {showSuccess ? (
+ <>
+
+
+
+ You have been unsubscribed
+
+
+ You will no longer receive notification emails from Kleros
+ products.
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+ Unsubscribe from Notifications
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Unsubscribe;
diff --git a/src/assets/experiments/movies-dark.svg b/src/assets/experiments/movies-dark.svg
new file mode 100644
index 0000000..940d754
--- /dev/null
+++ b/src/assets/experiments/movies-dark.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/assets/experiments/movies-light.svg b/src/assets/experiments/movies-light.svg
new file mode 100644
index 0000000..b5eb505
--- /dev/null
+++ b/src/assets/experiments/movies-light.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/assets/experiments/realt-dark.svg b/src/assets/experiments/realt-dark.svg
new file mode 100644
index 0000000..e491836
--- /dev/null
+++ b/src/assets/experiments/realt-dark.svg
@@ -0,0 +1,28 @@
+
\ No newline at end of file
diff --git a/src/assets/experiments/realt-light.svg b/src/assets/experiments/realt-light.svg
new file mode 100644
index 0000000..71513e7
--- /dev/null
+++ b/src/assets/experiments/realt-light.svg
@@ -0,0 +1,28 @@
+
\ No newline at end of file
diff --git a/src/assets/png/movies-banner.png b/src/assets/png/movies-banner.png
new file mode 100644
index 0000000..30a6c54
Binary files /dev/null and b/src/assets/png/movies-banner.png differ
diff --git a/src/assets/png/movies-r2-banner.png b/src/assets/png/movies-r2-banner.png
new file mode 100644
index 0000000..9493b75
Binary files /dev/null and b/src/assets/png/movies-r2-banner.png differ
diff --git a/src/assets/png/properties-banner.png b/src/assets/png/properties-banner.png
new file mode 100644
index 0000000..de5157d
Binary files /dev/null and b/src/assets/png/properties-banner.png differ
diff --git a/src/assets/svg/arrow-right.svg b/src/assets/svg/arrow-right.svg
new file mode 100644
index 0000000..8740832
--- /dev/null
+++ b/src/assets/svg/arrow-right.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/src/assets/svg/built-by-kleros.svg b/src/assets/svg/built-by-kleros.svg
new file mode 100644
index 0000000..9ef677a
--- /dev/null
+++ b/src/assets/svg/built-by-kleros.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/svg/eye.svg b/src/assets/svg/eye.svg
new file mode 100644
index 0000000..da227c0
--- /dev/null
+++ b/src/assets/svg/eye.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/svg/foresight-logo-navbar.svg b/src/assets/svg/foresight-logo-navbar.svg
new file mode 100644
index 0000000..283ecd0
--- /dev/null
+++ b/src/assets/svg/foresight-logo-navbar.svg
@@ -0,0 +1,16 @@
+
diff --git a/src/assets/svg/homepage-overlay.svg b/src/assets/svg/homepage-overlay.svg
new file mode 100644
index 0000000..4b8cc70
--- /dev/null
+++ b/src/assets/svg/homepage-overlay.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/assets/svg/tag-category.svg b/src/assets/svg/tag-category.svg
new file mode 100644
index 0000000..4f2e277
--- /dev/null
+++ b/src/assets/svg/tag-category.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/src/components/ExperimentCard/index.tsx b/src/components/ExperimentCard/index.tsx
new file mode 100644
index 0000000..4b6cebf
--- /dev/null
+++ b/src/components/ExperimentCard/index.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { useState } from "react";
+
+import clsx from "clsx";
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import Countdown, { type CountdownRenderProps } from "react-countdown";
+
+import RealtDarkIcon from "@/assets/experiments/realt-dark.svg";
+import RealtLightIcon from "@/assets/experiments/realt-light.svg";
+import ArrowIcon from "@/assets/svg/arrow-right.svg";
+import TradingIcon from "@/assets/svg/chart-bar.svg";
+import CountdownIcon from "@/assets/svg/cronometer.svg";
+import TagIcon from "@/assets/svg/tag-category.svg";
+
+import { type ExperimentStatus, type IExperiment } from "@/consts/experiments";
+
+const IMAGE_HEIGHT_DEFAULT = 180;
+const IMAGE_HEIGHT_HOVERED = 80;
+
+const statusStyles: Record<
+ ExperimentStatus,
+ { label: string; className: string }
+> = {
+ live: {
+ label: "Live",
+ className: "bg-[#00c853] text-white",
+ },
+ ended: {
+ label: "Ended",
+ className:
+ "bg-white/80 text-gray-700 backdrop-blur-sm dark:bg-black/60 dark:text-gray-300",
+ },
+ "coming soon": {
+ label: "Coming Soon",
+ className: "bg-klerosUIComponentsPrimaryBlue text-white",
+ },
+};
+
+const iconMap: Record<
+ string,
+ | {
+ type: "image";
+ light: string;
+ dark: string;
+ width: number;
+ height: number;
+ }
+ | {
+ type: "svg";
+ light: React.FC
>;
+ dark: React.FC>;
+ }
+> = {
+ movie: {
+ type: "image",
+ light: "/experiment-icons/movie-light.png",
+ dark: "/experiment-icons/movie-dark.png",
+ width: 46,
+ height: 40,
+ },
+ realt: { type: "svg", light: RealtLightIcon, dark: RealtDarkIcon },
+};
+
+const countdownRenderer = ({
+ days,
+ hours,
+ minutes,
+ completed,
+}: CountdownRenderProps) => {
+ if (completed) {
+ return (
+
+ Ended
+
+ );
+ }
+ return (
+
+ {days > 0 && `${days}d `}
+ {hours > 0 && `${hours}h:`}
+ {minutes > 0 && `${minutes}m `}
+
+ );
+};
+
+export interface ExperimentCardProps extends IExperiment {
+ priority?: boolean;
+}
+
+const ExperimentCard: React.FC = ({
+ name,
+ question,
+ url,
+ icon,
+ banner,
+ countLabel,
+ tradingPeriod,
+ endTime,
+ status,
+ priority = false,
+}) => {
+ const [hovered, setHovered] = useState(false);
+ const icons = iconMap[icon];
+
+ return (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ >
+
+
+
+
+
+
+
+ {statusStyles[status].label}
+
+
+
+
+
+
+
+ {name}
+
+
+ {question}
+
+
+
+
+
+ {countLabel}
+
+
+
+ {hovered ? (
+
+
+
+
+ Trading Period:
+
+
+ {tradingPeriod}
+
+
+
+
+
+ Countdown:
+
+
+
+
+ ) : null}
+
+
+ {icons?.type === "image" ? (
+ <>
+
+
+
+ ) : icons?.type === "svg" ? (
+ (() => {
+ const LightIcon = icons.light;
+ const DarkIcon = icons.dark;
+ return (
+ <>
+
+
+
+ );
+ })()
+ ) : null}
+
+
+
-
-
-
-
- );
- }
-
return (
-
-
-
+
+
+
+
);
};
diff --git a/src/components/layout/Header/Menu/Settings/Notifications/FormContactDetails/index.tsx b/src/components/layout/Header/Menu/Settings/Notifications/FormContactDetails/index.tsx
index 029a664..f8d74a6 100644
--- a/src/components/layout/Header/Menu/Settings/Notifications/FormContactDetails/index.tsx
+++ b/src/components/layout/Header/Menu/Settings/Notifications/FormContactDetails/index.tsx
@@ -1,7 +1,13 @@
import React, { useCallback, useEffect, useState } from "react";
import { useAtlasProvider } from "@kleros/kleros-app";
-import { Button, Form, TextField } from "@kleros/ui-components-library";
+import {
+ AlertMessage,
+ Button,
+ Form,
+ TextField,
+} from "@kleros/ui-components-library";
+import clsx from "clsx";
import { useAccount } from "wagmi";
import InfoCard from "@/components/InfoCard";
@@ -11,13 +17,17 @@ import { timeLeftUntil } from "@/utils/date";
import { errorToast, infoToast, successToast } from "@/utils/wrapWithToast";
import EmailVerificationInfo from "./EmailVerificationInfo";
-import clsx from "clsx";
// https://www.w3.org/TR/2012/WD-html-markup-20120329/input.email.html#input.email.attrs.value.single
export const EMAIL_REGEX =
// eslint-disable-next-line max-len
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const unsubscribeButtonClassName = clsx(
+ "bg-klerosUIComponentsError! hover:bg-klerosUIComponentsError! hover:opacity-75",
+ "border-klerosUIComponentsError! [&_.button-text]:text-wrap! [&_.button-text]:text-white!",
+);
+
type FormDetailsParams = {
togglePopup: () => void;
isPostPrediction?: boolean;
@@ -29,6 +39,7 @@ const FormContactDetails: React.FC
= ({
infoText,
}) => {
const [emailInput, setEmailInput] = useState("");
+ const [isConfirmingUnsubscribe, setIsConfirmingUnsubscribe] = useState(false);
const { address } = useAccount();
const {
user,
@@ -37,6 +48,8 @@ const FormContactDetails: React.FC = ({
addUser,
updateEmail,
isUpdatingUser,
+ isDeletingUser,
+ deleteUser,
userExists,
isVerified,
authoriseUser,
@@ -72,6 +85,27 @@ const FormContactDetails: React.FC = ({
}
}, [authoriseUser]);
+ const handleConfirmUnsubscribe = useCallback(async () => {
+ if (isUndefined(address)) return;
+
+ infoToast("Unsubscribing ...");
+ deleteUser()
+ .then((res) => {
+ if (!res) {
+ errorToast("Unsubscribe failed: Unknown error");
+ return;
+ }
+ setEmailInput("");
+ setIsConfirmingUnsubscribe(false);
+ successToast("You have been unsubscribed from notifications.");
+ togglePopup();
+ })
+ .catch((err) => {
+ console.error("Unsubscribe failed:", err);
+ errorToast(`Unsubscribe failed: ${err?.message || "Unknown error"}`);
+ });
+ }, [address, deleteUser, togglePopup]);
+
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!address || isFetchingUser) {
@@ -122,6 +156,7 @@ const FormContactDetails: React.FC = ({
isAddingUser ||
isFetchingUser ||
isUpdatingUser ||
+ isDeletingUser ||
!isEmailUpdateable ||
isSigningIn
}
@@ -174,13 +209,51 @@ const FormContactDetails: React.FC = ({
}
/>
) : null}
+ {!isPostPrediction && isConfirmingUnsubscribe ? (
+
+ ) : null}
{isPostPrediction ? (
{SubscribeButton}
) : (
- {SubscribeButton}
+
+ {isConfirmingUnsubscribe ? (
+ <>
+
+
)}
diff --git a/src/components/layout/HomepageHeader.tsx b/src/components/layout/HomepageHeader.tsx
new file mode 100644
index 0000000..f600750
--- /dev/null
+++ b/src/components/layout/HomepageHeader.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import clsx from "clsx";
+import dynamic from "next/dynamic";
+import { useToggle } from "react-use";
+
+import LightButton from "@/components/LightButton";
+import ThemeToggle from "@/components/ThemeToggle";
+
+import HelpIcon from "@/assets/menu-icons/help.svg";
+
+import Logo from "./Header/Logo";
+
+const Help = dynamic(() => import("./Header/Menu/Help"), { ssr: false });
+
+const HomepageHeader: React.FC = () => {
+ const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
+
+ return (
+
+
+
+
+
+ }
+ onPress={toggleIsHelpOpen}
+ />
+
+
+
+
+ {isHelpOpen ? (
+
+ ) : null}
+