Add Juicebox V6 support; create flow launches V6 projects

package.json

@@ -112,8 +112,6 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "2.1.1",
-    "juice-sdk-react": "5.0.2",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
@@ -149,7 +147,9 @@
     "viem": "^2.31.6",
     "wagmi": "^2.15.6",
     "yarn": "^1.22.22",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "@bananapus/nana-sdk-core": "1.0.0",
+    "@bananapus/nana-sdk-react": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

src/components/EthereumAddress.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from 'antd'
 import CopyTextButton from 'components/buttons/CopyTextButton'
 import EtherscanLink from 'components/EtherscanLink'
 import { useEnsName } from 'hooks/useEnsName'
-import { JBChainId } from 'juice-sdk-core'
+import { JBChainId } from '@bananapus/nana-sdk-core'
 import Link from 'next/link'
 import { MouseEventHandler, useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'

src/components/EtherscanLink.tsx

@@ -1,5 +1,5 @@
 import { LinkIcon } from '@heroicons/react/24/outline'
-import { JBChainId } from 'juice-sdk-core'
+import { JBChainId } from '@bananapus/nana-sdk-core'
 import { MouseEventHandler } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { etherscanLink } from 'utils/etherscan'

src/components/Home/HomepageProjectCard.tsx

@@ -3,13 +3,17 @@ import { Skeleton } from 'antd'
 import { HomepageCard } from 'components/Home/HomepageCard'
 import ProjectLogo from 'components/ProjectLogo'
 import ETHAmount from 'components/currency/ETHAmount'
-import { PV_V2, PV_V4, PV_V5 } from 'constants/pv'
+import { PV_V2, PV_V4, PV_V5, PV_V6 } from 'constants/pv'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
-import { JBChainId } from 'juice-sdk-react'
+import { JBChainId } from '@bananapus/nana-sdk-react'
 import { SubgraphQueryProject } from 'models/subgraphProjects'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
 import { ChainLogo } from 'packages/v4v5/components/ChainLogo'
-import { v4ProjectRoute, v5ProjectRoute } from 'packages/v4v5/utils/routes'
+import {
+  v4ProjectRoute,
+  v5ProjectRoute,
+  v6ProjectRoute,
+} from 'packages/v4v5/utils/routes'
 
 function Statistic({
   name,
@@ -55,7 +59,12 @@ export function HomepageProjectCard({
   return (
     <HomepageCard
       href={
-        project.pv === PV_V5 && project.chainId
+        project.pv === PV_V6 && project.chainId
+          ? v6ProjectRoute({
+              projectId: project.projectId,
+              chainId: project.chainId,
+            })
+          : project.pv === PV_V5 && project.chainId
           ? v5ProjectRoute({
               projectId: project.projectId,
               chainId: project.chainId,

src/components/Navbar/SiteNavigation.tsx

@@ -37,8 +37,8 @@ const DesktopSiteNavigation = () => {
   const router = useRouter()
 
   // Hide protocol activity toggle on project pages
-  const isProjectPage = router.pathname.startsWith('/v5/') || router.pathname.startsWith('/v4/')
-  const isProjectRoute = /^\/(v4|v5)\/[^\/]+/.test(router.asPath)
+  const isProjectPage = router.pathname.startsWith('/v6/') || router.pathname.startsWith('/v5/') || router.pathname.startsWith('/v4/')
+  const isProjectRoute = /^\/(v4|v5|v6)\/[^\/]+/.test(router.asPath)
   const showProtocolActivityToggle = !(isProjectPage && isProjectRoute)
 
   return (
@@ -103,8 +103,8 @@ const MobileSiteNavigation = () => {
   const router = useRouter()
 
   // Hide protocol activity toggle on project pages
-  const isProjectPage = router.pathname.startsWith('/v5/') || router.pathname.startsWith('/v4/')
-  const isProjectRoute = /^\/(v4|v5)\/[^\/]+/.test(router.asPath)
+  const isProjectPage = router.pathname.startsWith('/v6/') || router.pathname.startsWith('/v5/') || router.pathname.startsWith('/v4/')
+  const isProjectRoute = /^\/(v4|v5|v6)\/[^\/]+/.test(router.asPath)
   const showProtocolActivityToggle = !(isProjectPage && isProjectRoute)
 
   return (

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

@@ -1,6 +1,6 @@
 import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline'
 import { ReactNode, useMemo } from 'react'
-import { useJBProjectId, useJBRuleset } from 'juice-sdk-react'
+import { useJBProjectId, useJBRuleset } from '@bananapus/nana-sdk-react'
 
 import { ConfigurationPanelTableData } from './ConfigurationPanel'
 import CopyTextButton from 'components/buttons/CopyTextButton'

src/components/ProjectCard.tsx

@@ -1,15 +1,19 @@
 import * as constants from '@ethersproject/constants'
 import { BookmarkIcon as BookmarkIconSolid } from '@heroicons/react/24/solid'
 import { Skeleton } from 'antd'
-import { PV_V2, PV_V4, PV_V5 } from 'constants/pv'
+import { PV_V2, PV_V4, PV_V5, PV_V6 } from 'constants/pv'
 import { useProjectHandleText } from 'hooks/useProjectHandleText'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useSubtitle } from 'hooks/useSubtitle'
 import { DBProjectsAggregate } from 'models/dbProject'
 import Link from 'next/link'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
 import { ChainLogo } from 'packages/v4v5/components/ChainLogo'
-import { v4ProjectRoute, v5ProjectRoute } from 'packages/v4v5/utils/routes'
+import {
+  v4ProjectRoute,
+  v5ProjectRoute,
+  v6ProjectRoute,
+} from 'packages/v4v5/utils/routes'
 import { isHardArchived } from 'utils/archived'
 import { formatDate } from 'utils/format/formatDate'
 import { ArchivedBadge } from './ArchivedBadge'
@@ -69,6 +73,11 @@ export default function ProjectCard({
           projectId,
           chainId,
         })
+      : pv === PV_V6
+      ? v6ProjectRoute({
+          projectId,
+          chainId,
+        })
       : pv === PV_V2
       ? v2v3ProjectRoute({
           projectId,

src/components/ProjectPageSEO.tsx

@@ -1,5 +1,5 @@
 import { SiteBaseUrl } from 'constants/url'
-import { JBChainId, toJbUrn } from 'juice-sdk-core'
+import { JBChainId, toJbUrn } from '@bananapus/nana-sdk-core'
 import { ProjectMetadata } from 'models/projectMetadata'
 import { cidFromUrl, ipfsPublicGatewayUrl } from 'utils/ipfs'
 import { stripHtmlTags } from 'utils/string'

src/components/Projects/ProjectsFilterAndSort.tsx

@@ -31,6 +31,9 @@ export default function ProjectsFilterAndSort({
   includeV5,
   setIncludeV5,
 
+  includeV6,
+  setIncludeV6,
+
   showArchived,
   setShowArchived,
   searchTags,
@@ -52,6 +55,9 @@ export default function ProjectsFilterAndSort({
   includeV5: boolean
   setIncludeV5: CheckboxOnChange
 
+  includeV6: boolean
+  setIncludeV6: CheckboxOnChange
+
   showArchived: boolean
   setShowArchived: CheckboxOnChange
   searchTags: ProjectTagName[]
@@ -184,6 +190,11 @@ export default function ProjectsFilterAndSort({
               checked={includeV5}
               onChange={setIncludeV5}
             />
+            <FilterCheckboxItem
+              label={t`V6`}
+              checked={includeV6}
+              onChange={setIncludeV6}
+            />
             <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, PV_V4, PV_V5 } from 'constants/pv'
+import { PV_V1, PV_V2, PV_V4, PV_V5, PV_V6 } from 'constants/pv'
 import { useWallet } from 'hooks/Wallet'
 import { trackFathomGoal } from 'lib/fathom'
 import { DBProjectQueryOpts } from 'models/dbProject'
@@ -67,6 +67,7 @@ export function ProjectsView() {
   const [includeV2, setIncludeV2] = useState<boolean>(true)
   const [includeV4, setIncludeV4] = useState<boolean>(true)
   const [includeV5, setIncludeV5] = useState<boolean>(true)
+  const [includeV6, setIncludeV6] = useState<boolean>(true)
   const [showArchived, setShowArchived] = useState<boolean>(false)
   const [reversed, setReversed] = useState<boolean>(false)
 
@@ -76,9 +77,10 @@ export function ProjectsView() {
     if (includeV2) _pv.push(PV_V2)
     if (includeV4) _pv.push(PV_V4)
     if (includeV5) _pv.push(PV_V5)
+    if (includeV6) _pv.push(PV_V6)
 
-    return _pv.length ? _pv : [PV_V1, PV_V2, PV_V4, PV_V5]
-  }, [includeV1, includeV2, includeV4, includeV5])
+    return _pv.length ? _pv : [PV_V1, PV_V2, PV_V4, PV_V5, PV_V6]
+  }, [includeV1, includeV2, includeV4, includeV5, includeV6])
 
   function updateRoute(
     _searchTags: ProjectTagName[],
@@ -144,10 +146,12 @@ export function ProjectsView() {
                   includeV2={includeV2}
                   includeV4={includeV4}
                   includeV5={includeV5}
+                  includeV6={includeV6}
                   setIncludeV1={setIncludeV1}
                   setIncludeV2={setIncludeV2}
                   setIncludeV4={setIncludeV4}
                   setIncludeV5={setIncludeV5}
+                  setIncludeV6={setIncludeV6}
                   showArchived={showArchived}
                   setShowArchived={setShowArchived}
                   reversed={reversed}

src/components/Projects/TrendingProjectCard.tsx

@@ -4,15 +4,19 @@ import { Skeleton } from 'antd'
 import ETHAmount from 'components/currency/ETHAmount'
 import Loading from 'components/Loading'
 import ProjectLogo from 'components/ProjectLogo'
-import { PV_V2, PV_V4, PV_V5 } from 'constants/pv'
+import { PV_V2, PV_V4, PV_V5, PV_V6 } from 'constants/pv'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { useProjectTrendingPercentageIncrease } from 'hooks/useProjectTrendingPercentageIncrease'
-import { JBChainId } from 'juice-sdk-core'
+import { JBChainId } from '@bananapus/nana-sdk-core'
 import { DBProject } from 'models/dbProject'
 import Link from 'next/link'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
 import { ChainLogo } from 'packages/v4v5/components/ChainLogo'
-import { v4ProjectRoute, v5ProjectRoute } from 'packages/v4v5/utils/routes'
+import {
+  v4ProjectRoute,
+  v5ProjectRoute,
+  v6ProjectRoute,
+} from 'packages/v4v5/utils/routes'
 import { TRENDING_WINDOW_DAYS } from './RankingExplanation'
 
 export default function TrendingProjectCard({
@@ -65,7 +69,12 @@ export default function TrendingProjectCard({
       prefetch={false}
       key={project.handle}
       href={
-        project.pv === PV_V5 && project.chainIds?.length
+        project.pv === PV_V6 && project.chainIds?.length
+          ? v6ProjectRoute({
+              projectId: project.projectId,
+              chainId: project.chainIds[0],
+            })
+          : project.pv === PV_V5 && project.chainIds?.length
           ? v5ProjectRoute({
               projectId: project.projectId,
               chainId: project.chainIds[0],

src/components/ProtocolActivity/ChainFilterButtons.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon } from '@heroicons/react/24/outline'
 import { NETWORKS } from 'constants/networks'
-import { JBChainId } from 'juice-sdk-core'
+import { JBChainId } from '@bananapus/nana-sdk-core'
 import { ChainLogo } from 'packages/v4v5/components/ChainLogo'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'

src/components/ProtocolActivity/ProtocolActivityElement.tsx

@@ -1,7 +1,7 @@
 import EthereumAddress from 'components/EthereumAddress'
 import EtherscanLink from 'components/EtherscanLink'
 import ProjectLogo from 'components/ProjectLogo'
-import { JBChainId } from 'juice-sdk-react'
+import { JBChainId } from '@bananapus/nana-sdk-react'
 import { ChainLogo } from 'packages/v4v5/components/ChainLogo'
 import { formatHistoricalDate } from 'utils/format/formatDate'
 

src/components/ProtocolActivity/ProtocolActivityList.tsx

@@ -76,7 +76,7 @@ export function ProtocolActivityList() {
                   ? v4v5ProjectRoute({
                       projectId: event.event.projectId,
                       chainId: event.event.chainId,
-                      version: 5, // Default to v5 for all bendystraw projects
+                      version: event.event.projectVersion ?? 5, // Link by the project's own version, defaulting to v5
                     })
                   : null
 

src/components/ProtocolActivity/utils/translateEventDataToProtocolPresenter.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { AmountInCurrency } from 'components/currency/AmountInCurrency'
-import { USDC_ADDRESSES } from 'juice-sdk-core'
+import { USDC_ADDRESSES } from '@bananapus/nana-sdk-core'
 import { ETH_TOKEN_ADDRESS } from 'constants/juiceboxTokens'
 import { AnyEvent } from 'packages/v4v5/views/V4V5ProjectDashboard/V4V5ProjectTabs/V4V5ActivityPanel/utils/transformEventsData'
 import { formatActivityAmount } from 'utils/format/formatActivityAmount'

src/components/QuickProjectSearch/QuickProjectSearchModal.tsx

@@ -13,14 +13,18 @@ import Modal from 'antd/lib/modal/Modal'
 import ETHAmount from 'components/currency/ETHAmount'
 import Loading from 'components/Loading'
 import { ProjectVersionBadge } from 'components/ProjectVersionBadge'
-import { PV_V2, PV_V4, PV_V5 } from 'constants/pv'
+import { PV_V2, PV_V4, PV_V5, PV_V6 } from 'constants/pv'
 import { useDBProjectsAggregateQuery } from 'hooks/useDBProjects'
 import { useRouter } from 'next/router'
 import V1ProjectHandle from 'packages/v1/components/shared/V1ProjectHandle'
 import V2V3ProjectHandleLink from 'packages/v2v3/components/shared/V2V3ProjectHandleLink'
 import { v2v3ProjectRoute } from 'packages/v2v3/utils/routes'
 import { ChainLogo } from 'packages/v4v5/components/ChainLogo'
-import { v4ProjectRoute, v5ProjectRoute } from 'packages/v4v5/utils/routes'
+import {
+  v4ProjectRoute,
+  v5ProjectRoute,
+  v6ProjectRoute,
+} from 'packages/v4v5/utils/routes'
 import { twMerge } from 'tailwind-merge'
 import { QuickProjectSearchContext } from './QuickProjectSearchContext'
 
@@ -53,11 +57,13 @@ export const QuickProjectSearchModal = () => {
     const project = searchResults[highlightIndex]
     const { projectId, handle, pv, chainId, chainIds } = project
 
-    // For V4/V5 projects from aggregate view, use first chainId from chainIds array
+    // For V4/V5/V6 projects from aggregate view, use first chainId from chainIds array
     const effectiveChainId = chainId ?? chainIds?.[0]
 
     router.push(
-      pv === PV_V5
+      pv === PV_V6
+        ? v6ProjectRoute({ chainId: effectiveChainId, projectId })
+        : pv === PV_V5
         ? v5ProjectRoute({ chainId: effectiveChainId, projectId })
         : pv === PV_V4
         ? v4ProjectRoute({ chainId: effectiveChainId, projectId })
@@ -192,7 +198,9 @@ export const QuickProjectSearchModal = () => {
                   onClick={goToProject}
                   onMouseEnter={() => setHighlightIndex(i)}
                 >
-                  {p.pv === PV_V5 ? (
+                  {p.pv === PV_V6 ? (
+                    p.name || `Project #${p.projectId}`
+                  ) : p.pv === PV_V5 ? (
                     p.name || `Project #${p.projectId}`
                   ) : p.pv === PV_V4 ? (
                     p.name || `Project #${p.projectId}`

src/components/VolumeChart/components/TimelineChart.tsx

@@ -2,7 +2,7 @@ import { t } from '@lingui/macro'
 import CurrencySymbol from 'components/currency/CurrencySymbol'
 import { ThemeContext } from 'contexts/Theme/ThemeContext'
 import { useTrendingProjects } from 'hooks/useTrendingProjects'
-import { USDC_ADDRESSES } from 'juice-sdk-core'
+import { USDC_ADDRESSES } from '@bananapus/nana-sdk-core'
 import tailwind from 'lib/tailwind'
 import moment from 'moment'
 import { CSSProperties, useContext, useMemo } from 'react'

src/components/VolumeChart/hooks/useProjectTimeline.ts

@@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query'
 import { readProvider } from 'constants/readProvider'
 import { RomanStormVariables } from 'constants/romanStorm'
 import EthDater from 'ethereum-block-by-date'
-import { useJBChainId } from 'juice-sdk-react'
+import { useJBChainId } from '@bananapus/nana-sdk-react'
 import { client } from 'lib/apollo/client'
 import { PV } from 'models/pv'
 import { useMemo } from 'react'

src/components/common/CoreAppWrapper/CoreAppWrapper.tsx

@@ -87,8 +87,8 @@ const _Wrapper: React.FC<React.PropsWithChildren<{ hideNav?: boolean }>> = ({
   }, [])
 
   // Check if we're on a project page (v4/v5 projects render their own activity panel)
-  const isProjectPage = router.pathname.startsWith('/v5/') || router.pathname.startsWith('/v4/')
-  const isProjectRoute = /^\/(v4|v5)\/[^\/]+/.test(router.asPath)
+  const isProjectPage = router.pathname.startsWith('/v6/') || router.pathname.startsWith('/v5/') || router.pathname.startsWith('/v4/')
+  const isProjectRoute = /^\/(v4|v5|v6)\/[^\/]+/.test(router.asPath)
   const showProtocolActivity = !isMobile && !(isProjectPage && isProjectRoute)
 
   return (

src/components/modals/IssueErc20TokenModal.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { emitErrorNotification } from 'utils/notifications'
 
-import { useJBChainId } from 'juice-sdk-react'
+import { useJBChainId } from '@bananapus/nana-sdk-react'
 import { useIssueErc20TokenTx } from 'hooks/useIssueErc20TokenTx'
 import { IssueErc20TokenTxArgs } from '../buttons/IssueErc20TokenButton'
 import { useV4V5Version } from 'packages/v4v5/contexts/V4V5VersionProvider'

src/components/modals/TransactionModal.tsx

@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { Modal, ModalProps } from 'antd'
-import { JBChainId, RelayrGetBundleResponse } from 'juice-sdk-react'
+import { JBChainId, RelayrGetBundleResponse } from '@bananapus/nana-sdk-react'
 import { PropsWithChildren, useContext, useMemo } from 'react'
 
 import { readNetwork } from 'constants/networks'

src/constants/featureFlags.ts

@@ -1,8 +1,9 @@
-export type FeatureFlag = 'SIMULATE_TXS' | 'V4' | 'V5' | 'OFAC'
+export type FeatureFlag = 'SIMULATE_TXS' | 'V4' | 'V5' | 'V6' | 'OFAC'
 
 export const FEATURE_FLAGS: { [k in FeatureFlag]: string } = {
   SIMULATE_TXS: 'simulateTxs',
   V4: 'v4',
   V5: 'v5',
+  V6: 'v6',
   OFAC: 'ofac',
 }

src/constants/networks.ts

@@ -1,4 +1,4 @@
-import { JBChainId } from 'juice-sdk-core'
+import { JBChainId } from '@bananapus/nana-sdk-core'
 import { NetworkName } from 'models/networkName'
 import { isBrowser } from 'utils/isBrowser'