Skip to content

Feat/partner logo branding #8668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joaquim-verges merged 3 commits into from
Feb 10, 2026
+167 −6
Merged

Feat/partner logo branding #8668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
16d2baf
[Dashboard] feat: add partner logo upload to ecosystem partner forms
eabdelmoneim Feb 10, 2026
a93f251
[Dashboard] fix: improve partner logo handling with removal support a…
eabdelmoneim Feb 10, 2026
f64d114
[Dashboard] fix: hide drag-and-drop when logo exists, add pencil to c…
eabdelmoneim Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/dashboard/src/@/api/team/ecosystems.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ type PartnerPermission = "PROMPT_USER_V1" | "FULL_CONTROL_V1";
export type Partner = {
id: string;
name: string;
imageUrl?: string;
allowlistedDomains: string[];
allowlistedBundleIds: string[];
permissions: [PartnerPermission];
Expand Down
21 changes: 19 additions & 2 deletions ...)/~/ecosystem/[slug]/(active)/configuration/components/client/add-partner-form.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
import { toast } from "sonner";
import type { ThirdwebClient } from "thirdweb";
import type { Ecosystem, Partner } from "@/api/team/ecosystems";
import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
import { useDashboardRouter } from "@/lib/DashboardRouter";
import { useAddPartner } from "../../hooks/use-add-partner";
import { PartnerForm, type PartnerFormValues } from "./partner-form.client";
Expand All @@ -23,6 +24,8 @@ export function AddPartnerForm({
const teamSlug = params.team_slug as string;
const ecosystemSlug = params.slug as string;

const storageUpload = useDashboardStorageUpload({ client });

const { mutateAsync: addPartner, isPending } = useAddPartner(
{
authToken,
Expand All @@ -48,10 +51,23 @@ export function AddPartnerForm({
},
);

const handleSubmit = (
const isUploading = storageUpload.isPending;

const handleSubmit = async (
values: PartnerFormValues,
finalAccessControl: Partner["accessControl"] | null,
) => {
let imageUrl: string | undefined;
if (values.logo) {
try {
const [uri] = await storageUpload.mutateAsync([values.logo]);
imageUrl = uri;
} catch {
toast.error("Failed to upload logo");
return;
}
}

addPartner({
accessControl: finalAccessControl,
allowlistedBundleIds: values.bundleIds
Expand All @@ -61,14 +77,15 @@ export function AddPartnerForm({
.split(/,| /)
.filter((d) => d.length > 0),
ecosystem,
imageUrl,
name: values.name,
});
};

return (
<PartnerForm
client={client}
isSubmitting={isPending}
isSubmitting={isPending || isUploading}
onSubmit={handleSubmit}
submitLabel="Add"
/>
Expand Down
103 changes: 101 additions & 2 deletions ...team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { PlusIcon, Trash2Icon } from "lucide-react";
import { useId } from "react";
import { PencilIcon, PlusIcon, Trash2Icon, XIcon } from "lucide-react";
import { useId, useRef } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import type { ThirdwebClient } from "thirdweb";
import type { z } from "zod";
import type { Partner } from "@/api/team/ecosystems";
import { Img } from "@/components/blocks/Img";
import { Button } from "@/components/ui/button";
import {
Form,
Expand All @@ -17,11 +18,13 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { ImageUpload } from "@/components/ui/image-upload";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Spinner } from "@/components/ui/Spinner";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
import { partnerFormSchema } from "../../constants";
import { AllowedOperationsSection } from "./allowed-operations-section";

Expand Down Expand Up @@ -118,6 +121,7 @@ export function PartnerForm({

const accessControlId = useId();
const serverVerifierId = useId();
const fileInputRef = useRef<HTMLInputElement>(null);

return (
<Form {...form}>
Expand Down Expand Up @@ -150,6 +154,101 @@ export function PartnerForm({
</FormItem>
)}
/>
<FormField
control={form.control}
name="logo"
render={() => {
const removeLogo = form.watch("removeLogo");
const logoFile = form.watch("logo");
const newFilePreview = logoFile
? URL.createObjectURL(logoFile)
: undefined;
Comment on lines +160 to +165
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

fd "partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 480

🏁 Script executed:

wc -l "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 199

🏁 Script executed:

sed -n '140,180p' "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 1523

🏁 Script executed:

head -50 "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 1612

🏁 Script executed:

sed -n '50,120p' "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 2693

🏁 Script executed:

sed -n '155,210p' "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 2437

🏁 Script executed:

sed -n '200,250p' "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 2428

🏁 Script executed:

rg "URL.createObjectURL" -A 3 -B 3

Repository: thirdweb-dev/js

Length of output: 9859

🏁 Script executed:

sed -n '1,10p' "apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx"

Repository: thirdweb-dev/js

Length of output: 476

Move blob URL creation to an effect with proper cleanup to prevent memory leaks.

URL.createObjectURL is called during every render and never revoked, causing blob URLs to leak and potentially reload the preview. Move preview creation to a useEffect with a cleanup function that revokes the URL when the file changes or the component unmounts. This also requires adding useEffect and useState to the React import (currently only useId and useRef are imported).

♻️ Suggested fix (creates/revokes preview URLs safely) 
-import { useId, useRef } from "react";
+import { useEffect, useId, useRef, useState } from "react";
@@
   const accessControlEnabled = form.watch("accessControlEnabled");
   const serverVerifierEnabled = form.watch("serverVerifierEnabled");
   const allowedOperationsEnabled = form.watch("allowedOperationsEnabled");
+  const logoFile = form.watch("logo");
+  const removeLogo = form.watch("removeLogo");
+  const [newFilePreview, setNewFilePreview] = useState<string | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (!logoFile) {
+      setNewFilePreview(undefined);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(logoFile);
+    setNewFilePreview(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [logoFile]);
@@
-              const removeLogo = form.watch("removeLogo");
-              const logoFile = form.watch("logo");
-              const newFilePreview = logoFile
-                ? URL.createObjectURL(logoFile)
-                : undefined;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
render={() => {
const removeLogo = form.watch("removeLogo");
const logoFile = form.watch("logo");
const newFilePreview = logoFile
? URL.createObjectURL(logoFile)
: undefined;
render={() => {
🤖 Prompt for AI Agents 
In
`@apps/dashboard/src/app/`(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/client/partner-form.client.tsx
around lines 160 - 165, The preview URL is being created on every render
(newFilePreview = URL.createObjectURL(logoFile)) and never revoked; update the
partner-form.client.tsx component to import useEffect and useState alongside
useId/useRef, create a state like [newFilePreview, setNewFilePreview] in the
component, and move the blob creation into a useEffect that depends on the
watched logo file (logoFile from form.watch) and removeLogo as needed—inside the
effect call URL.createObjectURL(logoFile) and setNewFilePreview, and in the
effect cleanup revoke the previous URL with URL.revokeObjectURL and clear state
so URLs are revoked when the file changes or the component unmounts.

const existingImageUrl =
partner?.imageUrl && !removeLogo
? resolveSchemeWithErrorHandler({
client,
uri: partner.imageUrl,
})
: undefined;
const displayUrl = newFilePreview || existingImageUrl;

return (
<FormItem>
<FormLabel>Partner Logo</FormLabel>
<FormControl>
<div>
<input
ref={fileInputRef}
accept="image/png,image/jpeg,image/webp"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) {
form.setValue("logo", file, {
shouldValidate: true,
});
form.setValue("removeLogo", false);
}
e.target.value = "";
}}
type="file"
/>
{displayUrl ? (
<div className="relative inline-block">
<Img
alt={partner?.name ?? "Partner logo"}
className="size-20 rounded-md border object-contain object-center"
src={displayUrl}
/>
<Button
aria-label="Remove logo"
className="absolute -top-2 -right-2 size-6 rounded-full bg-background p-0 hover:bg-accent"
onClick={() => {
form.setValue("logo", undefined);
form.setValue("removeLogo", true);
}}
size="icon"
type="button"
variant="ghost"
>
<XIcon className="size-3" />
</Button>
<Button
aria-label="Change logo"
className="absolute -bottom-2 -right-2 size-6 rounded-full bg-background p-0 hover:bg-accent"
onClick={() => fileInputRef.current?.click()}
size="icon"
type="button"
variant="ghost"
>
<PencilIcon className="size-3" />
</Button>
</div>
) : (
<ImageUpload
accept="image/png, image/jpeg, image/webp"
className="bg-background"
onUpload={(files) => {
if (files[0]) {
form.setValue("logo", files[0], {
shouldValidate: true,
});
form.setValue("removeLogo", false);
}
}}
/>
)}
</div>
</FormControl>
<FormDescription>
Optional logo for this partner. Used in OTP emails sent to
users authenticating through this partner.
</FormDescription>
<FormMessage />
</FormItem>
);
}}
/>
<FormField
control={form.control}
defaultValue=""
Expand Down
29 changes: 27 additions & 2 deletions .../ecosystem/[slug]/(active)/configuration/components/client/update-partner-form.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
import { toast } from "sonner";
import type { ThirdwebClient } from "thirdweb";
import type { Ecosystem, Partner } from "@/api/team/ecosystems";
import { useDashboardStorageUpload } from "@/hooks/useDashboardStorageUpload";
import { useDashboardRouter } from "@/lib/DashboardRouter";
import { useUpdatePartner } from "../../hooks/use-update-partner";
import { PartnerForm, type PartnerFormValues } from "./partner-form.client";
Expand All @@ -25,6 +26,8 @@ export function UpdatePartnerForm({
const teamSlug = params.team_slug as string;
const ecosystemSlug = params.slug as string;

const storageUpload = useDashboardStorageUpload({ client });

const { mutateAsync: updatePartner, isPending } = useUpdatePartner(
{
authToken,
Expand All @@ -50,10 +53,31 @@ export function UpdatePartnerForm({
},
);

const handleSubmit = (
const isUploading = storageUpload.isPending;

const handleSubmit = async (
values: PartnerFormValues,
finalAccessControl: Partner["accessControl"] | null,
) => {
// Determine imageUrl based on three states:
// 1. New file uploaded → upload and use new URI
// 2. Explicit removal → send null to clear
// 3. No change → preserve existing partner imageUrl
let imageUrl: string | null | undefined;
if (values.logo) {
try {
const [uri] = await storageUpload.mutateAsync([values.logo]);
imageUrl = uri;
} catch {
toast.error("Failed to upload logo");
return;
}
} else if (values.removeLogo) {
imageUrl = null;
} else {
imageUrl = partner.imageUrl;
}

updatePartner({
accessControl: finalAccessControl,
allowlistedBundleIds: values.bundleIds
Expand All @@ -63,6 +87,7 @@ export function UpdatePartnerForm({
.split(/,| /)
.filter((d) => d.length > 0),
ecosystem,
imageUrl,
name: values.name,
partnerId: partner.id,
});
Expand All @@ -71,7 +96,7 @@ export function UpdatePartnerForm({
return (
<PartnerForm
client={client}
isSubmitting={isPending}
isSubmitting={isPending || isUploading}
onSubmit={handleSubmit}
partner={partner}
submitLabel="Update"
Expand Down
15 changes: 15 additions & 0 deletions .../app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,21 @@ const allowedOperationsSchema = z.discriminatedUnion("signMethod", [

export const partnerFormSchema = z
.object({
logo: z
.instanceof(File, {
message: "Please select an image file",
})
.refine(
(file) => ["image/png", "image/jpeg", "image/webp"].includes(file.type),
{
message: "Only PNG, JPG or WEBP images are allowed",
},
)
.refine((file) => file.size <= 500 * 1024, {
message: "Logo size must be less than 500KB",
})
.optional(),
removeLogo: z.boolean().default(false),
accessControl: z
.object({
allowedOperations: z
Expand Down
2 changes: 2 additions & 0 deletions ...eam/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/hooks/use-add-partner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { Ecosystem, Partner } from "@/api/team/ecosystems";
type AddPartnerParams = {
ecosystem: Ecosystem;
name: string;
imageUrl?: string;
allowlistedDomains: string[];
allowlistedBundleIds: string[];
accessControl?: Partner["accessControl"] | null;
Expand Down Expand Up @@ -37,6 +38,7 @@ export function useAddPartner(
accessControl: params.accessControl ?? undefined,
allowlistedBundleIds: params.allowlistedBundleIds,
allowlistedDomains: params.allowlistedDomains,
imageUrl: params.imageUrl,
name: params.name,
// TODO - remove the requirement for permissions in API endpoint
permissions: ["FULL_CONTROL_V1"],
Expand Down
2 changes: 2 additions & 0 deletions .../[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/hooks/use-update-partner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type UpdatePartnerParams = {
partnerId: string;
ecosystem: Ecosystem;
name: string;
imageUrl?: string | null;
allowlistedDomains: string[];
allowlistedBundleIds: string[];
accessControl?: {
Expand Down Expand Up @@ -43,6 +44,7 @@ export function useUpdatePartner(
accessControl: params.accessControl,
allowlistedBundleIds: params.allowlistedBundleIds,
allowlistedDomains: params.allowlistedDomains,
imageUrl: params.imageUrl,
name: params.name,
}),

Expand Down
Loading