Merge branch 'main' into dev

.example.env

@@ -62,3 +62,5 @@ DB_PROJECTS_WEBHOOK_URL=
 # Discord Webhook URL for /contact page.
 CONTACT_WEBHOOK_URL=
 
+
+NEXT_PUBLIC_V4_ENABLED=false

src/components/Project/ProjectTabs/CyclesPayoutsTab/CountdownCallout.tsx

@@ -0,0 +1,24 @@
+import { ClockIcon } from '@heroicons/react/24/outline'
+import { Trans } from '@lingui/macro'
+import { useCountdownClock } from 'components/Project/hooks/useCountdownClock'
+import { twMerge } from 'tailwind-merge'
+
+export function CountdownCallout({
+  cycleStart,
+}: {
+  cycleStart: number | undefined
+}) {
+  const { remainingTimeText } = useCountdownClock(cycleStart)
+
+  return (
+    <div
+      className={twMerge(
+        'flex items-center gap-2 rounded-lg py-2 px-3.5 text-sm font-medium shadow-sm',
+        'border-bluebs-100 bg-bluebs-25 text-bluebs-700 dark:border-bluebs-800 dark:bg-bluebs-950 dark:text-bluebs-400',
+      )}
+    >
+      <ClockIcon className="h-5 w-5" />
+      <Trans>Starts in {remainingTimeText}</Trans>
+    </div>
+  )
+}

src/lib/api/supabase/projects/api.ts

@@ -50,14 +50,18 @@ export async function queryAllSGProjectsForServer() {
       chainId: readNetwork.chainId,
     }
   }) as unknown as Json<Pick<Project & { chainId: number }, SGSBCompareKey>>[]
-  const _resSepoliaV4 = resSepoliaV4.map(p => {
-    return {
-      ...p,
-      id: getSubgraphIdForProject(PV_V4, p.projectId), // Patch in the subgraph ID for V4 projects (to be consitent with legacy subgraph)
-      pv: PV_V4, // Patch in the PV for V4 projects,
-      chainId: sepolia.id,
-    }
-  }) as unknown as Json<Pick<Project & { chainId: number }, SGSBCompareKey>>[]
+  const _resSepoliaV4 = process.env.NEXT_PUBLIC_V4_ENABLED
+    ? (resSepoliaV4.map(p => {
+        return {
+          ...p,
+          id: getSubgraphIdForProject(PV_V4, p.projectId), // Patch in the subgraph ID for V4 projects (to be consitent with legacy subgraph)
+          pv: PV_V4, // Patch in the PV for V4 projects,
+          chainId: sepolia.id,
+        }
+      }) as unknown as Json<
+        Pick<Project & { chainId: number }, SGSBCompareKey>
+      >[])
+    : []
 
   return [..._res, ..._resSepoliaV4].map(formatSGProjectForDB)
 }

src/locales/messages.pot

@@ -554,9 +554,6 @@ msgstr ""
 msgid "If locked, this payout can't be edited or removed until the lock expires or the cycle is edited."
 msgstr ""
 
-msgid "Project isn't currently issuing tokens, but is issuing NFTs"
-msgstr ""
-
 msgid "I understand"
 msgstr ""
 
@@ -2414,6 +2411,9 @@ msgstr ""
 msgid "Export a list of this cycle's reserved token recipients to CSV."
 msgstr ""
 
+msgid "Payments open in {remainingTimeText}"
+msgstr ""
+
 msgid "Redeem"
 msgstr ""
 
@@ -2876,6 +2876,9 @@ msgstr ""
 msgid "Collection details"
 msgstr ""
 
+msgid "{0} isn't currently issuing tokens"
+msgstr ""
+
 msgid "Token ticker is required"
 msgstr ""
 
@@ -3278,6 +3281,9 @@ msgstr ""
 msgid "Available payout"
 msgstr ""
 
+msgid "Notice from {name}"
+msgstr ""
+
 msgid "Big ups to the Ethereum community for crafting the infrastructure and economy to make Juicebox possible."
 msgstr ""
 
