Merge pull request #257 from reservoirprotocol/ted/fix-optimize-image…

…-errors Fix optimize image errors
reservoirprotocol · Jun 13, 2023 · c493ff6 · c493ff6 · vercel · Jun 13, 2023
2 parents 753edb0 + 7e5f087
commit c493ff6
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 18 deletions.
diff --git a/components/common/MobileTokenFilters.tsx b/components/common/MobileTokenFilters.tsx
@@ -141,11 +141,6 @@ export const MobileTokenFilters: FC<Props> = ({
           </Text>
           {collections?.map((collection) => {
             let selected = collection?.collection?.id == filterCollection
-
-            const collectionImage = useMemo(() => {
-              return optimizeImage(collection?.collection?.image as string, 250)
-            }, [collection?.collection?.image])
-
             return (
               <Flex
                 key={collection?.collection?.id}
@@ -177,7 +172,10 @@ export const MobileTokenFilters: FC<Props> = ({
                       aspectRatio: '1/1',
                     }}
                     loader={({ src }) => src}
-                    src={collectionImage}
+                    src={optimizeImage(
+                      collection?.collection?.image as string,
+                      250
+                    )}
                     alt={collection?.collection?.name as string}
                     width={24}
                     height={24}

diff --git a/components/common/TokenFilters.tsx b/components/common/TokenFilters.tsx
@@ -67,10 +67,6 @@ export const TokenFilters: FC<Props> = ({
           {collections?.map((collection) => {
             let selected = collection?.collection?.id == filterCollection
 
-            const collectionImage = useMemo(() => {
-              return optimizeImage(collection?.collection?.image as string, 250)
-            }, [collection?.collection?.image])
-
             return (
               <Flex
                 key={collection?.collection?.id}
@@ -103,7 +99,10 @@ export const TokenFilters: FC<Props> = ({
                       aspectRatio: '1/1',
                     }}
                     loader={({ src }) => src}
-                    src={collectionImage}
+                    src={optimizeImage(
+                      collection?.collection?.image as string,
+                      250
+                    )}
                     alt={collection?.collection?.name as string}
                     width={24}
                     height={24}

diff --git a/components/portfolio/PortfolioTokenCard.tsx b/components/portfolio/PortfolioTokenCard.tsx
@@ -279,7 +279,7 @@ export default ({
         >
           <Flex css={{ mb: '$4' }} align="center" justify="between">
             <Flex align="center" css={{ gap: '$2', minWidth: 0 }}>
-              {token?.token?.collection?.imageUrl ? (
+              {collectionImage ? (
                 <Image
                   style={{
                     borderRadius: '4px',

diff --git a/components/rankings/CollectionRankingsTable.tsx b/components/rankings/CollectionRankingsTable.tsx
@@ -237,15 +237,11 @@ const RankingsTableRow: FC<RankingsTableRowProps> = ({
             }}
           >
             {collection?.sampleImages?.map((image, i) => {
-              const optimizedImage: string = useMemo(() => {
-                return optimizeImage(image, 250)
-              }, [image])
-
               if (image) {
                 return (
                   <img
                     key={image + i}
-                    src={optimizedImage}
+                    src={optimizeImage(image, 250)}
                     style={{
                       borderRadius: 8,
                       width: 56,

diff --git a/utils/optimizeImage.ts b/utils/optimizeImage.ts
@@ -18,6 +18,6 @@ const optimizeImage = (imageHref: string | undefined, width: number) => {
   } catch (e) {
     console.warn('Failed to optimize image', e)
   }
-  return imageHref
+  return imageHref ? imageHref : ''
 }
 export default optimizeImage