release: 28th Sep 2024 pt 2

.github/workflows/ci-run.yml

@@ -24,6 +24,7 @@ env:
   SUBGRAPH_URL: ${{ secrets.SUBGRAPH_URL }}
   NEXT_PUBLIC_SUBGRAPH_URL: ${{ secrets.NEXT_PUBLIC_SUBGRAPH_URL }}
   NEXT_PUBLIC_V4_SUBGRAPH_URL: ${{ secrets.NEXT_PUBLIC_V4_SUBGRAPH_URL }}
+  NEXT_PUBLIC_V4_SEPOLIA_SUBGRAPH_URL: ${{ secrets.NEXT_PUBLIC_V4_SEPOLIA_SUBGRAPH_URL }}
 
 jobs:
   jest:

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -107,8 +107,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^10.0.3-alpha",
-    "juice-sdk-react": "^10.0.1-alpha",
+    "juice-sdk-core": "^11.0.0-alpha",
+    "juice-sdk-react": "^11.0.0-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",

src/components/Home/HomepageProjectCard.tsx

@@ -3,10 +3,11 @@ import { Skeleton } from 'antd'
 import { HomepageCard } from 'components/Home/HomepageCard'
 import ProjectLogo from 'components/ProjectLogo'
 import ETHAmount from 'components/currency/ETHAmount'