@@ -3989,6 +3995,9 @@ msgstr ""
 msgid "tokens per ETH paid"
 msgstr ""
 
+msgid "Starts in {remainingTimeText}"
+msgstr ""
+
 msgid "Congratulations!"
 msgstr ""
 
@@ -4004,6 +4013,9 @@ msgstr ""
 msgid "Amount (ETH)"
 msgstr ""
 
+msgid "{0} is currently only issuing NFTs"
+msgstr ""
+
 msgid "You haven't created any projects yet!"
 msgstr ""
 

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/AboutPanel/AboutPanel.tsx

@@ -1,10 +1,18 @@
-import { t } from '@lingui/macro'
+import { EnvelopeIcon } from '@heroicons/react/24/outline'
+import { t, Trans } from '@lingui/macro'
+import { Callout } from 'components/Callout/Callout'
 import { EmptyScreen } from 'components/Project/ProjectTabs/EmptyScreen'
 import { RichPreview } from 'components/RichPreview/RichPreview'
+import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
 import { useAboutPanel } from 'packages/v2v3/components/V2V3Project/ProjectDashboard/hooks/useAboutPanel'
 
 export const AboutPanel = () => {
   const { description } = useAboutPanel()
+  const { projectMetadata } = useProjectMetadataContext()
+
+  const payDisclosure = projectMetadata?.payDisclosure
+  const name = projectMetadata?.name
+
   return (
     <div className="flex min-h-[384px] w-full flex-col gap-8 md:gap-10">
       <div className="flex flex-col gap-4 whitespace-pre-wrap">
@@ -15,6 +23,22 @@ export const AboutPanel = () => {
             <EmptyScreen subtitle={t`This project has no description`} />
           </>
         )}
+        {/* provide an anchorpoint */}
+        <span id="notice"></span>
+        {name && payDisclosure && (
+          <Callout
+            collapsible
+            className="mt-6 border border-bluebs-100 bg-bluebs-25 text-bluebs-700 dark:border-bluebs-800 dark:bg-bluebs-950 dark:text-bluebs-400"
+            iconComponent={<EnvelopeIcon className="h-6 w-6" />}
+          >
+            <>
+              <div className="font-medium text-bluebs-700 dark:text-bluebs-300">
+                <Trans>Notice from {name}</Trans>
+              </div>
+              <p className="mt-2 mb-0">{payDisclosure}</p>
+            </>
+          </Callout>
+        )}
       </div>
     </div>
   )

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/CyclesPayoutsPanel.tsx

@@ -1,7 +1,7 @@
 import { Tab } from '@headlessui/react'
 import { t } from '@lingui/macro'
 import { CyclesTab } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CyclesTab'
-import { useMemo } from 'react'
+import { useProjectContext } from '../../hooks/useProjectContext'
 import { CurrentUpcomingSubPanel } from './components/CurrentUpcomingSubPanel'
 import { HistorySubPanel } from './components/HistorySubPanel'
 
