diff --git a/app/root.tsx b/app/root.tsx index ec465aa..fb13f2a 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -20,8 +20,8 @@ import { getProviders } from "~/data/providers.js"; import { Sdk } from "@lumeweb/portal-sdk"; import resources from "~/data/resources.js"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import {useEffect, useMemo, useState} from "react"; -import {PinningProcess} from "~/data/pinning.js"; +import { useEffect, useMemo, useState } from "react"; +import { PinningProcess } from "~/data/pinning.js"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, @@ -38,9 +38,8 @@ export function Layout({ children }: { children: React.ReactNode }) { - + {children} - @@ -49,51 +48,59 @@ export function Layout({ children }: { children: React.ReactNode }) { } function App() { - const sdk = useSdk(); - const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]); - useMemo(() => PinningProcess.setupSdk(sdk as Sdk), [sdk]); return ( - - - - - + <> + + + ); } export default function Root() { - const [portalUrl, setPortalUrl] = useState(import.meta.env.VITE_PORTAL_URL); - - useEffect(() => { - if (!portalUrl) { - fetch('/api/meta') - .then(response => response.json()) - .then(data => { - setPortalUrl(`https://${data.domain}`); - }) - .catch((error: any) => { - console.error('Failed to fetch portal url:', error); - }); - } - }, [portalUrl]); - - if (!portalUrl) { - return

Loading...

; - } - + const [portalUrl, setPortalUrl] = useState(import.meta.env.VITE_PORTAL_URL); const sdk = Sdk.create(portalUrl); + + const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]); + + useEffect(() => { + if (sdk) { + PinningProcess.setupSdk(sdk as Sdk); + } + }, [sdk]); + + useEffect(() => { + if (!portalUrl) { + fetch("/api/meta") + .then((response) => response.json()) + .then((data) => { + setPortalUrl(`https://${data.domain}`); + }) + .catch((error) => { + console.error("Failed to fetch portal url:", error); + }); + } + }, [portalUrl]); + + if (!portalUrl) { + return

Loading...

; + } + return ( - + + + + + ); } diff --git a/app/routes/verify.tsx b/app/routes/verify.tsx new file mode 100644 index 0000000..0571b24 --- /dev/null +++ b/app/routes/verify.tsx @@ -0,0 +1,97 @@ +import type { MetaFunction } from "@remix-run/node"; +import { Link, useSearchParams } from "@remix-run/react"; +import { Button } from "~/components/ui/button"; +import logoPng from "~/images/lume-logo.png?url"; +import lumeColorLogoPng from "~/images/lume-color-logo.png?url"; +import discordLogoPng from "~/images/discord-logo.png?url"; +import lumeBgPng from "~/images/lume-bg-image.png?url"; +import { Field } from "~/components/forms"; +import { getFormProps, useForm } from "@conform-to/react"; +import { z } from "zod"; +import { getZodConstraint, parseWithZod } from "@conform-to/zod"; +import { ToastAction } from "~/components/ui/toast"; +import { useGo, useNotification } from "@refinedev/core"; +import { useEffect } from "react"; +import { useMutation, useQuery } from "@tanstack/react-query"; + +export const meta: MetaFunction = () => { + return [{ title: "Verify Email" }]; +}; + +export default function Verify() { + const go = useGo(); + const {open} = useNotification(); + const [searchParams] = useSearchParams(); + const token = searchParams.get("token"); + + const exchangeToken = useQuery({ + queryKey: ["exchange-token", token], + queryFn: () => { + // TODO: api call to exchange token goes here + return new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, 5000); + }); + }, + }); + + const verifyAgain = useMutation({ + mutationFn: () => { + // TODO: api call to verify again goes here + return new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, 5000); + }); + }, + onMutate() { + open?.({ + type: "success", + message: "Email sent", + description: "Please check your email inbox and click the link", + }) + } + }); + + useEffect(() => { + if (exchangeToken.isSuccess) { + go({ to: "/dashboard" }); + } + }, [go, exchangeToken.isSuccess]); + + return ( +
+
+ Lume logo +
+
+

+ {exchangeToken.isLoading + ? "Verifying your email." : null} + + {exchangeToken.isSuccess && !exchangeToken.isLoading ? "Your email has been verified" : null} + {exchangeToken.isError && !exchangeToken.isLoading ? "Something went wrong, please try again" : null} +

+ {exchangeToken.isError ? ( +
+

{exchangeToken.error.message}

+ +
+ ) : null} + {exchangeToken.isSuccess ?

Redirecting to your dashboard

: null} +
+
+ Lume background +
+
+ ); +}