diff --git a/next.config.js b/next.config.js index c18298b6..07d4fff6 100644 --- a/next.config.js +++ b/next.config.js @@ -70,7 +70,11 @@ if (process.env.NODE_ENV === 'development') { CONNECT_SRC.push('localhost:*') } -const FRAME_SRC = ['https://verify.walletconnect.com/'] +const FRAME_SRC = [ + 'https://verify.walletconnect.com/', + 'https://www.youtube.com/', + 'https://youtube.com/', +] const ContentSecurityPolicy = ` default-src 'none'; diff --git a/src/components/CurrencyAmount.tsx b/src/components/CurrencyAmount.tsx index 0a3b6b35..32db9777 100644 --- a/src/components/CurrencyAmount.tsx +++ b/src/components/CurrencyAmount.tsx @@ -14,7 +14,9 @@ import { /** * Available currencies of {@link JB_CURRENCIES} */ -type Currency = 1n | 2n +export type Currency = 1n | 2n +export const CURRENCY_USD: Currency = 2n +export const CURRENCY_ETH: Currency = 1n export type CurrencyAmountProps = { className?: string diff --git a/src/components/Project/ProjectPage.tsx b/src/components/Project/ProjectPage.tsx index e3ad7be8..b737b373 100644 --- a/src/components/Project/ProjectPage.tsx +++ b/src/components/Project/ProjectPage.tsx @@ -13,13 +13,10 @@ import { Stats } from './components/Stats' import { TitleBlock } from './components/TitleBlock' import { useEffect } from 'react' import React from 'react' +import { YouTubeEmbed } from '../YouTubeEmbed' export const ProjectPage = () => { const { logoUri, name, projectId } = useJbProject() - const { fundingCycleMetadata } = useJBFundingCycleContext() - const nfts = useJb721DelegateTiers(fundingCycleMetadata?.data?.dataSource, { - ipfsGatewayHostname: OPEN_IPFS_GATEWAY_HOSTNAME!, - }) return ( <> @@ -72,8 +69,8 @@ export const ContentMobile: React.FC = ({ className }) => { return (
- - + + @@ -104,9 +101,9 @@ const ContentDesktop: React.FC = ({ className }) => {
{/* Left column */}
- + - + About Activity @@ -134,9 +131,7 @@ type HeroVideoProps = { } const HeroVideo: React.FC = ({ className }) => { - return ( -
- ) + const { introVideoUrl } = useJbProject() + if (!introVideoUrl) return null + return } diff --git a/src/components/Project/components/Stats.tsx b/src/components/Project/components/Stats.tsx index eadf67f9..78a1f790 100644 --- a/src/components/Project/components/Stats.tsx +++ b/src/components/Project/components/Stats.tsx @@ -1,3 +1,5 @@ +import { CURRENCY_USD, CurrencyAmount } from '@/components/CurrencyAmount' +import { useEthUsdPrice } from '@/components/EthUsdPriceProvider' import { Link } from '@/components/Link' import { Button } from '@/components/ui/Button' import { Progress } from '@/components/ui/Progress' @@ -6,15 +8,14 @@ import { useJbProject } from '@/hooks/useJbProject' import { ReactNode, useMemo } from 'react' import { twMerge } from 'tailwind-merge' import { ShareButton } from './ShareButton' -import { CurrencyAmount } from '@/components/CurrencyAmount' -import { Ether } from 'juice-hooks' export type StatsProps = { className?: string } export const Stats: React.FC = ({ className }) => { - const { projectId, payEventsData } = useJbProject() + const { projectId, payEventsData, softTarget } = useJbProject() + const { ethToUsd } = useEthUsdPrice() const contributorAmounts = useMemo(() => { return payEventsData.data?.payEvents.reduce( @@ -33,20 +34,20 @@ export const Stats: React.FC = ({ className }) => { }, [contributorAmounts]) const totalRaised = useMemo(() => { - return Object.values(contributorAmounts || {}).reduce( + const totalInWei = Object.values(contributorAmounts || {}).reduce( (acc, amount) => acc + amount, 0n, ) - }, [contributorAmounts]) - - const flexibleGoal = useMemo(() => { - // TODO: Replace real - return Ether.parse('1', 18).val - }, []) + if (softTarget.currency === CURRENCY_USD) { + return ethToUsd(totalInWei) + } + return totalInWei + }, [contributorAmounts, ethToUsd, softTarget.currency]) const progress = useMemo(() => { - return Number((Number(totalRaised) / Number(flexibleGoal)) * 100) - }, [totalRaised, flexibleGoal]) + if (!softTarget.amount) return 100 + return Number((Number(totalRaised) / Number(softTarget.amount)) * 100) + }, [totalRaised, softTarget]) return (
@@ -54,10 +55,18 @@ export const Stats: React.FC = ({ className }) => {
- + - raised of flexible goal + raised of{' '} + {' '} + flexible goal
diff --git a/src/components/YouTubeEmbed.tsx b/src/components/YouTubeEmbed.tsx new file mode 100644 index 00000000..6e5f8aa5 --- /dev/null +++ b/src/components/YouTubeEmbed.tsx @@ -0,0 +1,47 @@ +import { useMemo } from 'react' +import { twMerge } from 'tailwind-merge' + +export type YouTubeEmbedProps = { + className?: string + url: string +} +export const YouTubeEmbed: React.FC = ({ + className, + url, +}) => { + const embeddedUrl = useMemo(() => { + try { + const urlObj = new URL(url) + if ( + urlObj.hostname !== 'www.youtube.com' && + urlObj.hostname !== 'youtube.com' + ) { + return '' + } + const videoId = urlObj.searchParams.get('v') + return `https://www.youtube.com/embed/${videoId}` + } catch (e) { + console.error('') + return '' + } + }, [url]) + + if (!embeddedUrl) return null + + return ( +
+