@@ -11,14 +11,15 @@ type CyclesSubPanel = {
 }
 
 export const CyclesPayoutsPanel = () => {
-  const tabs: CyclesSubPanel[] = useMemo(
-    () => [
-      { id: 'current', name: t`Current` },
-      { id: 'upcoming', name: t`Upcoming` },
-      { id: 'history', name: t`History` },
-    ],
-    [],
-  )
+  const { fundingCycle } = useProjectContext()
+
+  const tabs: CyclesSubPanel[] = fundingCycle ? [
+    // Don't show the current tab if there is no current cycle
+    fundingCycle.number.gt(0) && { id: 'current', name: t`Current` },
+    { id: 'upcoming', name: t`Upcoming` },
+    { id: 'history', name: t`History` },
+  ].filter(Boolean) as CyclesSubPanel[] : []
+
   return (
     <Tab.Group as="div" className="mx-auto flex w-full flex-col gap-5">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx

@@ -1,5 +1,6 @@
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { Trans, t } from '@lingui/macro'
+import { CountdownCallout } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CountdownCallout'
 import { currentCycleRemainingLengthTooltip } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CyclesPanelTooltips'
 import { UpcomingCycleChangesCallout } from 'components/Project/ProjectTabs/CyclesPayoutsTab/UpcomingCycleChangesCallout'
 import { TitleDescriptionDisplayCard } from 'components/Project/ProjectTabs/TitleDescriptionDisplayCard'
@@ -104,8 +105,13 @@ export const CurrentUpcomingSubPanel = ({
   return (
     <div>
       <div className="flex flex-col gap-4">
-        {id === 'upcoming' && (
-          <UpcomingCycleChangesCallout 
+        {/* If the upcoming tab is selected and its the first cycle, it means they're
+        currently in Cycle 0 (i.e. the project hasn't 'started' yet.) */}
+        {id === 'upcoming' && info.cycleNumber === 1 && (
+          <CountdownCallout cycleStart={info.start?.toNumber()} />
+        )}
+        {id === 'upcoming' && info.cycleNumber && info.cycleNumber > 1 && (
+          <UpcomingCycleChangesCallout
             text={upcomingCycleChangesCalloutText}
             hasChanges={hasChanges}
             loading={loading}

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingSubPanel.ts

@@ -40,6 +40,9 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     return upcomingFundingCycle?.duration?.isZero() ?? true
   }, [fundingCycle?.duration, type, upcomingFundingCycle?.duration])
 
+  const start =
+    type === 'current' ? fundingCycle?.start : upcomingFundingCycle?.start
+
   const upcomingCycleLength = useMemo(() => {
     if (!upcomingFundingCycle) return
     if (cycleUnlocked) return '-'
@@ -82,6 +85,7 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     cycleLength: upcomingCycleLength,
     cycleUnlocked,
     currentCycleUnlocked,
+    start,
     hasPendingConfiguration:
       /**
        * If a cycle is unlocked, it may have a pending change.

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/FirstCycleCountdownCallout.tsx

@@ -0,0 +1,30 @@
+import { ClockIcon } from '@heroicons/react/24/outline'
+import { Trans } from '@lingui/macro'
+import { useCountdownClock } from 'components/Project/hooks/useCountdownClock'
+import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
+import { useProjectUpcomingFundingCycle } from 'packages/v2v3/hooks/contractReader/useProjectUpcomingFundingCycle'
+import { twMerge } from 'tailwind-merge'
+
+export function FirstCycleCountdownCallout() {
+  const { projectId } = useProjectMetadataContext()
+
+  // inefficient extra call, but meh
+  const fc = useProjectUpcomingFundingCycle({ projectId })
+  const start = fc?.data?.[0]?.start?.toNumber()
+  const { remainingTimeText } = useCountdownClock(start)
+
+  if (!start) {
+    return null
+  }
+  return (
+    <div
+      className={twMerge(
+        'flex items-center gap-2 rounded-lg py-2 px-3.5 text-sm font-medium shadow-sm',
+        'border-warning-100 bg-warning-25 text-warning-700 dark:border-warning-800 dark:bg-warning-950 dark:text-warning-400',
+      )}
+    >
+      <ClockIcon className="h-5 w-5" />
+      <Trans>Payments open in {remainingTimeText}</Trans>
+    </div>
+  )
+}

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx

@@ -55,6 +55,7 @@ import { projectCartActions } from '../../redux/projectCartSlice'
 import { ClaimErc20Callout } from '../ClaimErc20Callout'
 import { EthPerTokenAccordion } from '../EthPerTokenAccordion'
 import { ProjectCartNftReward } from '../ReduxProjectCartProvider'
+import { FirstCycleCountdownCallout } from './FirstCycleCountdownCallout'
 import { PayProjectModal } from './PayProjectModal/PayProjectModal'
 
 const MAX_AMOUNT = BigInt(Number.MAX_SAFE_INTEGER)
@@ -75,6 +76,7 @@ type PayRedeemCardProps = {
 
 export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
   const project = useProjectContext()
+  const metadata = useProjectMetadataContext()
   const state = useProjectSelector(state => state.payRedeem.cardState)
   const dispatch = useProjectDispatch()
   // TODO: We should probably break out tokens panel hook into reusable module
@@ -119,6 +121,9 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
   }
 
   const noticeText = useMemo(() => {
+    if (project.fundingCycle?.number?.isZero()) {
+      return
+    }
     const showPayerIssuance =
       !payerIssuanceRate.enabled && !payerIssuanceRate.loading
     if (!showPayerIssuance) {
@@ -127,13 +132,20 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
 
     const showNfts = hasNfts && !hasNftsLoading
     if (showNfts) {
-      return t`Project isn't currently issuing tokens, but is issuing NFTs`
+      return t`${metadata.projectMetadata?.name} is currently only issuing NFTs`
     }
 
-    return t`Project isn't currently issuing tokens`
-  }, [payerIssuanceRate, hasNfts, hasNftsLoading])
+    return t`${metadata.projectMetadata?.name} isn't currently issuing tokens`
+  }, [
+    payerIssuanceRate,
+    hasNfts,
+    hasNftsLoading,
+    metadata,
+    project.fundingCycle,
+  ])
 
   const redeemDisabled =
+    project.fundingCycle?.number?.isZero() ||
     project.fundingCycleMetadata?.redemptionRate.eq(0) ||
     isInfiniteDistributionLimit(project.distributionLimit)
 
@@ -183,15 +195,17 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
 
       <EthPerTokenAccordion />
 
-      {!payerIssuanceRate.enabled && !payerIssuanceRate.loading && (
-        <Callout.Info
-          className="mt-6 py-2 px-3.5 text-xs leading-5 dark:bg-slate-700"
-          collapsible={false}
-          icon={<InformationCircleIcon className="h-5 w-5" />}
-        >
-          {noticeText}
-        </Callout.Info>
-      )}
+      {!payerIssuanceRate.enabled &&
+        !payerIssuanceRate.loading &&
+        noticeText && (
+          <Callout.Info
+            className="mt-6 py-2 px-3.5 text-sm leading-5 dark:bg-slate-700"
+            collapsible={false}
+            icon={<InformationCircleIcon className="h-5 w-5" />}
+          >
+            {noticeText}
+          </Callout.Info>
+        )}
 
       <NftCreditsCallout />
 
@@ -443,7 +457,7 @@ const PayConfiguration: React.FC<PayConfigurationProps> = ({
   payerIssuanceRate,
 }) => {
   const { payDisabled, message } = usePayProjectDisabled()
-  const { tokenSymbol } = useProjectContext()
+  const { tokenSymbol, fundingCycle } = useProjectContext()
   const chosenNftRewards = useProjectSelector(
     state => state.projectCart.chosenNftRewards,
   )
@@ -516,13 +530,22 @@ const PayConfiguration: React.FC<PayConfigurationProps> = ({
       insufficientBalance ||
       cartPayAmount === 0 ||
       !cartPayAmount ||
-      payDisabled
+      payDisabled ||
+      fundingCycle?.number?.isZero()
     )
-  }, [cartPayAmount, insufficientBalance, payDisabled, walletConnected])
+  }, [
+    cartPayAmount,
+    insufficientBalance,
+    payDisabled,
+    walletConnected,
+    fundingCycle,
+  ])
 
   return (
     <div>
-      <div className="relative">
+      {fundingCycle?.number?.isZero() && <FirstCycleCountdownCallout />}
+
+      <div className="relative mt-3">
         <div className="flex flex-col gap-y-2">
           <PayRedeemInput
             label={t`You pay`}

src/pages/api/projects/trending.ts

@@ -63,9 +63,11 @@ const handler: NextApiHandler = async (req, res) => {
 
     const projects = [
       ...projectsRes.data.projects,
-      ...v4SepoliaProjectsRes.data.projects.map(p => {
-        return { ...p, chainId: sepolia.id, pv: PV_V4 }
-      }),
+      ...(process.env.NEXT_PUBLIC_V4_ENABLED
+        ? v4SepoliaProjectsRes.data.projects.map(p => {
+            return { ...p, chainId: sepolia.id, pv: PV_V4 }
+          })
+        : []),
     ]
 
     try {