add domain badge to juicecrowd projects (#4145)

### Description

Adds juicecrowd badge to juicebox projects

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/pinTSPPZHK80UCzWAYgo/c279ef9c-7c96-4c5e-9c01-f1d565f91177.png)

src/components/DomainBadge.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import { useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Badge } from './Badge'
+
+export type DomainBadgeProps = {
+  className?: string
+  domain: string | undefined
+}
+export const DomainBadge: React.FC<DomainBadgeProps> = ({
+  className,
+  domain,
+}) => {
+  const domainString = useMemo(() => {
+    if (!domain) return undefined
+    return domain[0].toUpperCase() + domain.slice(1)
+  }, [domain])
+
+  const customDomainImageSrc = useMemo(() => {
+    if (!domain) return undefined
+    if (domain === 'juicecrowd') return '/assets/images/juicecrowd-logo.webp'
+  }, [domain])
+
+  if (!customDomainImageSrc) return null
+
+  return (
+    <Badge className={twMerge('pl-1.5', className)} variant="info">
+      <Image
+        height={16}
+        width={16}
+        src={customDomainImageSrc}
+        alt={`${domain}`}
+      />
+      {domainString}
+    </Badge>
+  )
+}

src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx

@@ -1,6 +1,7 @@
 import { Cog6ToothIcon } from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
 import { Button, Divider } from 'antd'
+import { DomainBadge } from 'components/DomainBadge'
 import EthereumAddress from 'components/EthereumAddress'
 import { GnosisSafeBadge } from 'components/Project/ProjectHeader/GnosisSafeBadge'
 import { TruncatedText } from 'components/TruncatedText'
@@ -22,7 +23,7 @@ import { Subtitle } from './components/Subtitle'
 import ToolsDrawerButton from './components/ToolsDrawerButton'
 
 export const ProjectHeader = ({ className }: { className?: string }) => {
-  const { title, subtitle, projectId, handle, owner, gnosisSafe } =
+  const { title, subtitle, domain, projectId, handle, owner, gnosisSafe } =
     useProjectHeader()
   const isMobile = useMobile()
   const canReconfigure = useV2V3WalletHasPermission(
@@ -65,9 +66,12 @@ export const ProjectHeader = ({ className }: { className?: string }) => {
       </div>
 
       <div className="flex flex-col gap-3">
-        <h1 className="mb-0 font-heading text-3xl font-medium dark:text-slate-50 md:text-4xl">
-          {title}
-        </h1>
+        <div className="flex items-center gap-3">
+          <h1 className="mb-0 font-heading text-3xl font-medium leading-none dark:text-slate-50 md:text-4xl">
+            {title}
+          </h1>
+          <DomainBadge domain={domain} />
+        </div>
 
         <div className="flex flex-col justify-between gap-8 md:flex-row md:gap-12">
           <div className="flex min-w-0 flex-col gap-3">

src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectHeader.ts

@@ -10,6 +10,7 @@ import { useProjectMetadata } from './useProjectMetadata'
 export interface ProjectHeaderData {
   title: string | undefined
   subtitle: { text: string; type: SubtitleType } | undefined
+  domain: string | undefined
   handle: string | undefined
   projectId: number | undefined
   owner: string | undefined
@@ -39,6 +40,7 @@ export const useProjectHeader = (): ProjectHeaderData => {
   return {
     title: projectMetadata?.name,
     subtitle,
+    domain: projectMetadata?.domain,
     handle,
     projectId,
     owner: projectOwnerAddress,