read juicecrowd new metadata (#146)

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';

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

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<ContentMobileProps> = ({ className }) => {
 
   return (
     <div className={twMerge('w-full', className)}>
-      <HeroVideo className="h-56" />
-      <Stats className="mt-9" />
+      <HeroVideo className="mb-9" />
+      <Stats />
 
       <Tabs defaultValue="about" className="mt-14">
         <TabsList ref={tabRef} className="w-full bg-white">
@@ -104,9 +101,9 @@ const ContentDesktop: React.FC<ContentDesktopProps> = ({ className }) => {
     <div className={twMerge('w-full gap-x-20', className)}>
       {/* Left column */}
       <div className="max-w-2xl flex-1">
-        <HeroVideo />
+        <HeroVideo className="mb-8" />
 
-        <Tabs defaultValue="about" className="mt-20">
+        <Tabs defaultValue="about" className="mt-12">
           <TabsList className="w-full">
             <TabsTrigger value="about">About</TabsTrigger>
             <TabsTrigger value="activity">Activity</TabsTrigger>
@@ -134,9 +131,7 @@ type HeroVideoProps = {
 }
 
 const HeroVideo: React.FC<HeroVideoProps> = ({ className }) => {
-  return (
-    <div
-      className={twMerge('h-96 w-full rounded-lg bg-orange-200', className)}
-    />
-  )
+  const { introVideoUrl } = useJbProject()
+  if (!introVideoUrl) return null
+  return <YouTubeEmbed className={className} url={introVideoUrl} />
 }

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<StatsProps> = ({ className }) => {
-  const { projectId, payEventsData } = useJbProject()
+  const { projectId, payEventsData, softTarget } = useJbProject()
+  const { ethToUsd } = useEthUsdPrice()
 
   const contributorAmounts = useMemo(() => {
     return payEventsData.data?.payEvents.reduce(
@@ -33,31 +34,39 @@ export const Stats: React.FC<StatsProps> = ({ 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 (
     <div className={twMerge('flex flex-col gap-12', className)}>
       <div>
         <Progress className="h-1.5" value={progress} />
         <div className="mt-5 flex items-center gap-3">
           <span className="font-heading text-xl font-medium md:text-2xl">
-            <CurrencyAmount amount={totalRaised} />
+            <CurrencyAmount
+              currency={softTarget.currency}
+              amount={totalRaised}
+            />
           </span>
           <span className="flex items-center gap-1 text-sm text-gray-500">
-            raised of <CurrencyAmount amount={flexibleGoal} /> flexible goal
+            raised of{' '}
+            <CurrencyAmount
+              currency={softTarget.currency}
+              amount={softTarget.amount}
+            />{' '}
+            flexible goal
           </span>
         </div>
       </div>

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<YouTubeEmbedProps> = ({
+  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 (
+    <div
+      className={twMerge(
+        'relative w-full overflow-hidden rounded-lg pt-[56.25%]',
+        className,
+      )}
+    >
+      <iframe
+        className="absolute left-0 top-0 h-full w-full"
+        src={embeddedUrl}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        title="Embedded youtube"
+      />
+    </div>
+  )
+}

src/contexts/ProjectMetadata.tsx

@@ -19,6 +19,9 @@ import { PropsWithChildren, createContext, useContext } from 'react'
 type _JBProjectMetadata = JBProjectMetadata & {
   // TODO: Remove once added to juice-hooks
   infoUri: string | undefined
+  introVideoUrl: string | undefined
+  softTargetAmount: string | undefined
+  softTargetCurrency: string | undefined
 }
 
 type JBProjectMetadataContext = _JBProjectMetadata & {
@@ -37,6 +40,9 @@ export const JBProjectMetadataContext = createContext<JBProjectMetadataContext>(
     discord: undefined,
     telegram: undefined,
     infoUri: undefined,
+    introVideoUrl: undefined,
+    softTargetAmount: undefined,
+    softTargetCurrency: undefined,
     nftData: AsyncDataNone,
     payEventsData: QueryResultNone,
   },

src/hooks/useJbProject.tsx

@@ -1,6 +1,12 @@
+import { CURRENCY_USD, Currency } from '@/components/CurrencyAmount'
 import { useJBProjectMetadata } from '@/contexts/ProjectMetadata'
 import { useProjectsQuery } from '@/lib/graphql/hooks'
-import { PV2, useJBContractContext, useJbProjectsOwnerOf } from 'juice-hooks'
+import {
+  Ether,
+  PV2,
+  useJBContractContext,
+  useJbProjectsOwnerOf,
+} from 'juice-hooks'
 import pick from 'lodash/pick'
 import { useMemo } from 'react'
 
@@ -76,9 +82,25 @@ export const useJbProject = ({
     metadata.twitter,
   ])
 
+  const softTarget = useMemo(() => {
+    if (metadata.softTargetAmount) {
+      return {
+        amount: Ether.parse(metadata.softTargetAmount, 0).val,
+        currency: metadata.softTargetCurrency
+          ? (BigInt(metadata.softTargetCurrency) as Currency)
+          : CURRENCY_USD,
+      }
+    }
+    return {
+      amount: 0n,
+      currency: CURRENCY_USD,
+    }
+  }, [metadata.softTargetAmount, metadata.softTargetCurrency])
+
   return {
     ...(pick(_graphqlProject, ['handle', 'contributorsCount']) ?? {}),
     ...metadata,
+    softTarget,
     socialLinks,
     projectId,
     createdAt,