-import { PV_V2 } from 'constants/pv'
+import { PV_V2, PV_V4 } from 'constants/pv'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { SubgraphQueryProject } from 'models/subgraphProjects'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
+import { v4ProjectRoute } from 'packages/v4/utils/routes'
 
 function Statistic({
   name,
@@ -44,20 +45,25 @@ export function HomepageProjectCard({
   project: Pick<
     SubgraphQueryProject,
     'metadataUri' | 'volume' | 'paymentsCount' | 'handle' | 'pv' | 'projectId'
-  >
+  > & { chainId?: number }
   lazyLoad?: boolean
 }) {
   const { data: metadata, isLoading } = useProjectMetadata(project.metadataUri)
 
   return (
     <HomepageCard
       href={
-        project.pv === PV_V2
+        project.pv === PV_V4 && project.chainId
+          ? v4ProjectRoute({
+              projectId: project.projectId,
+              chainId: project.chainId,
+            })
+          : project.pv === PV_V2
           ? v2v3ProjectRoute(project)
           : `/p/${project.handle}`
       }
       img={
-        metadata && !isLoading ? (
+        !isLoading ? (
           <ProjectLogo
             className="h-[192px] w-full rounded-none object-cover"
             name={metadata?.name}
@@ -69,17 +75,19 @@ export function HomepageProjectCard({
         ) : null
       }
       title={
-        metadata && !isLoading ? (
-          <div className="max-h-8 truncate font-heading text-lg font-medium text-grey-900 dark:text-slate-100 md:text-xl">
-            {metadata.name}
-          </div>
-        ) : (
+        isLoading ? (
           <Skeleton.Input
             className="h-6 w-full"
             active
             size="small"
             style={{ width: '100%' }}
           />
+        ) : !metadata ? (
+          '---'
+        ) : (
+          <div className="max-h-8 truncate font-heading text-lg font-medium text-grey-900 dark:text-slate-100 md:text-xl">
+            {metadata.name}
+          </div>
         )
       }
       description={

src/components/Project/ProjectHeader/ProjectHeaderPopupMenu.tsx

@@ -1,8 +1,6 @@
 import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
-import { BookmarkButtonIcon } from 'components/buttons/BookmarkButton/BookmarkButtonIcon'
 import { useBookmarkButton } from 'components/buttons/BookmarkButton/hooks/useBookmarkButton'
-import { SubscribeButtonIcon } from 'components/buttons/SubscribeButton/SubscribeButtonIcon'
 import { useSubscribeButton } from 'components/buttons/SubscribeButton/hooks/useSubscribeButton'
 import { PV_V2 } from 'constants/pv'
 import useMobile from 'hooks/useMobile'
@@ -54,42 +52,42 @@ export function ProjectHeaderPopupMenu({
                 href,
               }))
             : []),
-          {
-            id: 'subscribe',
-            label: (
-              <>
-                <SubscribeButtonIcon
-                  isSubscribed={isSubscribed}
-                  className="h-5 w-5"
-                />
+          // {
+          //   id: 'subscribe',
+          //   label: (
+          //     <>
+          //       <SubscribeButtonIcon
+          //         isSubscribed={isSubscribed}
+          //         className="h-5 w-5"
+          //       />
 
-                <span className="whitespace-nowrap text-sm font-medium">
-                  <Trans>Get notifications</Trans>
-                </span>
-              </>
-            ),
-            onClick: onSubscribeButtonClicked,
-          },
-          {
-            id: 'bookmark',
-            label: (
-              <>
-                <BookmarkButtonIcon
-                  isBookmarked={isBookmarked}
-                  className="h-5 w-5"
-                />
-                <span className="whitespace-nowrap text-sm font-medium">
-                  <Trans>Save project</Trans>
-                </span>
-              </>
-            ),
-            onClick(ev) {
-              ev.preventDefault()
-              ev.stopPropagation()
+          //       <span className="whitespace-nowrap text-sm font-medium">
+          //         <Trans>Get notifications</Trans>
+          //       </span>
+          //     </>
+          //   ),
+          //   onClick: onSubscribeButtonClicked,
+          // },
+          // {
+          //   id: 'bookmark',
+          //   label: (
+          //     <>
+          //       <BookmarkButtonIcon
+          //         isBookmarked={isBookmarked}
+          //         className="h-5 w-5"
+          //       />
+          //       <span className="whitespace-nowrap text-sm font-medium">
+          //         <Trans>Save project</Trans>
+          //       </span>
+          //     </>
+          //   ),
+          //   onClick(ev) {
+          //     ev.preventDefault()
+          //     ev.stopPropagation()
 
-              onBookmarkButtonClicked()
-            },
-          },
+          //     onBookmarkButtonClicked()
+          //   },
+          // },
           {
             id: 'tools',
             label: (

src/components/Project/ProjectTabs/utils/pairToDatum.ts

@@ -2,8 +2,8 @@ import { ConfigurationPanelDatum } from 'components/Project/ProjectTabs/CyclesPa
 
 export const pairToDatum = (
   name: string,
-  current: string | undefined,
-  upcoming: string | undefined | null,
+  current: string | JSX.Element | undefined,
+  upcoming: string | JSX.Element | undefined | null,
   link?: string,
   easyCopy?: boolean,
 ): ConfigurationPanelDatum => {

src/components/ProjectCard.tsx

@@ -1,16 +1,16 @@
 import * as constants from '@ethersproject/constants'
 import { BookmarkIcon as BookmarkIconSolid } from '@heroicons/react/24/solid'
 import { Skeleton } from 'antd'
-import { PV_V2 } from 'constants/pv'
+import { PV_V2, PV_V4 } from 'constants/pv'
 import { useProjectHandleText } from 'hooks/useProjectHandleText'
-import Link from 'next/link'
-import { isHardArchived } from 'utils/archived'
-import { formatDate } from 'utils/format/formatDate'
-
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useSubtitle } from 'hooks/useSubtitle'
 import { SubgraphQueryProject } from 'models/subgraphProjects'
+import Link from 'next/link'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
+import { v4ProjectRoute } from 'packages/v4/utils/routes'
+import { isHardArchived } from 'utils/archived'
+import { formatDate } from 'utils/format/formatDate'
 import { ArchivedBadge } from './ArchivedBadge'
 import Loading from './Loading'
 import ProjectLogo from './ProjectLogo'
@@ -21,20 +21,19 @@ export default function ProjectCard({
   project,
   bookmarked,
 }: {
-  project?: SubgraphQueryProject
+  project?: SubgraphQueryProject & { chainId?: number }
   bookmarked?: boolean
 }) {
   const { data: metadata } = useProjectMetadata(project?.metadataUri)
   const { handleText } = useProjectHandleText({
     handle: project?.handle,
     projectId: project?.projectId,
   })
-
   const subtitle = useSubtitle(metadata)
 
   if (!project) return null
 
-  const { volume, pv, handle, projectId, createdAt } = project
+  const { volume, pv, handle, projectId, createdAt, chainId } = project
   const tags = metadata?.tags
 
   // If the total paid is greater than 0, but less than 10 ETH, show two decimal places.
@@ -58,7 +57,12 @@ export default function ProjectCard({
       : `/p/${handle}`
 
   const projectCardUrl =
-    pv === PV_V2
+    pv === PV_V4 && chainId
+      ? v4ProjectRoute({
+          projectId,
+          chainId,
+        })
+      : pv === PV_V2
       ? v2v3ProjectRoute({
           projectId,
           handle,

src/components/Projects/ProjectsFilterAndSort.tsx

@@ -21,8 +21,13 @@ export type CheckboxOnChange = (checked: boolean) => void
 export default function ProjectsFilterAndSort({
   includeV1,
   setIncludeV1,
+
   includeV2,
   setIncludeV2,
+
+  includeV4,
+  setIncludeV4,
+
   showArchived,
   setShowArchived,
   searchTags,
@@ -34,8 +39,13 @@ export default function ProjectsFilterAndSort({
 }: {
   includeV1: boolean
   setIncludeV1: CheckboxOnChange
+
   includeV2: boolean
   setIncludeV2: CheckboxOnChange
+
+  includeV4: boolean
+  setIncludeV4: CheckboxOnChange
+
   showArchived: boolean
   setShowArchived: CheckboxOnChange
   searchTags: ProjectTagName[]
@@ -67,10 +77,7 @@ export default function ProjectsFilterAndSort({
   return (
     <div className="flex max-w-[100vw] flex-wrap items-center whitespace-pre">
       <Collapse
-        className={classNames(
-          `projects-filter-collapse`,
-          'my-0 border-none bg-transparent',
-        )}
+        className="projects-filter-collapse my-0 border-none bg-transparent"
         activeKey={tagsIsOpen ? 0 : undefined}
       >
         <CollapsePanel
@@ -161,6 +168,11 @@ export default function ProjectsFilterAndSort({
               checked={includeV2}
               onChange={setIncludeV2}
             />
+            <FilterCheckboxItem
+              label={t`V4`}
+              checked={includeV4}
+              onChange={setIncludeV4}
+            />
             <FilterCheckboxItem
               label={t`Archived`}
               checked={showArchived}

src/components/Projects/ProjectsView.tsx

@@ -3,7 +3,7 @@ import { Button } from 'antd'
 import Search from 'antd/lib/input/Search'
 import { Footer } from 'components/Footer/Footer'
 import { PROJECTS_PAGE } from 'constants/fathomEvents'
-import { PV_V1, PV_V2 } from 'constants/pv'
+import { PV_V1, PV_V2, PV_V4 } from 'constants/pv'
 import { useWallet } from 'hooks/Wallet'
 import { trackFathomGoal } from 'lib/fathom'
 import { DBProjectQueryOpts } from 'models/dbProject'
@@ -65,15 +65,18 @@ export function ProjectsView() {
   const [orderBy, setOrderBy] = useState<OrderByOption>('volume')
   const [includeV1, setIncludeV1] = useState<boolean>(true)
   const [includeV2, setIncludeV2] = useState<boolean>(true)
+  const [includeV4, setIncludeV4] = useState<boolean>(true)
   const [showArchived, setShowArchived] = useState<boolean>(false)
   const [reversed, setReversed] = useState<boolean>(false)
 
   const pv: PV[] | undefined = useMemo(() => {
     const _pv: PV[] = []
     if (includeV1) _pv.push(PV_V1)
     if (includeV2) _pv.push(PV_V2)
-    return _pv.length ? _pv : [PV_V1, PV_V2]
-  }, [includeV1, includeV2])
+    if (includeV4) _pv.push(PV_V4)
+
+    return _pv.length ? _pv : [PV_V1, PV_V2, PV_V4]
+  }, [includeV1, includeV2, includeV4])
 
   function updateRoute(
     _searchTags: ProjectTagName[],
@@ -137,8 +140,10 @@ export function ProjectsView() {
                 <ProjectsFilterAndSort
                   includeV1={includeV1}
                   includeV2={includeV2}
+                  includeV4={includeV4}
                   setIncludeV1={setIncludeV1}
                   setIncludeV2={setIncludeV2}
+                  setIncludeV4={setIncludeV4}
                   showArchived={showArchived}
                   setShowArchived={setShowArchived}
                   reversed={reversed}

src/components/Projects/TrendingProjectCard.tsx

@@ -4,12 +4,13 @@ import { Skeleton } from 'antd'
 import ETHAmount from 'components/currency/ETHAmount'
 import Loading from 'components/Loading'
 import ProjectLogo from 'components/ProjectLogo'
-import { PV_V2 } from 'constants/pv'
+import { PV_V2, PV_V4 } from 'constants/pv'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useProjectTrendingPercentageIncrease } from 'hooks/useProjectTrendingPercentageIncrease'
 import { DBProject } from 'models/dbProject'
 import Link from 'next/link'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
+import { v4ProjectRoute } from 'packages/v4/utils/routes'
 import { TRENDING_WINDOW_DAYS } from './RankingExplanation'
 
 export default function TrendingProjectCard({
@@ -29,7 +30,7 @@ export default function TrendingProjectCard({
     | 'handle'
     | 'pv'
     | 'projectId'
-  >
+  > & { chainId?: number }
   rank: number
   size?: 'sm' | 'lg'
   bookmarked?: boolean
@@ -62,7 +63,12 @@ export default function TrendingProjectCard({
       prefetch={false}
       key={project.handle}
       href={
-        project.pv === PV_V2
+        project.pv === PV_V4 && project.chainId
+          ? v4ProjectRoute({
+              projectId: project.projectId,
+              chainId: project.chainId,
+            })
+          : project.pv === PV_V2
           ? v2v3ProjectRoute(project)
           : `/p/${project.handle}`
       }