From 039f5dc99767ef7a66cf6ebb3546c473243d85eb Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 10 Dec 2024 16:54:18 +0100 Subject: [PATCH 1/4] feat: 3rd party auth flow --- src/app/(dashboard)/explorer/page.tsx | 15 ++++++++++ src/app/layout.tsx | 13 +++++--- src/components/ConnectDiscord.tsx | 18 +++++++++++ src/components/ConnectResultToast.tsx | 43 +++++++++++++++++++++++++++ 4 files changed, 85 insertions(+), 4 deletions(-) create mode 100644 src/components/ConnectDiscord.tsx create mode 100644 src/components/ConnectResultToast.tsx diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx index 4359238757..81945dc3a2 100644 --- a/src/app/(dashboard)/explorer/page.tsx +++ b/src/app/(dashboard)/explorer/page.tsx @@ -1,4 +1,5 @@ import { AuthBoundary } from "@/components/AuthBoundary"; +import { ConnectDiscord } from "@/components/ConnectDiscord"; import { SignInButton } from "@/components/SignInButton"; import { Suspense } from "react"; import { @@ -42,6 +43,20 @@ const Explorer = async () => { + {/* TODO: delete this before merging the PR */} +
+

+ Connect Discord +

+ You must sign in before connecting your Discord account

+ } + > + + +
+

{children} - + + + + diff --git a/src/components/ConnectDiscord.tsx b/src/components/ConnectDiscord.tsx new file mode 100644 index 0000000000..0729b3589d --- /dev/null +++ b/src/components/ConnectDiscord.tsx @@ -0,0 +1,18 @@ +"use client"; + +// Temp component for testing the connect Discord flow. Should be deleted before merging the PR! + +import { env } from "@/lib/env"; +import { Anchor } from "./ui/Anchor"; + +export const ConnectDiscord = () => { + if (typeof window === "undefined") return null; + + return ( + + Connect Discord + + ); +}; diff --git a/src/components/ConnectResultToast.tsx b/src/components/ConnectResultToast.tsx new file mode 100644 index 0000000000..a7c05e4d7e --- /dev/null +++ b/src/components/ConnectResultToast.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { usePathname, useRouter, useSearchParams } from "next/navigation"; +import { useCallback, useEffect } from "react"; +import { toast } from "sonner"; + +const SUCCESS_PARAM = "connectSuccess"; +const ERROR_MSG_PARAM = "connectErrorMessage"; + +export const ConnectResultToast = () => { + const { push } = useRouter(); + const pathname = usePathname(); + const searchParams = useSearchParams(); + + // TODO: types + const connectSuccessPlatform = searchParams.get(SUCCESS_PARAM); + const connectErrorMessage = searchParams.get(ERROR_MSG_PARAM); + + const removeSearchParam = useCallback( + (param: string) => { + const newSearchParams = new URLSearchParams(searchParams); + newSearchParams.delete(param); + push(`${pathname}?${newSearchParams.toString()}`); + }, + [searchParams, pathname, push], + ); + + useEffect(() => { + if (!connectSuccessPlatform) return; + toast(`Successfully connected ${connectSuccessPlatform}!`); + removeSearchParam(SUCCESS_PARAM); + }, [connectSuccessPlatform, removeSearchParam]); + + useEffect(() => { + if (!connectErrorMessage) return; + toast("Error", { + description: connectErrorMessage, + }); + removeSearchParam(ERROR_MSG_PARAM); + }, [connectErrorMessage, removeSearchParam]); + + return null; +}; From ff0f21af8f4cb64e2978e7e52a458bf33da0e588 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 10 Dec 2024 16:55:21 +0100 Subject: [PATCH 2/4] feat(ConnectResultToast): add toast icons --- src/components/ConnectResultToast.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ConnectResultToast.tsx b/src/components/ConnectResultToast.tsx index a7c05e4d7e..6d0059612a 100644 --- a/src/components/ConnectResultToast.tsx +++ b/src/components/ConnectResultToast.tsx @@ -1,5 +1,6 @@ "use client"; +import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useCallback, useEffect } from "react"; import { toast } from "sonner"; @@ -27,7 +28,9 @@ export const ConnectResultToast = () => { useEffect(() => { if (!connectSuccessPlatform) return; - toast(`Successfully connected ${connectSuccessPlatform}!`); + toast(`Successfully connected ${connectSuccessPlatform}!`, { + icon: , + }); removeSearchParam(SUCCESS_PARAM); }, [connectSuccessPlatform, removeSearchParam]); @@ -35,6 +38,7 @@ export const ConnectResultToast = () => { if (!connectErrorMessage) return; toast("Error", { description: connectErrorMessage, + icon: , }); removeSearchParam(ERROR_MSG_PARAM); }, [connectErrorMessage, removeSearchParam]); From 5847633a3404f73120a4b83506e704baa75faf3c Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 10 Dec 2024 18:31:22 +0100 Subject: [PATCH 3/4] chore: update readme --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1997db2a30..da0c30ee85 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,11 @@ Open source interface for Guild.xyz -- a tool for platformless membership manage ### Running the interface locally 1. `bun i` -2. `bun run dev` -3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`. +2. Append `127.0.0.1 local.openguild.xyz` to `/etc/hosts` +3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local` +4. Run `bun dev`, create certificate if prompted +5. Open `https://local.openguild.xyz:3000` and dismiss the unsecure site warning -Open [http://localhost:3000](http://localhost:3000) in your browser to see the result. ### Getting secret environment variables (for core team members): From 1fdecc35ca020072e17c871b8ae5be5fb76b1bd4 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Tue, 10 Dec 2024 18:32:03 +0100 Subject: [PATCH 4/4] cleanup: remove unnecessary components --- src/app/(dashboard)/explorer/page.tsx | 15 --------------- src/components/ConnectDiscord.tsx | 18 ------------------ 2 files changed, 33 deletions(-) delete mode 100644 src/components/ConnectDiscord.tsx diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx index 81945dc3a2..4359238757 100644 --- a/src/app/(dashboard)/explorer/page.tsx +++ b/src/app/(dashboard)/explorer/page.tsx @@ -1,5 +1,4 @@ import { AuthBoundary } from "@/components/AuthBoundary"; -import { ConnectDiscord } from "@/components/ConnectDiscord"; import { SignInButton } from "@/components/SignInButton"; import { Suspense } from "react"; import { @@ -43,20 +42,6 @@ const Explorer = async () => { - {/* TODO: delete this before merging the PR */} -
-

- Connect Discord -

- You must sign in before connecting your Discord account

- } - > - - -
-

{ - if (typeof window === "undefined") return null; - - return ( - - Connect Discord - - ); -};