+
diff --git a/app/src/components/layouts/InfoIcon.tsx b/app/src/components/layouts/InfoIcon.tsx
new file mode 100644
index 00000000..0919a78c
--- /dev/null
+++ b/app/src/components/layouts/InfoIcon.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import Image from "next/image";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+
+export const InfoIcon = () => {
+ return (
+ <>
+
+
+ );
+};
diff --git a/app/src/components/layouts/LargeScreenLayout.tsx b/app/src/components/layouts/LargeScreenLayout.tsx
index 82b5581f..fd9ce4a5 100644
--- a/app/src/components/layouts/LargeScreenLayout.tsx
+++ b/app/src/components/layouts/LargeScreenLayout.tsx
@@ -2,6 +2,7 @@
import { ChildrenProps } from "@/types/ChildrenProps";
import React from "react";
+import { InfoIcon } from "./InfoIcon";
import { TopNavbar } from "./navbars/TopNavbar";
import { useZkLogin } from "@mysten/enoki/react";
@@ -11,15 +12,16 @@ export const LargeScreenLayout = ({ children }: ChildrenProps) => {
const { address } = useZkLogin();
return (
-
+ <>
+
+
);
};
diff --git a/app/src/components/layouts/MobileLayout.tsx b/app/src/components/layouts/MobileLayout.tsx
index 19fd302f..49bb77ae 100644
--- a/app/src/components/layouts/MobileLayout.tsx
+++ b/app/src/components/layouts/MobileLayout.tsx
@@ -4,20 +4,20 @@ import React from "react";
import { ChildrenProps } from "@/types/ChildrenProps";
import { TopNavbar } from "./navbars/TopNavbar";
import { useZkLogin } from "@mysten/enoki/react";
+import { InfoIcon } from "@/components/layouts/InfoIcon";
export const MobileLayout = ({ children }: ChildrenProps) => {
const { address } = useZkLogin();
return (
);
};
diff --git a/app/src/components/layouts/navbars/TopNavbar.tsx b/app/src/components/layouts/navbars/TopNavbar.tsx
index a5c5e70d..9ab71f72 100644
--- a/app/src/components/layouts/navbars/TopNavbar.tsx
+++ b/app/src/components/layouts/navbars/TopNavbar.tsx
@@ -3,26 +3,34 @@ import Link from "next/link";
import { UserProfileMenu } from "@/components/general/UserProfileMenu";
import { Balance } from "@/components/general/Balance";
import { useZkLogin } from "@mysten/enoki/react";
+import useScroll from "@/lib/hooks/use-scroll";
export const TopNavbar = () => {
const { address } = useZkLogin();
+ const scrolled = useScroll(10);
return (
-
-
- Plinko Game
-
-
- {!!address && (
-
-
-
+ <>
+
+
+ [Plinko Game] is provided for testnet purposes only and does not involve real money or the opportunity to win real money.
+
+
+
+ Plinko Game
+
+
+ {!!address && (
+
+
+
+
+ )}
- )}
+
-
+
);
};
diff --git a/app/src/components/ui/dialog.tsx b/app/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..981ba03b
--- /dev/null
+++ b/app/src/components/ui/dialog.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+ }: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+ }: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+}
diff --git a/app/src/components/ui/scroll-area.tsx b/app/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..56207bec
--- /dev/null
+++ b/app/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/app/src/lib/hooks/use-scroll.ts b/app/src/lib/hooks/use-scroll.ts
new file mode 100644
index 00000000..3c8014e3
--- /dev/null
+++ b/app/src/lib/hooks/use-scroll.ts
@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useState } from "react";
+
+export default function useScroll(threshold: number) {
+ const [scrolled, setScrolled] = useState(false);
+
+ const onScroll = useCallback(() => {
+ setScrolled(window.pageYOffset > threshold);
+ }, [threshold]);
+
+ useEffect(() => {
+ window.addEventListener("scroll", onScroll);
+ return () => window.removeEventListener("scroll", onScroll);
+ }, [onScroll]);
+
+ return scrolled;
+}