From 62ab178166963754b4f7c9ad43e0b73a66e952b9 Mon Sep 17 00:00:00 2001 From: Thomas Marchand Date: Thu, 30 Nov 2023 16:43:11 +0000 Subject: [PATCH 1/2] feat: add cdn image components --- app/partnership/page.tsx | 13 +++---- .../UI/featured_banner/featuredQuest.tsx | 5 +-- components/UI/menus/bannerPopup.tsx | 3 +- components/UI/profileCards.tsx | 3 +- components/UI/steps/stepElement.tsx | 5 +-- components/achievements/level.tsx | 3 +- components/cdn/image.tsx | 36 +++++++++++++++++++ components/leaderboard/ControlsDashboard.tsx | 9 +++-- components/leaderboard/RankCard.tsx | 10 +++--- components/leaderboard/RankingsTable.tsx | 7 ++-- components/leaderboard/searchbar.tsx | 6 ++-- components/quests/nftImage.tsx | 3 +- components/quests/nftIssuer.tsx | 3 +- components/quests/quest.tsx | 3 +- components/quests/questCategory.tsx | 3 +- components/quests/reward.tsx | 3 +- components/quiz/questionKinds/imageChoice.tsx | 3 +- components/quiz/step.tsx | 3 +- 18 files changed, 84 insertions(+), 37 deletions(-) create mode 100644 components/cdn/image.tsx diff --git a/app/partnership/page.tsx b/app/partnership/page.tsx index 2927274e..af5f7e30 100644 --- a/app/partnership/page.tsx +++ b/app/partnership/page.tsx @@ -15,6 +15,7 @@ import Blur from "../../components/shapes/blur"; import Card from "../../components/UI/card"; import team from "../../public/starknetid/team.json"; import TwitterIcon from "../../components/UI/iconsComponents/icons/twitterIcon"; +import { CDNImg } from "../../components/cdn/image"; export default function Page() { useEffect(() => { @@ -51,7 +52,7 @@ export default function Page() {
- +
@@ -154,11 +155,11 @@ export default function Page() { title="They worked with us" />
- - - - - + + + + +
diff --git a/components/UI/featured_banner/featuredQuest.tsx b/components/UI/featured_banner/featuredQuest.tsx index 8a537b9c..02b20d68 100644 --- a/components/UI/featured_banner/featuredQuest.tsx +++ b/components/UI/featured_banner/featuredQuest.tsx @@ -4,6 +4,7 @@ import Button from "../..//UI/button"; import { useMediaQuery } from "@mui/material"; import FeaturedQuestSkeleton from "../../skeletons/featuredQuestSkeleton"; import Timer from "../../quests/timer"; +import { CDNImg } from "../../cdn/image"; type FeaturedQuestProps = { onClick?: () => void; @@ -35,7 +36,7 @@ const FeaturedQuest: FunctionComponent = ({

{title}

{desc}

- +

{reward}

@@ -43,7 +44,7 @@ const FeaturedQuest: FunctionComponent = ({
- + {expiry ? : null}
diff --git a/components/UI/menus/bannerPopup.tsx b/components/UI/menus/bannerPopup.tsx index 7c24f753..5a19dad7 100644 --- a/components/UI/menus/bannerPopup.tsx +++ b/components/UI/menus/bannerPopup.tsx @@ -3,6 +3,7 @@ import styles from "../../../styles/components/popup.module.css"; import Button from "../button"; import CloseIcon from "../iconsComponents/icons/closeIcon"; import { Modal } from "@mui/material"; +import { CDNImg } from "../../cdn/image"; type BannerPopupProps = { title: string; @@ -32,7 +33,7 @@ const BannerPopup: FunctionComponent = ({

{title}

- banner +
diff --git a/components/UI/profileCards.tsx b/components/UI/profileCards.tsx index 01def954..c8372565 100644 --- a/components/UI/profileCards.tsx +++ b/components/UI/profileCards.tsx @@ -9,6 +9,7 @@ import ShareIcon from "./iconsComponents/icons/shareIcon"; import SharePopup from "./menus/sharePopup"; import theme from "../../styles/theme"; import { useStarkProfile } from "@starknet-react/core"; +import { CDNImg } from "../cdn/image"; const ProfileCards: FunctionComponent = ({ title, @@ -126,7 +127,7 @@ const ProfileCards: FunctionComponent = ({ if (!building.image_url) return null; return (
- +

{building.name}

); diff --git a/components/UI/steps/stepElement.tsx b/components/UI/steps/stepElement.tsx index 6ad7817a..aea776d9 100644 --- a/components/UI/steps/stepElement.tsx +++ b/components/UI/steps/stepElement.tsx @@ -2,6 +2,7 @@ import VerticalBar from "../../shapes/verticalBar"; import OnScrollIntoView from "../../animations/onScrollIntoView"; import styles from "../../../styles/components/steps.module.css"; import React, { FunctionComponent } from "react"; +import { CDNImg } from "../../cdn/image"; type StepElementProps = { index: number; @@ -19,7 +20,7 @@ const StepElement: FunctionComponent = ({ return (
- + {index !== steps.length - 1 && (
@@ -43,7 +44,7 @@ const StepElement: FunctionComponent = ({
{step.overlay}
) : null}
- +
diff --git a/components/achievements/level.tsx b/components/achievements/level.tsx index b9991881..0b79c940 100644 --- a/components/achievements/level.tsx +++ b/components/achievements/level.tsx @@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react"; import styles from "../../styles/achievements.module.css"; import { AchievementDocument } from "../../types/backTypes"; import { CustomTooltip } from "../UI/tooltip"; +import { CDNImg } from "../cdn/image"; type AchievementLevelProps = { achievement: AchievementDocument; @@ -36,7 +37,7 @@ const AchievementLevel: FunctionComponent = ({ !achievement.completed ? styles.disabled : "" }`} > - achievement level image +
diff --git a/components/cdn/image.tsx b/components/cdn/image.tsx new file mode 100644 index 00000000..3ef2ce60 --- /dev/null +++ b/components/cdn/image.tsx @@ -0,0 +1,36 @@ +import Image, { ImageProps, StaticImageData } from "next/image"; +import React, { ImgHTMLAttributes } from "react"; + +export const CDNImg: React.FC> = ({ + src, + ...props +}) => { + const fullPath = + process.env.NODE_ENV === "development" && src && src.startsWith("/") + ? `${process.env.NEXT_PUBLIC_CDN_URL}${src}` + : src; + + return ; +}; + +type ImageSrc = string | StaticImageData; + +interface CDNImageProps extends Omit { + src: ImageSrc; +} + +export const CDNImage: React.FC = ({ src, ...props }) => { + let imagePath: string; + + if (typeof src === "string") { + imagePath = + process.env.NODE_ENV === "development" && src.startsWith("/") + ? `${process.env.NEXT_PUBLIC_CDN_URL}${src}` + : src; + } else { + // if src is not an URL, we can't use the CDN + imagePath = src.src; + } + + return ; +}; diff --git a/components/leaderboard/ControlsDashboard.tsx b/components/leaderboard/ControlsDashboard.tsx index 05a08b24..f11f34e5 100644 --- a/components/leaderboard/ControlsDashboard.tsx +++ b/components/leaderboard/ControlsDashboard.tsx @@ -1,10 +1,9 @@ import React, { FunctionComponent, useMemo, useState } from "react"; -import BottomArrow from "../../public/icons/dropdownArrow.svg"; -import Image from "next/image"; import { PAGE_SIZE, timeFrameMap } from "../../utils/constants"; import styles from "../../styles/leaderboard.module.css"; import ChevronLeftIcon from "../UI/iconsComponents/icons/chevronLeftIcon"; import ChevronRightIcon from "../UI/iconsComponents/icons/ChevronRightIcon"; +import { CDNImage } from "../cdn/image"; // this will contain the pagination arrows and page size limit controls const ControlsDashboard: FunctionComponent = ({ @@ -63,7 +62,11 @@ const ControlsDashboard: FunctionComponent = ({ >

{rowsPerPage}

- Arrow icon +
{showMenu ? (
diff --git a/components/leaderboard/RankCard.tsx b/components/leaderboard/RankCard.tsx index bfe476e3..48baca94 100644 --- a/components/leaderboard/RankCard.tsx +++ b/components/leaderboard/RankCard.tsx @@ -1,14 +1,12 @@ import React, { FunctionComponent, useEffect, useState } from "react"; import styles from "../../styles/leaderboard.module.css"; -import Image from "next/image"; import { minifyAddress } from "../../utils/stringService"; -import Trophy from "../../public/icons/trophy.svg"; -import XpBadge from "../../public/icons/xpBadge.svg"; import Avatar from "../UI/avatar"; import { decimalToHex } from "../../utils/feltService"; import { getDomainFromAddress } from "../../utils/domainService"; import Divider from "@mui/material/Divider"; import AchievementIcon from "../UI/iconsComponents/icons/achievementIcon"; +import { CDNImage } from "../cdn/image"; type RankCardProps = { name: string; @@ -69,12 +67,12 @@ const RankCard: FunctionComponent = ({
- xp badge +

{experience}

- = ({ @@ -107,8 +106,8 @@ const RankingsTable: FunctionComponent = ({
- = ({
= ({ }} > = ({ nfts }) => {
{nfts.map((nft, index) => (
- + {nft.level && nfts.length > 1 ? (

Level {nft.level}

) : null} diff --git a/components/quests/nftIssuer.tsx b/components/quests/nftIssuer.tsx index df60f630..0f318a37 100644 --- a/components/quests/nftIssuer.tsx +++ b/components/quests/nftIssuer.tsx @@ -1,5 +1,6 @@ import React, { FunctionComponent } from "react"; import styles from "../../styles/quests.module.css"; +import { CDNImg } from "../cdn/image"; type NftIssuerProps = { issuer: Issuer; @@ -8,7 +9,7 @@ type NftIssuerProps = { const NftIssuer: FunctionComponent = ({ issuer }) => { return (
- +

{issuer.name}

); diff --git a/components/quests/quest.tsx b/components/quests/quest.tsx index 310914cc..0dec7cc7 100644 --- a/components/quests/quest.tsx +++ b/components/quests/quest.tsx @@ -5,6 +5,7 @@ import CheckIcon from "../UI/iconsComponents/icons/checkIcon"; import UnavailableIcon from "../UI/iconsComponents/icons/unavailableIcon"; import Card from "../UI/card"; import styles from "../../styles/quests.module.css"; +import { CDNImg } from "../cdn/image"; type QuestProps = { onClick: () => void; @@ -58,7 +59,7 @@ const Quest: FunctionComponent = ({ ) : ( <> - +

{reward}

)} diff --git a/components/quests/questCategory.tsx b/components/quests/questCategory.tsx index 7e15c6ba..678acd53 100644 --- a/components/quests/questCategory.tsx +++ b/components/quests/questCategory.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent } from "react"; import styles from "../../styles/Home.module.css"; import Link from "next/link"; +import { CDNImg } from "../cdn/image"; type QuestCategoryProps = { category: QuestCategory; @@ -18,7 +19,7 @@ const QuestCategory: FunctionComponent = ({ category }) => { {category.questNumber} quest{category.questNumber > 1 ? "s" : null}

- + ); }; diff --git a/components/quests/reward.tsx b/components/quests/reward.tsx index 1e86fa73..c77d7c48 100644 --- a/components/quests/reward.tsx +++ b/components/quests/reward.tsx @@ -12,6 +12,7 @@ import { NotificationType, TransactionType, } from "../../constants/notifications"; +import { CDNImg } from "../cdn/image"; type RewardProps = { onClick: () => void; @@ -59,7 +60,7 @@ const Reward: FunctionComponent = ({

Reward:

- +

{reward}

diff --git a/components/quiz/questionKinds/imageChoice.tsx b/components/quiz/questionKinds/imageChoice.tsx index 68b7a999..92f23da6 100644 --- a/components/quiz/questionKinds/imageChoice.tsx +++ b/components/quiz/questionKinds/imageChoice.tsx @@ -1,5 +1,6 @@ import React, { FunctionComponent, useEffect } from "react"; import styles from "../../../styles/components/quests/quiz.module.css"; +import { CDNImg } from "../../cdn/image"; type ImageChoiceProps = { setSelected: (s: boolean) => void; @@ -42,7 +43,7 @@ const ImageChoice: FunctionComponent = ({ checked={selectedOptions.includes(index)} />
))} diff --git a/components/quiz/step.tsx b/components/quiz/step.tsx index 5fb4d876..5e7ce0b6 100644 --- a/components/quiz/step.tsx +++ b/components/quiz/step.tsx @@ -5,6 +5,7 @@ import QuestionRouter from "./questionRouter"; import styles from "../../styles/components/quests/quiz.module.css"; import CheckMarkIcon from "../UI/iconsComponents/icons/checkMarkIcon"; import NftIssuer from "../quests/nftIssuer"; +import { CDNImg } from "../cdn/image"; type StepProps = { setStep: (s: number) => void; @@ -68,7 +69,7 @@ const Step: FunctionComponent = ({ const layoutElements = question && question.layout === "illustrated_left" ? (
- illustration +
) : null; From 1829897e6b6afb85bff6da531ddd3a109ba42911 Mon Sep 17 00:00:00 2001 From: Thomas Marchand Date: Thu, 30 Nov 2023 17:33:33 +0000 Subject: [PATCH 2/2] fix: NODE_ENV was set to dev --- components/cdn/image.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/cdn/image.tsx b/components/cdn/image.tsx index 3ef2ce60..aa71cd43 100644 --- a/components/cdn/image.tsx +++ b/components/cdn/image.tsx @@ -6,7 +6,7 @@ export const CDNImg: React.FC> = ({ ...props }) => { const fullPath = - process.env.NODE_ENV === "development" && src && src.startsWith("/") + process.env.NODE_ENV === "production" && src && src.startsWith("/") ? `${process.env.NEXT_PUBLIC_CDN_URL}${src}` : src; @@ -24,7 +24,7 @@ export const CDNImage: React.FC = ({ src, ...props }) => { if (typeof src === "string") { imagePath = - process.env.NODE_ENV === "development" && src.startsWith("/") + process.env.NODE_ENV === "production" && src.startsWith("/") ? `${process.env.NEXT_PUBLIC_CDN_URL}${src}` : src; } else {