Merge branch 'main' into remove-unused-stuff

src/app/(marketing)/create-profile/(onboarding)/_components/PromptReferrer.tsx

@@ -94,9 +94,9 @@ export const PromptReferrer: CreateProfileStep = ({ dispatchAction, data }) => {
               finalReferrer?.username !== form.watch("username")
             }
             isLoading={referrer.isLoading}
+            rightIcon={<ArrowRight weight="bold" />}
           >
             Continue
-            <ArrowRight weight="bold" />
           </Button>
         </form>
       </FormProvider>

src/app/(marketing)/create-profile/(onboarding)/_components/PurchasePass.tsx

@@ -24,12 +24,12 @@ export const PurchasePass: CreateProfileStep = ({ dispatchAction, data }) => {
       <div className="mt-8 mb-4 px-8">
         <Button
           onClick={() => dispatchAction({ action: "previous" })}
-          className="h-auto p-0"
+          className="h-auto p-0 font-bold font-display"
           size="lg"
           variant="unstyled"
+          leftIcon={<ArrowLeft weight="bold" />}
         >
-          <ArrowLeft weight="bold" />
-          <span className="font-bold font-display">Purchase Pass</span>
+          Purchase Pass
         </Button>
       </div>
       <article className="flex flex-col items-center pb-6 text-center">
@@ -83,9 +83,13 @@ export const PurchasePass: CreateProfileStep = ({ dispatchAction, data }) => {
                 <div>Total</div>
                 <div>---</div>
               </div>
-              <Button colorScheme="info" className="w-full" disabled>
+              <Button
+                colorScheme="info"
+                className="w-full"
+                disabled
+                rightIcon={<Info weight="bold" />}
+              >
                 Allow Guild to use your ETH
-                <Info />
               </Button>
               <Button variant="subtle" className="w-full" disabled>
                 Purchase

src/app/(marketing)/create-profile/(onboarding)/_components/StartProfile.tsx

@@ -122,9 +122,9 @@ export const StartProfile: CreateProfileStep = ({ data: chainData }) => {
                 variant="ghost"
                 size="lg"
                 onClick={() => setMethod(CreateMethod.FromBlank)}
+                rightIcon={<ArrowRight weight="bold" />}
               >
                 I don't have a Farcaster profile
-                <ArrowRight weight="bold" />
               </Button>
             </>
           ) : (

src/app/(marketing)/create-profile/page.tsx

@@ -58,9 +58,9 @@ const Page = () => {
           size="lg"
           className="w-full"
           isLoading={isClient && isWeb3Connected === null}
+          leftIcon={<SignIn weight="bold" />}
         >
-          <SignIn weight="bold" />
-          <span>Sign in</span>
+          Sign in
         </Button>
       </div>
     </div>

src/app/(marketing)/profile/[username]/not-found.tsx

@@ -13,8 +13,7 @@ const NotFound = () => {
 
       <div className="flex flex-col gap-4 sm:flex-row">
         <a href="/explorer">
-          <Button colorScheme="primary" size="lg">
-            <House weight="bold" />
+          <Button colorScheme="primary" size="lg" leftIcon={<House weight="bold" />}>
             Go to home page
           </Button>
         </a>

src/app/(marketing)/profile/[username]/page.tsx

@@ -12,10 +12,12 @@ import { env } from "env"
 import { Metadata } from "next"
 import Image from "next/image"
 import { notFound } from "next/navigation"
+import { GuildBase } from "types"
 import { JoinProfileAction } from "../_components/JoinProfileAction"
 import { Profile } from "../_components/Profile"
 import { ProfileColorBanner } from "../_components/ProfileColorBanner"
 import { ProfileHero } from "../_components/ProfileHero"
+import { selectOperatedGuilds } from "../_utils/selectOperatedGuilds"
 
 type PageProps = { params: { username: string } }
 
@@ -129,6 +131,20 @@ const fetchPublicProfileData = async ({
   } catch (e) {
     console.error(e)
   }
+  const operatedGuildsRequest = new URL(`/v2/guilds?username=${username}`, api)
+  const operatedGuilds = await ssrFetcher<GuildBase[]>(operatedGuildsRequest)
+  const selectedOperatedGuildRequests = selectOperatedGuilds({
+    guilds: operatedGuilds,
+  }).map(({ id }) => new URL(`v2/guilds/guild-page/${id}`, api))
+  const selectedOperatedGuilds = await Promise.all(
+    selectedOperatedGuildRequests.map((req) =>
+      ssrFetcher<Guild>(req, {
+        next: {
+          revalidate: 3 * 3600,
+        },
+      })
+    )
+  )
   const roleRequests = contributions.map(
     ({ roleId, guildId }) => new URL(`v2/guilds/${guildId}/roles/${roleId}`, api)
   )
@@ -158,6 +174,9 @@ const fetchPublicProfileData = async ({
     : []
   const guildsZipped = guildRequests.map(({ pathname }, i) => [pathname, guilds[i]])
   const rolesZipped = roleRequests.map(({ pathname }, i) => [pathname, roles[i]])
+  const selectedOperatedGuildsZipped = selectedOperatedGuildRequests.map(
+    ({ pathname }, i) => [pathname, selectedOperatedGuilds[i]]
+  )
   const experiencesRequest = new URL(`/v2/profiles/${username}/experiences`, api)
   const experiences = await ssrFetcher<Schemas["Experience"][]>(experiencesRequest, {
     next: {
@@ -188,6 +207,11 @@ const fetchPublicProfileData = async ({
           experienceCountRequest.pathname + experienceCountRequest.search,
           experienceCount,
         ],
+        [
+          operatedGuildsRequest.pathname + operatedGuildsRequest.search,
+          operatedGuilds,
+        ],
+        ...selectedOperatedGuildsZipped,
         ...collectionsZipped,
         ...guildsZipped,
         ...rolesZipped,
@@ -207,7 +231,6 @@ const Page = async ({ params: { username } }: PageProps) => {
     )
   }
   const { profile, fallback } = profileData
-
   const isBgColor = profile.backgroundImageUrl?.startsWith("#")
 
   return (

src/app/(marketing)/profile/_components/EditContributions.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/Dialog"
+import { IconButton } from "@/components/ui/IconButton"
 import { Label } from "@/components/ui/Label"
 import {
   Select,
@@ -54,15 +55,14 @@ const EditContributionCard = ({
   return (
     <CardWithGuildLabel guild={guild}>
       <div className="relative flex flex-col gap-2 p-6">
-        <Button
-          size="icon"
+        <IconButton
+          aria-label="Remove contribution"
+          icon={<X weight="bold" />}
           variant="ghost"
           onClick={deleteContribution.onSubmit}
           isLoading={deleteContribution.isLoading}
-          className="absolute top-2 right-2 size-7"
-        >
-          <X />
-        </Button>
+          className="absolute top-2 right-2 size-7 rounded-full"
+        />
         <Label className="font-extrabold text-muted-foreground text-xs uppercase">
           TOP ROLE
         </Label>
@@ -104,9 +104,13 @@ export const EditContributions = () => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="solid" size="icon-sm" className="rounded-full">
-          <PencilSimple weight="bold" />
-        </Button>
+        <IconButton
+          aria-label="Edit contribution"
+          icon={<PencilSimple weight="bold" />}
+          variant="solid"
+          size="sm"
+          className="rounded-full"
+        />
       </DialogTrigger>
       <DialogContent size="lg" className="bg-background">
         <DialogHeader>

src/app/(marketing)/profile/_components/EditProfile/EditProfileBanner.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@/components/ui/Button"
 import { FormField, FormItem } from "@/components/ui/Form"
+import { IconButton } from "@/components/ui/IconButton"
 import { Separator } from "@/components/ui/Separator"
 import { Eyedropper, Image as ImageIcon } from "@phosphor-icons/react"
 import { Uploader } from "hooks/usePinata/usePinata"
@@ -39,24 +39,21 @@ export const EditProfileBanner = ({
           <div className="relative flex items-center gap-3">
             <ProfileBackgroundImageUploader
               uploader={backgroundUploader}
-              size="icon"
               variant="ghost"
+              icon={<ImageIcon weight="bold" />}
               tooltipLabel={isImage ? "Change image" : "Upload image"}
               className="text-white"
-            >
-              <ImageIcon weight="bold" size={24} />
-            </ProfileBackgroundImageUploader>
+            />
 
             <Separator orientation="vertical" className="h-6 w-0.5 bg-white/50" />
             <ProfileColorPicker>
-              <Button
+              <IconButton
+                aria-label="Pick color"
                 type="button"
-                size="icon"
+                icon={<Eyedropper weight="bold" />}
                 variant="ghost"
                 className="text-white"
-              >
-                <Eyedropper weight="bold" size={24} />
-              </Button>
+              />
             </ProfileColorPicker>
           </div>
         </FormItem>

src/app/(marketing)/profile/_components/EditProfile/EditProfileDropdown.tsx

@@ -1,11 +1,11 @@
-import { Button } from "@/components/ui/Button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/DropdownMenu"
+import { IconButton } from "@/components/ui/IconButton"
 import { uploadImageUrlToPinata } from "@/lib/uploadImageUrlToPinata"
 import {
   ArrowsClockwise,
@@ -33,31 +33,37 @@ export const EditProfileDropdown: FunctionComponent<{ uploader: Uploader }> = ({
         className="-bottom-2 absolute right-0 translate-y-full"
         asChild
       >
-        <Button variant="ghost" size="icon-sm">
-          <DotsThreeVertical weight="bold" />
-        </Button>
+        <IconButton
+          aria-label="Open menu"
+          icon={<DotsThreeVertical weight="bold" />}
+          variant="ghost"
+          size="sm"
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="p-0">
         {farcasterProfile && (
-          <DropdownMenuItem
-            className="flex gap-2 px-4 py-6 font-semibold"
-            onClick={() => {
-              if (farcasterProfile.username) {
-                setValue("name", farcasterProfile.username, {
-                  shouldValidate: true,
+          <>
+            <DropdownMenuItem
+              className="flex gap-2 px-4 py-6 font-semibold"
+              onClick={() => {
+                if (farcasterProfile.username) {
+                  setValue("name", farcasterProfile.username, {
+                    shouldValidate: true,
+                  })
+                }
+                if (!farcasterProfile.avatar) return
+                uploadImageUrlToPinata({
+                  onUpload: uploader.onUpload,
+                  image: new URL(farcasterProfile.avatar),
                 })
-              }
-              if (!farcasterProfile.avatar) return
-              uploadImageUrlToPinata({
-                onUpload: uploader.onUpload,
-                image: new URL(farcasterProfile.avatar),
-              })
-            }}
-          >
-            <ArrowsClockwise weight="bold" /> Fill data by Farcaster
-          </DropdownMenuItem>
+              }}
+            >
+              <ArrowsClockwise weight="bold" /> Fill data by Farcaster
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
         )}
-        <DropdownMenuSeparator />
+
         <DropdownMenuItem
           onClick={(e) => {
             // keep dropdown open to show loading state

src/app/(marketing)/profile/_components/EditProfile/ProfileBackgroundImageUploader.tsx

@@ -1,6 +1,8 @@
-import { ButtonProps, buttonVariants } from "@/components/ui/Button"
+import { buttonVariants } from "@/components/ui/Button"
+import { IconButtonProps } from "@/components/ui/IconButton"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useToast } from "@/components/ui/hooks/useToast"
+import { cn } from "@/lib/utils"
 import { UploadSimple } from "@phosphor-icons/react"
 import Button from "components/common/Button"
 import useDropzone from "hooks/useDropzone"
@@ -10,12 +12,13 @@ import { PropsWithChildren, useState } from "react"
 type Props = {
   uploader: Uploader
   tooltipLabel: string
-} & ButtonProps
+} & Omit<IconButtonProps, "size" | "rightIcon" | "aria-label">
 
 export const ProfileBackgroundImageUploader = ({
   uploader: { isUploading, onUpload },
   children,
   tooltipLabel,
+  icon,
   ...buttonProps
 }: PropsWithChildren<Props>): JSX.Element => {
   const [progress, setProgress] = useState<number>(0)
@@ -45,17 +48,25 @@ export const ProfileBackgroundImageUploader = ({
 
   if (isUploading)
     return (
-      <Button {...buttonProps} isDisabled>
+      <Button {...buttonProps} leftIcon={icon} isDisabled>
         {(progress * 100).toFixed(0)}%
       </Button>
     )
 
   return (
     <Tooltip>
       <TooltipTrigger>
-        <div {...getRootProps()} className={buttonVariants(buttonProps as any)}>
+        <div
+          {...getRootProps()}
+          className={cn(
+            buttonVariants({
+              ...buttonProps,
+              className: [...(buttonProps.className ?? ""), "size-10"],
+            })
+          )}
+        >
           <input {...getInputProps()} hidden />
-          {isDragActive ? <UploadSimple weight="bold" size={24} /> : children}
+          {isDragActive ? <UploadSimple weight="bold" /> : icon}
         </div>
       </TooltipTrigger>
       <TooltipContent side="bottom">{tooltipLabel}</TooltipContent>