diff --git a/components/PromptInstall.tsx b/components/PromptInstall.tsx new file mode 100644 index 0000000..6b4a79b --- /dev/null +++ b/components/PromptInstall.tsx @@ -0,0 +1,50 @@ +import Image from "next/image"; +import React from "react"; +import { GrDownload } from "react-icons/gr"; + +export default function PromptInstall({ + fun, + open, + close, +}: { + fun: () => void; + open: boolean; + close: () => void; +}) { + return open ? ( +
+
+
+ selected +

Install Our App

+
+

+ Get our App experience optimized for your device. +

+ +
+
+
+ ) : ( + <> + ); +} diff --git a/layout/Header.tsx b/layout/Header.tsx index 6c7ec0b..250ab44 100644 --- a/layout/Header.tsx +++ b/layout/Header.tsx @@ -1,16 +1,22 @@ "use client"; -import { HeaderProps } from "@/config"; import { chain } from "@/constant"; import { useChain } from "@cosmos-kit/react"; import Image from "next/image"; import Link from "next/link"; +import { useEffect, useState } from "react"; -export default function Header({ - profileName, - setIsLogin, - isLogin, -}: HeaderProps) { +export default function Header() { const { connect, address } = useChain(chain); + const [isLogin, setIsLogin] = useState(false); + + useEffect(() => { + const loginStat = localStorage.getItem("loggedIn"); + loginStat === "yes" ? setIsLogin(true) : setIsLogin(false); + }, []); + + useEffect(() => { + localStorage.loggedIn = isLogin ? "yes" : "no"; + }, [isLogin]); const handleProfileIconClick = async () => { if (!address) { diff --git a/pages/404.tsx b/pages/404.tsx index 23b0429..29c1c97 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -1,11 +1,23 @@ +import Image from "next/image"; import Link from "next/link"; export default function NotFound() { return ( -
-

Not Found

-

Could not find requested resource

- Return Home +
+ {"404 +

Page Not Found

+ + Go To Home +
); } diff --git a/pages/500.tsx b/pages/500.tsx index 9c765f0..fdcfe05 100644 --- a/pages/500.tsx +++ b/pages/500.tsx @@ -1,10 +1,24 @@ +import Image from "next/image"; +import Link from "next/link"; + // pages/error.tsx export default function ErrorPage() { - return ( -
-

Error

-

The requested profile does not exist.

-
- ); - } - \ No newline at end of file + return ( +
+ {"500 +

An Error Occurred

+ + Go To Home + +
+ ); +} diff --git a/pages/[id]/index.tsx b/pages/[id]/index.tsx index 50ebe24..9b548bc 100644 --- a/pages/[id]/index.tsx +++ b/pages/[id]/index.tsx @@ -1,7 +1,6 @@ "use client"; import Loading from "@/components/Loading"; import { defaultChainName } from "@/config"; -import Header from "@/layout/Header"; import { isValidReferrer, showToastMessage, updateMyAmiList } from "@/utils"; import ProfilePrivateView from "@/views/profile/ProfilePrivateView"; import ProfilePublicView from "@/views/profile/ProfilePublicView"; @@ -19,6 +18,11 @@ export default function Profile() { const [isMyProfile, setIsMyProfile] = useState(false); const [isLoading, setIsLoading] = useState(true); + useEffect(() => { + const loginStat = localStorage.getItem("loggedIn"); + loginStat === "yes" ? setIsLogin(true) : setIsLogin(false); + }, []); + useEffect(() => { const fetchData = async () => { // Redirect to error page if PROFILE_NAME is not available @@ -150,11 +154,6 @@ export default function Profile() { return ( <> -
{isMyProfile ? ( <> diff --git a/pages/_app.tsx b/pages/_app.tsx index 7910b44..5f0ffa0 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -20,6 +20,8 @@ import { SignerOptions, wallets } from "cosmos-kit"; import Head from "next/head"; import { ToastContainer } from "react-toastify"; import { aminoTypes, registry } from "../config/defaults"; +import PromptInstall from "@/components/PromptInstall"; +import Header from "@/layout/Header"; const queryClient = new QueryClient({ defaultOptions: { @@ -38,6 +40,8 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { // State to manage loading screen const [isLoading, setIsLoading] = useState(false); + const [deferredPrompt, setDeferredPrompt] = useState(null); + const [isInstallable, setIsInstallable] = useState(false); const signerOptions: SignerOptions = { // @ts-ignore @@ -94,6 +98,38 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { }; }, [router]); + // Checking if Install Prompt should be opened (only on load) + useEffect(() => { + const handleBeforeInstallPrompt = (e: Event) => { + e.preventDefault(); + setDeferredPrompt(e); + setIsInstallable(true); + }; + window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt); + return () => { + window.removeEventListener( + "beforeinstallprompt", + handleBeforeInstallPrompt + ); + }; + }, []); + + const handleInstall = async () => { + if (deferredPrompt) { + const promptEvent = deferredPrompt as any; + promptEvent.prompt(); + const choiceResult = await promptEvent.userChoice; + if (choiceResult.outcome === "accepted") { + console.log("PWA installation accepted"); + } else { + console.log("PWA installation dismissed"); + } + + setDeferredPrompt(null); + setIsInstallable(false); + } + }; + return ( <> @@ -188,7 +224,13 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) { minHeight="100dvh" backgroundColor={useColorModeValue("#ffffff", "#ffffff")} > +
+ setIsInstallable(false)} + /> {isLoading && } diff --git a/pages/search/index.tsx b/pages/search/index.tsx index 74ed694..d3820e9 100644 --- a/pages/search/index.tsx +++ b/pages/search/index.tsx @@ -95,7 +95,7 @@ export default function Home() { }, [address]); return ( -
+
\ No newline at end of file diff --git a/public/assets/images/error.svg b/public/assets/images/error.svg new file mode 100644 index 0000000..482c79e --- /dev/null +++ b/public/assets/images/error.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/icons/download.svg b/public/assets/images/icons/download.svg new file mode 100644 index 0000000..0ae87f6 --- /dev/null +++ b/public/assets/images/icons/download.svg @@ -0,0 +1,4 @@ + + + +