fix: homepage logos

jbx-protocol · Nov 14, 2023 · d162954 · d162954
1 parent eaf84ea
commit d162954
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/src/components/Home/HomepageProjectCard.tsx b/src/components/Home/HomepageProjectCard.tsx
@@ -58,14 +58,16 @@ export function HomepageProjectCard({
     <HomepageCard
       href={v2v3ProjectRoute(project)}
       img={
-        <ProjectLogo
-          className="h-[192px] w-full rounded-none object-cover"
-          name={metadata?.name}
-          projectId={project.projectId}
-          pv={project.pv}
-          uri={metadata?.logoUri}
-          lazyLoad={lazyLoad}
-        />
+        metadata && !isLoading ? (
+          <ProjectLogo
+            className="h-[192px] w-full rounded-none object-cover"
+            name={metadata?.name}
+            projectId={project.projectId}
+            uri={metadata?.logoUri}
+            pv={project.pv}
+            lazyLoad={lazyLoad}
+          />
+        ) : null
       }
       title={
         metadata && !isLoading ? (

diff --git a/src/components/ProjectLogo.tsx b/src/components/ProjectLogo.tsx
@@ -1,9 +1,9 @@
+import { readNetwork } from 'constants/networks'
+import { NetworkName } from 'models/networkName'
 import { PV } from 'models/pv'
 import { useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { cidFromUrl, ipfsGatewayUrl, ipfsUriToGatewayUrl } from 'utils/ipfs'
-import { readNetwork } from 'constants/networks'
-import { NetworkName } from 'models/networkName'
 
 // Override some project logos.
 const imageUriOverridePath = '/assets/images/image-uri-overrides'
@@ -16,25 +16,30 @@ const GOERLI_URI_OVERRIDES: { [k: number]: string } = {
   1: `${imageUriOverridePath}/juiceboxdao_logo.webp`, // the on-chain logo's filesize is too large. This is a smaller version.
 }
 
+type ProjectLogoBaseProps = {
+  className?: string
+  name?: string
+  projectId?: number
+  lazyLoad?: boolean
+  fallback?: string | JSX.Element | null
+  uri?: string | undefined
+  pv?: PV | undefined
+}
+
 export default function ProjectLogo({
   className,
-  uri,
   name,
   projectId,
-  pv,
   lazyLoad,
   fallback = '🧃',
-}: {
-  name: string | undefined
-  className?: string
-  uri?: string | undefined
-  projectId?: number | undefined
-  pv?: PV | undefined
-  lazyLoad?: boolean
-  fallback?: string | JSX.Element | null
-}) {
+  uri,
+  pv,
+}: ProjectLogoBaseProps) {
   const [srcLoadError, setSrcLoadError] = useState(false)
-
+  /**
+   * If URI is passed, use it.
+   * If URI isn't passed or is undefined, use the API logo. THIS REQUIRES PV + PROJECT ID
+   */
   const imageSrc = useMemo(() => {
     if (
       projectId &&