diff --git a/public/assets/images/juicecrowd-logo.webp b/public/assets/images/juicecrowd-logo.webp new file mode 100644 index 0000000000..7d10b40e50 Binary files /dev/null and b/public/assets/images/juicecrowd-logo.webp differ diff --git a/src/components/DomainBadge.tsx b/src/components/DomainBadge.tsx new file mode 100644 index 0000000000..c95bacdd4d --- /dev/null +++ b/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 = ({ + 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 ( + + {`${domain}`} + {domainString} + + ) +} diff --git a/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx b/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx index 30d245d5e4..aea1da4043 100644 --- a/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx +++ b/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 }) => {
-

- {title} -

+
+

+ {title} +

+ +
diff --git a/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectHeader.ts b/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectHeader.ts index fbc96b47ed..5014945898 100644 --- a/src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectHeader.ts +++ b/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,