`
+ )}")`,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+ )
+}
+
+export default CreateProfile
diff --git a/src/app/(marketing)/create-profile/page.tsx b/src/app/(marketing)/create-profile/page.tsx
new file mode 100644
index 0000000000..c331fa5706
--- /dev/null
+++ b/src/app/(marketing)/create-profile/page.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { Anchor } from "@/components/ui/Anchor"
+import { Button, buttonVariants } from "@/components/ui/Button"
+import { SignIn } from "@phosphor-icons/react"
+import { useSetAtom } from "jotai"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect } from "react"
+
+const Page = () => {
+ const { isWeb3Connected } = useWeb3ConnectionManager()
+ const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
+ const router = useRouter()
+ const searchParams = useSearchParams()
+
+ useEffect(() => {
+ if (isWeb3Connected) {
+ router.replace(
+ ["/create-profile/claim-pass", searchParams]
+ .filter(Boolean)
+ .map(String)
+ .join("?")
+ )
+ }
+ }, [isWeb3Connected, router.replace, searchParams])
+
+ return (
+
+
+
+ Sign in to create your profile
+
+
+ Start your new profile adventure by signing in: earn experience, display
+ achievements and explore new rewards!
+
+
+
+
+ Back to home
+
+
+
+
+ )
+}
+
+export default Page
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
new file mode 100644
index 0000000000..e3f8a256f3
--- /dev/null
+++ b/src/app/(marketing)/layout.tsx
@@ -0,0 +1,13 @@
+import { ConfettiProvider } from "@/components/Confetti"
+import type { Metadata } from "next"
+import { PropsWithChildren } from "react"
+
+export const metadata: Metadata = {
+ title: "Create profile",
+}
+
+const Layout = ({ children }: PropsWithChildren) => {
+ return
{children}
+}
+
+export default Layout
diff --git a/src/app/(marketing)/profile/[username]/not-found.tsx b/src/app/(marketing)/profile/[username]/not-found.tsx
new file mode 100644
index 0000000000..9fd2f43c83
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/not-found.tsx
@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/Button"
+import { House } from "@phosphor-icons/react/dist/ssr"
+import GuildGhost from "static/avatars/58.svg"
+
+const NotFound = () => {
+ return (
+
+
+
+
Profile not found
+
+
+
+
+
+ )
+}
+
+export default NotFound
diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
new file mode 100644
index 0000000000..c73bc6c504
--- /dev/null
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -0,0 +1,154 @@
+import { Header } from "@/components/Header"
+import {
+ Layout,
+ LayoutBanner,
+ LayoutFooter,
+ LayoutHero,
+ LayoutMain,
+} from "@/components/Layout"
+import { SWRProvider } from "@/components/SWRProvider"
+import { Anchor } from "@/components/ui/Anchor"
+import { Guild, Role, Schemas } from "@guildxyz/types"
+import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import { env } from "env"
+import Image from "next/image"
+import { notFound, redirect } from "next/navigation"
+import { Profile } from "../_components/Profile"
+import { ProfileColorBanner } from "../_components/ProfileColorBanner"
+import { ProfileHero } from "../_components/ProfileHero"
+
+const api = env.NEXT_PUBLIC_API
+
+async function ssrFetcher
(...args: Parameters) {
+ return (await fetch(...args)).json() as T
+}
+
+const fetchPublicProfileData = async ({ username }: { username: string }) => {
+ const contributionsRequest = new URL(`v2/profiles/${username}/contributions`, api)
+ const profileRequest = new URL(`v2/profiles/${username}`, api)
+ const profileResponse = await fetch(profileRequest, {
+ next: {
+ tags: ["profile"],
+ revalidate: 3600,
+ },
+ })
+
+ if (profileResponse.status === 404) notFound()
+ if (!profileResponse.ok) redirect("/error")
+
+ const profile = (await profileResponse.json()) as Schemas["Profile"]
+ const contributions = await ssrFetcher(
+ contributionsRequest,
+ {
+ next: {
+ tags: ["contributions"],
+ revalidate: 3600,
+ },
+ }
+ )
+ const roleRequests = contributions.map(
+ ({ roleId, guildId }) => new URL(`v2/guilds/${guildId}/roles/${roleId}`, api)
+ )
+ const guildRequests = contributions.map(
+ ({ guildId }) => new URL(`v2/guilds/${guildId}`, api)
+ )
+ const guilds = await Promise.all(
+ guildRequests.map((req) =>
+ ssrFetcher(req, {
+ next: {
+ revalidate: 3 * 3600,
+ },
+ })
+ )
+ )
+ const roles = await Promise.all(
+ roleRequests.map((req) =>
+ ssrFetcher(req, {
+ next: {
+ revalidate: 3 * 3600,
+ },
+ })
+ )
+ )
+ const guildsZipped = Object.fromEntries(
+ guildRequests.map(({ pathname }, i) => [pathname, guilds[i]])
+ )
+ const rolesZipped = Object.fromEntries(
+ roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
+ )
+ return {
+ profile,
+ fallback: {
+ [profileRequest.pathname]: profile,
+ [contributionsRequest.pathname]: contributions,
+ ...guildsZipped,
+ ...rolesZipped,
+ },
+ }
+}
+
+const Page = async ({ params: { username } }: { params: { username: string } }) => {
+ const { fallback, profile } = await fetchPublicProfileData({ username })
+
+ const isBgColor = profile.backgroundImageUrl?.startsWith("#")
+
+ return (
+
+
+
+
+
+ {isBgColor ? (
+
+ ) : (
+ profile.backgroundImageUrl && (
+
+ )
+ )}
+
+
+
+
+
+
+
+
+
+ Guild Profiles are currently in invite only early access, only available
+ to{" "}
+
+ Subscribers
+
+
+
+
+
+
+ )
+}
+
+// biome-ignore lint/style/noDefaultExport: page route
+export default Page
diff --git a/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
new file mode 100644
index 0000000000..3f070e8022
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/CardWithGuildLabel.tsx
@@ -0,0 +1,54 @@
+import { CheckMark } from "@/components/CheckMark"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { Card } from "@/components/ui/Card"
+import { cn } from "@/lib/utils"
+import { Guild } from "@guildxyz/types"
+import Color from "color"
+import { PropsWithChildren } from "react"
+
+export const CardWithGuildLabel = ({
+ guild,
+ children,
+}: PropsWithChildren<{ guild: Guild }>) => {
+ const color = guild.theme.color && Color(guild.theme.color)
+
+ return (
+
+
+
+
+
+
+
+
+ {guild.name}
+
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/(marketing)/profile/_components/ContributionCard.tsx b/src/app/(marketing)/profile/_components/ContributionCard.tsx
new file mode 100644
index 0000000000..08347d0bde
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ContributionCard.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import { Guild, Role, Schemas } from "@guildxyz/types"
+import useSWRImmutable from "swr/immutable"
+import { ContributionCardView } from "./ContributionCardView"
+
+export const ContributionCard = ({
+ contribution,
+}: { contribution: Schemas["Contribution"] }) => {
+ const guild = useSWRImmutable(`/v2/guilds/${contribution.guildId}`)
+ const role = useSWRImmutable(
+ `/v2/guilds/${contribution.guildId}/roles/${contribution.roleId}`
+ )
+ if (!role.data || !guild.data) return
+ return
+}
diff --git a/src/app/(marketing)/profile/_components/ContributionCardView.tsx b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
new file mode 100644
index 0000000000..b3660e4b6d
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ContributionCardView.tsx
@@ -0,0 +1,44 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Separator } from "@/components/ui/Separator"
+import { Guild, Role } from "@guildxyz/types"
+import { Users } from "@phosphor-icons/react/dist/ssr"
+import { CardWithGuildLabel } from "./CardWithGuildLabel"
+
+export const ContributionCardView = ({
+ guild,
+ role,
+}: { guild: Guild; role: Role }) => {
+ return (
+
+
+
+
+
+
+
+
+ TOP ROLE
+
+
+ {role.name}
+
+
+
+
+ Only {((role.memberCount / guild.memberCount || 0) * 100).toFixed(1)}%
+ of members have this role
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export const EditContributions = () => {
+ const contributions = useContributions()
+ const memberships = useMemberships()
+ const [guildId, setGuildId] = useState("")
+ const [roleId, setRoleId] = useState("")
+ const { toast } = useToast()
+
+ const { data: baseGuilds } = useYourGuilds()
+ const guilds = baseGuilds?.filter(({ tags }) => tags.includes("VERIFIED"))
+
+ const roleIds = memberships.data?.find(
+ (membership) => membership.guildId.toString() === guildId
+ )?.roleIds
+ const createContribution = useCreateContribution()
+
+ return (
+
+ )
+}
+
+const GuildSelectItem = ({ guildId }: Pick) => {
+ const { data } = useSWRImmutable(`/v2/guilds/${guildId}`)
+ if (!data) return
+ return (
+
+
+
+ )
+}
+
+const RoleSelectItem = ({
+ roleId,
+ guildId,
+}: Pick & {
+ roleId: MembershipResult["roleIds"][number]
+}) => {
+ const { data: data } = useSWRImmutable(
+ `/v2/guilds/${guildId}/roles/${roleId}`
+ )
+ if (!data) return
+ return (
+
+
+
+ )
+}
diff --git a/src/app/(marketing)/profile/_components/EditProfile/EditProfile.tsx b/src/app/(marketing)/profile/_components/EditProfile/EditProfile.tsx
new file mode 100644
index 0000000000..0a720d30df
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/EditProfile/EditProfile.tsx
@@ -0,0 +1,211 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { Button } from "@/components/ui/Button"
+import {
+ Dialog,
+ DialogBody,
+ DialogCloseButton,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/Dialog"
+import {
+ FormControl,
+ FormErrorMessage,
+ FormField,
+ FormItem,
+ FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import { Separator } from "@/components/ui/Separator"
+import { Textarea } from "@/components/ui/Textarea"
+import { toast } from "@/components/ui/hooks/useToast"
+import { useDisclosure } from "@/hooks/useDisclosure"
+import { cn } from "@/lib/utils"
+import { Schemas, schemas } from "@guildxyz/types"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { User } from "@phosphor-icons/react"
+import useDropzone from "hooks/useDropzone"
+import usePinata from "hooks/usePinata"
+import { PropsWithChildren, useState } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import { useDeleteProfile } from "../../_hooks/useDeleteProfile"
+import { useProfile } from "../../_hooks/useProfile"
+import { useUpdateProfile } from "../../_hooks/useUpdateProfile"
+import { EditProfileBanner } from "./EditProfileBanner"
+
+export const EditProfile = ({ children }: PropsWithChildren) => {
+ const { data: profile } = useProfile()
+ const form = useForm({
+ resolver: zodResolver(schemas.ProfileUpdateSchema),
+ defaultValues: {
+ ...schemas.ProfileUpdateSchema.parse(profile),
+ },
+ mode: "onTouched",
+ })
+ const disclosure = useDisclosure()
+ const editProfile = useUpdateProfile()
+
+ async function onSubmit(values: Schemas["Profile"]) {
+ await editProfile.onSubmit(schemas.ProfileUpdateSchema.parse(values))
+ if (editProfile.error) return
+ disclosure.onClose()
+ }
+
+ const { isUploading, onUpload } = usePinata({
+ control: form.control,
+ fieldToSetOnSuccess: "profileImageUrl",
+ onError: (error) => {
+ toast({
+ variant: "error",
+ title: "Failed to upload file",
+ description: error,
+ })
+ },
+ })
+
+ const [uploadProgress, setUploadProgress] = useState(0)
+ const { isDragActive, getRootProps } = useDropzone({
+ multiple: false,
+ noClick: false,
+ onDrop: (acceptedFiles) => {
+ if (!acceptedFiles[0]) return
+ onUpload({
+ data: [acceptedFiles[0]],
+ onProgress: setUploadProgress,
+ })
+ },
+ onError: (error) => {
+ toast({
+ variant: "error",
+ title: `Failed to upload file`,
+ description: error.message,
+ })
+ },
+ })
+
+ const deleteProfile = useDeleteProfile()
+
+ return (
+
+ )
+}
diff --git a/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx b/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
new file mode 100644
index 0000000000..d0e0a66539
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx
@@ -0,0 +1,73 @@
+import { Button } from "@/components/ui/Button"
+import { FormField, FormItem } from "@/components/ui/Form"
+import { Separator } from "@/components/ui/Separator"
+import { useToast } from "@/components/ui/hooks/useToast"
+import { Eyedropper, Image as ImageIcon } from "@phosphor-icons/react"
+import usePinata from "hooks/usePinata"
+import { ProfileBackgroundImageUploader } from "./ProfileBackgroundImageUploader"
+import { ProfileColorPicker } from "./ProfileColorPicker"
+
+export const EditProfileBanner = () => {
+ const { toast } = useToast()
+
+ // todo: move this up to the wrapper component & disable the save button while loading
+ const backgroundUploader = usePinata({
+ fieldToSetOnSuccess: "backgroundImageUrl",
+ onError: (err) =>
+ toast({
+ variant: "error",
+ title: "Error",
+ description: err,
+ }),
+ })
+
+ return (
+ (
+
+
+ {field.value?.startsWith("http") || field.value?.startsWith("/") ? (
+
+ ) : (
+
+ )}
+
+
Top contributions
+
+
+
+
+ {contributions.length === 0 && (
+
+
+
+
+ Contributions will appear here
+
+
+ This profile doesn't have any contribution yet
+
+
+ )}
+ {contributions.map((contribution) => (
+
+ ))}
+
+
Recent activity
+
+
+ … only last 20 actions are shown
+
+
+ {children}
+
+)
diff --git a/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx b/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
new file mode 100644
index 0000000000..83736a40c1
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ProfileColorBanner.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import Color from "color"
+import { useProfile } from "../_hooks/useProfile"
+
+// This works great with most colors in dark mode (yellow / green shades not so much).
+// In light mode we could introduce a layered design so the header section is always dark,
+// and further optimize for bright vivid colors, for it to be a complete robust solution
+export const ProfileColorBanner = () => {
+ const { data: profile } = useProfile()
+
+ if (!profile?.backgroundImageUrl?.startsWith("#")) return null
+
+ const color = Color(profile.backgroundImageUrl)
+ const patternOpacity =
+ color.lightness() > 90
+ ? "opacity-20"
+ : color.lightness() > 75
+ ? "opacity-15"
+ : color.lightness() > 60
+ ? "opacity-10"
+ : "opacity-5"
+
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx
new file mode 100644
index 0000000000..ace0273537
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { CheckMark } from "@/components/CheckMark"
+import { LayoutContainer } from "@/components/Layout"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
+import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Button } from "@/components/ui/Button"
+import { Card } from "@/components/ui/Card"
+import { Separator } from "@/components/ui/Separator"
+import { Skeleton } from "@/components/ui/Skeleton"
+import { Pencil } from "@phosphor-icons/react"
+import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard"
+import { useProfile } from "../_hooks/useProfile"
+import { useReferredUsers } from "../_hooks/useReferredUsers"
+import { EditProfile } from "./EditProfile/EditProfile"
+import { ProfileHeroSkeleton } from "./ProfileSkeleton"
+
+export const ProfileHero = () => {
+ const { data: profile } = useProfile()
+ const { data: referredUsers } = useReferredUsers()
+
+ if (!profile || !referredUsers) return
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {profile.name}
+
+
+
@{profile.username}
+
+ {profile.bio}
+
+
+
+
{referredUsers.length}
+
Guildmates
+
+
+
+
+
+
+
+ Followed by Hoho,
+ Hihi and 22 others
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 8 }, (_, i) => (
+
+
+
+
+ Acquire the{" "}
+
+
+ Enter Farcaster
+ {" "}
+ role
+
+
+
+ ))}
+