From 1977e70aa17ee14067ba3f748f3ccd4417f69b2e Mon Sep 17 00:00:00 2001
From: Tom Quirk <12551741+tomquirk@users.noreply.github.com>
Date: Sun, 19 Nov 2023 12:19:04 +1000
Subject: [PATCH] feat: add link to jc badge

---
 src/components/DomainBadge.tsx                | 27 ++++++++++++++++++-
 .../ProjectHeader/ProjectHeader.tsx           |  4 +--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/DomainBadge.tsx b/src/components/DomainBadge.tsx
index c95bacdd4d..66b667591b 100644
--- a/src/components/DomainBadge.tsx
+++ b/src/components/DomainBadge.tsx
@@ -1,4 +1,7 @@
+import { readNetwork } from 'constants/networks'
+import { NetworkName } from 'models/networkName'
 import Image from 'next/image'
+import Link from 'next/link'
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { Badge } from './Badge'
@@ -6,10 +9,18 @@ import { Badge } from './Badge'
 export type DomainBadgeProps = {
   className?: string
   domain: string | undefined
+  projectId?: number
 }
+
+function getJuicecrowdUrl(projectId: number) {
+  const prefix = readNetwork.name === NetworkName.goerli ? 'goerli.' : ''
+  return `https://${prefix}juicecrowd.gg/p/${projectId}`
+}
+
 export const DomainBadge: React.FC<DomainBadgeProps> = ({
   className,
   domain,
+  projectId,
 }) => {
   const domainString = useMemo(() => {
     if (!domain) return undefined
@@ -21,9 +32,14 @@ export const DomainBadge: React.FC<DomainBadgeProps> = ({
     if (domain === 'juicecrowd') return '/assets/images/juicecrowd-logo.webp'
   }, [domain])
 
+  const linkUrl = useMemo(() => {
+    if (!domain || !projectId) return undefined
+    if (domain === 'juicecrowd') return getJuicecrowdUrl(projectId)
+  }, [projectId, domain])
+
   if (!customDomainImageSrc) return null
 
-  return (
+  const badge = (
     <Badge className={twMerge('pl-1.5', className)} variant="info">
       <Image
         height={16}
@@ -34,4 +50,13 @@ export const DomainBadge: React.FC<DomainBadgeProps> = ({
       {domainString}
     </Badge>
   )
+
+  if (linkUrl)
+    return (
+      <Link href={linkUrl} target="_blank" rel="noopener noreferrer">
+        {badge}
+      </Link>
+    )
+
+  return badge
 }
diff --git a/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx b/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx
index aea1da4043..eaebd7d238 100644
--- a/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx
+++ b/src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/ProjectHeader.tsx
@@ -32,7 +32,7 @@ export const ProjectHeader = ({ className }: { className?: string }) => {
 
   return (
     <div className={twMerge('relative flex w-full flex-col', className)}>
-      <ProjectHeaderLogo className="absolute left-3.5 -top-[146px] rounded-[0.85rem] border-6 border-white dark:border-slate-900 md:left-0" />
+      <ProjectHeaderLogo className="absolute -top-[146px] left-3.5 rounded-[0.85rem] border-6 border-white dark:border-slate-900 md:left-0" />
 
       <div className="flex items-center justify-end gap-4">
         {projectId ? (
@@ -70,7 +70,7 @@ export const ProjectHeader = ({ className }: { className?: string }) => {
           <h1 className="mb-0 font-heading text-3xl font-medium leading-none dark:text-slate-50 md:text-4xl">
             {title}
           </h1>
-          <DomainBadge domain={domain} />
+          <DomainBadge domain={domain} projectId={projectId} />
         </div>
 
         <div className="flex flex-col justify-between gap-8 md:flex-row md:gap-12">