From f8b085fd82b218aa438996135b44fe732a41dbed Mon Sep 17 00:00:00 2001
From: Johnny D <johnnyD.eth@protonmail.com>
Date: Thu, 2 Jan 2025 10:18:11 +1100
Subject: [PATCH 01/21] feat: chain selector in v4 create flow (#4567)

---
 .../Wallet/ChangeNetworksButton.tsx           |  5 +-
 src/components/inputs/JuiceListbox.tsx        |  3 +-
 src/constants/networks.ts                     |  4 +
 src/hooks/Wallet/hooks/useChangeNetworks.ts   | 10 +--
 src/locales/messages.pot                      |  3 +
 .../v2v3/components/Create/Create.tsx         | 15 ++--
 .../components}/DeployProjectButtonText.tsx   |  0
 .../hooks/useLoadInitialStateFromQuery.ts     | 28 +++----
 src/packages/v4/components/Create/Create.tsx  | 16 ++--
 .../Create/DeployProjectButtonText.tsx        | 38 ++++++++++
 .../ProjectDetails/ProjectChainSelect.tsx     | 29 +++++++
 .../ProjectDetails/ProjectDetailsPage.tsx     | 76 ++++++++-----------
 .../hooks/useProjectDetailsForm.ts            | 33 ++++++--
 .../pages/ReviewDeploy/ReviewDeployPage.tsx   | 51 +++++++------
 .../ProjectDetailsReview.tsx                  | 23 ++++--
 .../hooks/useLoadInitialStateFromQuery.ts     | 29 +++----
 .../creatingV2Project/creatingV2Project.ts    | 38 +++++-----
 .../v2v3/shared/v2ProjectDefaultState.ts      | 20 ++---
 .../slices/v2v3/shared/v2ProjectTypes.ts      | 29 +++----
 19 files changed, 278 insertions(+), 172 deletions(-)
 rename src/{components/buttons => packages/v2v3/components/Create/components}/DeployProjectButtonText.tsx (100%)
 create mode 100644 src/packages/v4/components/Create/DeployProjectButtonText.tsx
 create mode 100644 src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx

diff --git a/src/components/Navbar/components/Wallet/ChangeNetworksButton.tsx b/src/components/Navbar/components/Wallet/ChangeNetworksButton.tsx
index aa5e941a7f..b4926da6f8 100644
--- a/src/components/Navbar/components/Wallet/ChangeNetworksButton.tsx
+++ b/src/components/Navbar/components/Wallet/ChangeNetworksButton.tsx
@@ -1,6 +1,7 @@
+import { Button, ButtonProps } from 'antd'
+
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
-import { Button, ButtonProps } from 'antd'
 import { useWallet } from 'hooks/Wallet'
 
 export function ChangeNetworksButton(props: ButtonProps) {
@@ -9,7 +10,7 @@ export function ChangeNetworksButton(props: ButtonProps) {
   return (
     <Button
       className="border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-500 dark:bg-warning-900 dark:text-warning-100"
-      onClick={changeNetworks}
+      onClick={() => changeNetworks()}
       {...props}
     >
       <span>
diff --git a/src/components/inputs/JuiceListbox.tsx b/src/components/inputs/JuiceListbox.tsx
index ced1fc2aba..305bccb3e2 100644
--- a/src/components/inputs/JuiceListbox.tsx
+++ b/src/components/inputs/JuiceListbox.tsx
@@ -1,9 +1,10 @@
 import { Listbox, Transition } from '@headlessui/react'
+
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { Fragment } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-interface JuiceListboxOption<T> {
+export interface JuiceListboxOption<T> {
   label: string
   value: T
 }
diff --git a/src/constants/networks.ts b/src/constants/networks.ts
index 1fdb6da8b3..dbedddf472 100644
--- a/src/constants/networks.ts
+++ b/src/constants/networks.ts
@@ -59,6 +59,8 @@ export const NETWORKS: Record<number, NetworkInfo> = {
   },
 }
 
+export type SupportedChainId = keyof typeof NETWORKS;
+
 export const NETWORKS_BY_NAME = Object.values(NETWORKS).reduce(
   (acc, curr) => ({
     ...acc,
@@ -67,5 +69,7 @@ export const NETWORKS_BY_NAME = Object.values(NETWORKS).reduce(
   {} as Record<NetworkName, NetworkInfo>,
 )
 
+export const DEFAULT_PROJECT_CHAIN_ID = NETWORKS_BY_NAME.mainnet.chainId
+
 export const readNetwork =
   NETWORKS_BY_NAME[process.env.NEXT_PUBLIC_INFURA_NETWORK]
diff --git a/src/hooks/Wallet/hooks/useChangeNetworks.ts b/src/hooks/Wallet/hooks/useChangeNetworks.ts
index 7645f1b63e..8f935fc43a 100644
--- a/src/hooks/Wallet/hooks/useChangeNetworks.ts
+++ b/src/hooks/Wallet/hooks/useChangeNetworks.ts
@@ -1,13 +1,13 @@
-import { useSetChain } from '@web3-onboard/react'
-import { useCallback } from 'react'
+import { SupportedChainId, readNetwork } from 'constants/networks'
 
-import { readNetwork } from 'constants/networks'
+import { useCallback } from 'react'
+import { useSetChain } from '@web3-onboard/react'
 
 export function useChangeNetworks() {
   const [{ chains }, setChain] = useSetChain()
 
-  const changeNetworks = useCallback(async () => {
-    const chain = chains.find(c => Number(c.id) === readNetwork.chainId)
+  const changeNetworks = useCallback(async (chainId?: SupportedChainId) => {
+    const chain = chains.find(c => Number(c.id) === (chainId ?? readNetwork.chainId))
     if (!chain) {
       console.error('FATAL: Chain not found')
       throw new Error('FATAL: Chain not found')
diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index 05f37ffa68..4ce986a407 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -1196,6 +1196,9 @@ msgstr ""
 msgid "Check your email for a confirmation link and retry subscribing."
 msgstr ""
 
+msgid "Project chain"
+msgstr ""
+
 msgid "Claim ERC-20 token"
 msgstr ""
 
diff --git a/src/packages/v2v3/components/Create/Create.tsx b/src/packages/v2v3/components/Create/Create.tsx
index 0078ff9fd5..49ac51546f 100644
--- a/src/packages/v2v3/components/Create/Create.tsx
+++ b/src/packages/v2v3/components/Create/Create.tsx
@@ -1,24 +1,25 @@
-import { t, Trans } from '@lingui/macro'
-import { DeployButtonText } from 'components/buttons/DeployProjectButtonText'
-import Loading from 'components/Loading'
 import {
   CYCLE_EXPLANATION,
   RECONFIG_RULES_EXPLANATION,
 } from 'components/strings'
-import { readNetwork } from 'constants/networks'
-import { NetworkName } from 'models/networkName'
-import { useRouter } from 'next/router'
+import { Trans, t } from '@lingui/macro'
+
 import { CreateBadge } from './components/CreateBadge'
+import { DeployButtonText } from 'packages/v2v3/components/Create/components/DeployProjectButtonText'
+import { DeploySuccess } from './components/pages/ReviewDeploy/components/DeploySuccess'
 import { FundingCyclesPage } from './components/pages/FundingCycles/FundingCyclesPage'
+import Loading from 'components/Loading'
+import { NetworkName } from 'models/networkName'
 import { NftRewardsPage } from './components/pages/NftRewards/NftRewardsPage'
 import { PayoutsPage } from './components/pages/PayoutsPage/PayoutsPage'
 import { ProjectDetailsPage } from './components/pages/ProjectDetails/ProjectDetailsPage'
 import { ProjectTokenPage } from './components/pages/ProjectToken/ProjectTokenPage'
 import { ReconfigurationRulesPage } from './components/pages/ReconfigurationRules/ReconfigurationRulesPage'
-import { DeploySuccess } from './components/pages/ReviewDeploy/components/DeploySuccess'
 import { ReviewDeployPage } from './components/pages/ReviewDeploy/ReviewDeployPage'
 import { Wizard } from './components/Wizard/Wizard'
+import { readNetwork } from 'constants/networks'
 import { useLoadingInitialStateFromQuery } from './hooks/useLoadInitialStateFromQuery'
+import { useRouter } from 'next/router'
 
 export function Create() {
   const router = useRouter()
diff --git a/src/components/buttons/DeployProjectButtonText.tsx b/src/packages/v2v3/components/Create/components/DeployProjectButtonText.tsx
similarity index 100%
rename from src/components/buttons/DeployProjectButtonText.tsx
rename to src/packages/v2v3/components/Create/components/DeployProjectButtonText.tsx
diff --git a/src/packages/v2v3/components/Create/hooks/useLoadInitialStateFromQuery.ts b/src/packages/v2v3/components/Create/hooks/useLoadInitialStateFromQuery.ts
index 4809f6edb4..a3a37ad0f7 100644
--- a/src/packages/v2v3/components/Create/hooks/useLoadInitialStateFromQuery.ts
+++ b/src/packages/v2v3/components/Create/hooks/useLoadInitialStateFromQuery.ts
@@ -1,24 +1,25 @@
-import { ETH_TOKEN_ADDRESS } from 'constants/juiceboxTokens'
-import isEqual from 'lodash/isEqual'
-import { CreatePage } from 'models/createPage'
-import { ProjectTokensSelection } from 'models/projectTokenSelection'
-import { TreasurySelection } from 'models/treasurySelection'
-import { useRouter } from 'next/router'
-import { ballotStrategiesFn } from 'packages/v2v3/constants/ballotStrategies'
-import { useDefaultJBETHPaymentTerminal } from 'packages/v2v3/hooks/defaultContracts/useDefaultJBETHPaymentTerminal'
-import { MAX_DISTRIBUTION_LIMIT } from 'packages/v2v3/utils/math'
-import { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { CreateState, ProjectState } from 'redux/slices/v2v3/shared/v2ProjectTypes'
 import {
   DEFAULT_REDUX_STATE,
   creatingV2ProjectActions,
 } from 'redux/slices/v2v3/creatingV2Project'
+import { useEffect, useState } from 'react'
+
+import { CreatePage } from 'models/createPage'
+import { DefaultSettings as DefaultTokenSettings } from '../components/pages/ProjectToken/hooks/useProjectTokenForm'
+import { ETH_TOKEN_ADDRESS } from 'constants/juiceboxTokens'
 import { INITIAL_REDUX_STATE } from 'redux/slices/v2v3/shared/v2ProjectInitialReduxState'
-import { CreateState, ProjectState } from 'redux/slices/v2v3/shared/v2ProjectTypes'
+import { MAX_DISTRIBUTION_LIMIT } from 'packages/v2v3/utils/math'
+import { ProjectTokensSelection } from 'models/projectTokenSelection'
+import { TreasurySelection } from 'models/treasurySelection'
+import { ballotStrategiesFn } from 'packages/v2v3/constants/ballotStrategies'
+import isEqual from 'lodash/isEqual'
 import { isEqualAddress } from 'utils/address'
 import { parseWad } from 'utils/format/formatNumber'
-import { DefaultSettings as DefaultTokenSettings } from '../components/pages/ProjectToken/hooks/useProjectTokenForm'
 import { projectTokenSettingsToReduxFormat } from '../utils/projectTokenSettingsToReduxFormat'
+import { useDefaultJBETHPaymentTerminal } from 'packages/v2v3/hooks/defaultContracts/useDefaultJBETHPaymentTerminal'
+import { useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
 
 const ReduxDefaultTokenSettings =
   projectTokenSettingsToReduxFormat(DefaultTokenSettings)
@@ -100,6 +101,7 @@ const parseCreateFlowStateFromInitialState = (
   }
 
   return {
+    projectChainId: 0, // not necessary for v2v3
     fundingCyclesPageSelection,
     treasurySelection,
     fundingTargetSelection: undefined, // TODO: Remove
diff --git a/src/packages/v4/components/Create/Create.tsx b/src/packages/v4/components/Create/Create.tsx
index 12d0fe009e..5ee0878445 100644
--- a/src/packages/v4/components/Create/Create.tsx
+++ b/src/packages/v4/components/Create/Create.tsx
@@ -1,26 +1,26 @@
-import { Trans, t } from '@lingui/macro'
 import {
   DEADLINE_EXPLANATION,
   RULESET_EXPLANATION
 } from 'components/strings'
+import { Trans, t } from '@lingui/macro'
 
 import { Badge } from 'components/Badge'
-import { DeployButtonText } from 'components/buttons/DeployProjectButtonText'
-import Loading from 'components/Loading'
-import { readNetwork } from 'constants/networks'
-import { NetworkName } from 'models/networkName'
-import { useRouter } from 'next/router'
 import { CreateBadge } from './components/CreateBadge'
+import { DeployProjectButtonText } from './DeployProjectButtonText'
+import { DeploySuccess } from './components/pages/ReviewDeploy/components/DeploySuccess'
 import { FundingCyclesPage } from './components/pages/FundingCycles/FundingCyclesPage'
+import Loading from 'components/Loading'
+import { NetworkName } from 'models/networkName'
 import { NftRewardsPage } from './components/pages/NftRewards/NftRewardsPage'
 import { PayoutsPage } from './components/pages/PayoutsPage/PayoutsPage'
 import { ProjectDetailsPage } from './components/pages/ProjectDetails/ProjectDetailsPage'
 import { ProjectTokenPage } from './components/pages/ProjectToken/ProjectTokenPage'
 import { ReconfigurationRulesPage } from './components/pages/ReconfigurationRules/ReconfigurationRulesPage'
-import { DeploySuccess } from './components/pages/ReviewDeploy/components/DeploySuccess'
 import { ReviewDeployPage } from './components/pages/ReviewDeploy/ReviewDeployPage'
 import { Wizard } from './components/Wizard/Wizard'
+import { readNetwork } from 'constants/networks'
 import { useLoadingInitialStateFromQuery } from './hooks/useLoadInitialStateFromQuery'
+import { useRouter } from 'next/router'
 
 export function Create() {
   const router = useRouter()
@@ -44,7 +44,7 @@ export function Create() {
       </h1>
       {/* TODO: Remove wizard-create once form item css override is replaced */}
       <div className="wizard-create">
-        <Wizard className="pb-28" doneText={<DeployButtonText />}>
+        <Wizard className="pb-28" doneText={<DeployProjectButtonText />}>
           <Wizard.Page
             name="projectDetails"
             title={t`Project Details`}
diff --git a/src/packages/v4/components/Create/DeployProjectButtonText.tsx b/src/packages/v4/components/Create/DeployProjectButtonText.tsx
new file mode 100644
index 0000000000..1cb5ea2186
--- /dev/null
+++ b/src/packages/v4/components/Create/DeployProjectButtonText.tsx
@@ -0,0 +1,38 @@
+import { NETWORKS } from 'constants/networks'
+import { Trans } from '@lingui/macro'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
+import useMobile from 'hooks/useMobile'
+import { useWallet } from 'hooks/Wallet'
+
+export function DeployProjectButtonText() {
+  const isMobile = useMobile()
+  const { isConnected, chain } = useWallet()
+
+  const {
+    projectChainId,
+  } = useAppSelector(state => state.creatingV2Project)
+
+  const walletConnectedToWrongChain = chain?.id && projectChainId !== parseInt(chain.id)
+
+  if (!isConnected) {
+    return isMobile ? (
+      <Trans>Connect wallet</Trans>
+    ) : (
+      <Trans>Connect wallet to deploy</Trans>
+    )
+  }
+
+  if (walletConnectedToWrongChain) {
+    return isMobile ? (
+      <Trans>Change network</Trans>
+    ) : (
+      <Trans>Change networks to deploy</Trans>
+    )
+  }
+
+  if (chain?.name && !isMobile) {
+    return <Trans>Deploy project to {NETWORKS[projectChainId]?.label}</Trans>
+  }
+
+  return <Trans>Deploy project</Trans>
+}
diff --git a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx
new file mode 100644
index 0000000000..7e60ef0b0f
--- /dev/null
+++ b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx
@@ -0,0 +1,29 @@
+import { DEFAULT_PROJECT_CHAIN_ID, NETWORKS, SupportedChainId } from "constants/networks"
+
+import { JuiceListbox } from "components/inputs/JuiceListbox"
+
+export const ProjectChainSelect: React.FC<
+  React.PropsWithChildren<{
+    value?: SupportedChainId
+    onChange?: (value: SupportedChainId) => void
+  }>
+> = ({ value, onChange }) => {
+  
+  const networkOptions = () => Object.entries(NETWORKS).map(
+    ([chainId, networkInfo]) => ({
+      label: networkInfo.label, 
+      value: parseInt(chainId),
+    })
+  )
+
+  return (
+    <JuiceListbox
+      value={{label: NETWORKS[value ?? DEFAULT_PROJECT_CHAIN_ID]?.label, value }}
+      onChange={({ value }) => {
+        if (!value) return
+        onChange?.(value)
+      }}
+      options={networkOptions()}
+    />
+  )
+}
\ No newline at end of file
diff --git a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx
index dfb17e8914..58daa993a2 100644
--- a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx
+++ b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx
@@ -1,34 +1,36 @@
-import { RightOutlined } from '@ant-design/icons'
-import { t, Trans } from '@lingui/macro'
 import { Col, Form, Row } from 'antd'
-import { Callout } from 'components/Callout/Callout'
-import { FormItems } from 'components/formItems'
-import { EthAddressInput } from 'components/inputs/EthAddressInput'
-import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
-import { FormImageUploader } from 'components/inputs/FormImageUploader'
-import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
-import { JuiceInput } from 'components/inputs/JuiceTextInput'
-import { RichEditor } from 'components/RichEditor'
-import { CREATE_FLOW } from 'constants/fathomEvents'
-import { constants } from 'ethers'
-import { useWallet } from 'hooks/Wallet'
-import { trackFathomGoal } from 'lib/fathom'
-import Link from 'next/link'
-import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
-import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
+import { Trans, t } from '@lingui/macro'
 import {
   V2V3_CURRENCY_ETH,
   V2V3_CURRENCY_USD,
 } from 'packages/v2v3/utils/currency'
-import { useCallback, useContext, useMemo, useState } from 'react'
-import { useSetCreateFurthestPageReached } from 'redux/hooks/v2v3/useEditingCreateFurthestPageReached'
 import { inputMustBeEthAddressRule, inputMustExistRule } from 'utils/antdRules'
-import { inputIsLengthRule } from 'utils/antdRules/inputIsLengthRule'
+import { useCallback, useContext, useState } from 'react'
+
+import { CREATE_FLOW } from 'constants/fathomEvents'
+import { Callout } from 'components/Callout/Callout'
 import { CreateCollapse } from '../../CreateCollapse/CreateCollapse'
+import { EthAddressInput } from 'components/inputs/EthAddressInput'
+import { FormImageUploader } from 'components/inputs/FormImageUploader'
+import { FormItems } from 'components/formItems'
+import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
+import { JuiceInput } from 'components/inputs/JuiceTextInput'
+import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
+import Link from 'next/link'
 import { OptionalHeader } from '../../OptionalHeader'
 import { PageContext } from '../../Wizard/contexts/PageContext'
+import { ProjectChainSelect } from './ProjectChainSelect'
+import { RichEditor } from 'components/RichEditor'
+import { RightOutlined } from '@ant-design/icons'
+import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
 import { Wizard } from '../../Wizard/Wizard'
+import { constants } from 'ethers'
+import { inputIsLengthRule } from 'utils/antdRules/inputIsLengthRule'
+import { trackFathomGoal } from 'lib/fathom'
+import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
 import { useProjectDetailsForm } from './hooks/useProjectDetailsForm'
+import { useSetCreateFurthestPageReached } from 'redux/hooks/v2v3/useEditingCreateFurthestPageReached'
+import { useWallet } from 'hooks/Wallet'
 
 export const ProjectDetailsPage: React.FC<
   React.PropsWithChildren<unknown>
@@ -45,32 +47,6 @@ export const ProjectDetailsPage: React.FC<
   const projectOwnerDifferentThanWalletAddress =
     inputWalletAddress && wallet.userAddress !== inputWalletAddress
 
-  const startTimestamp = Form.useWatch('startTimestamp', formProps.form)
-
-  // just for juicecrowd
-  const launchDate = useMemo(() => {
-    if (!startTimestamp) {
-      return null
-    }
-    const number = Number(startTimestamp)
-    if (isNaN(number)) {
-      return null
-    }
-
-    let date
-    if (number > 1000000000000) {
-      date = new Date(number)
-    } else {
-      date = new Date(number * 1000)
-    }
-
-    // format in local timezone
-    return {
-      local: date.toLocaleString(),
-      utc: date.toUTCString(),
-    }
-  }, [startTimestamp])
-
   return (
     <Form
       {...formProps}
@@ -95,6 +71,14 @@ export const ProjectDetailsPage: React.FC<
           <JuiceInput />
         </Form.Item>
 
+        <Form.Item
+          name="projectChainId"
+          label={t`Project chain`}
+          required
+        >
+          <ProjectChainSelect />
+        </Form.Item>
+
         <Form.Item
           name="projectTagline"
           label={t`Tagline`}
diff --git a/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts b/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts
index 641cfa1a21..9489804376 100644
--- a/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts
+++ b/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts
@@ -1,20 +1,24 @@
+import {
+  DEFAULT_MUST_START_AT_OR_AFTER,
+  creatingV2ProjectActions,
+} from 'redux/slices/v2v3/creatingV2Project'
+import { DEFAULT_PROJECT_CHAIN_ID, SupportedChainId } from 'constants/networks'
+import { useEffect, useMemo } from 'react'
+
+import { AmountInputValue } from '../ProjectDetailsPage'
 import { Form } from 'antd'
-import { useForm } from 'antd/lib/form/Form'
 import { ProjectTagName } from 'models/project-tags'
 import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
 import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
-import { useEffect, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
-import {
-  DEFAULT_MUST_START_AT_OR_AFTER,
-  creatingV2ProjectActions,
-} from 'redux/slices/v2v3/creatingV2Project'
+import { useForm } from 'antd/lib/form/Form'
 import { useFormDispatchWatch } from '../../hooks/useFormDispatchWatch'
-import { AmountInputValue } from '../ProjectDetailsPage'
+import { useWallet } from 'hooks/Wallet'
 
 type ProjectDetailsFormProps = Partial<{
   projectName: string
+  projectChainId: SupportedChainId
   projectTagline: string
   projectDescription: string
   logo: string
@@ -39,12 +43,16 @@ type ProjectDetailsFormProps = Partial<{
 
 export const useProjectDetailsForm = () => {
   const [form] = useForm<ProjectDetailsFormProps>()
-  const { projectMetadata, inputProjectOwner, mustStartAtOrAfter } =
+  const { projectChainId, projectMetadata, inputProjectOwner, mustStartAtOrAfter } =
     useAppSelector(state => state.creatingV2Project)
 
+  const { chain } = useWallet() 
+
+  const defaultChainId = chain?.id ? parseInt(chain.id) : DEFAULT_PROJECT_CHAIN_ID
   const initialValues: ProjectDetailsFormProps = useMemo(
     () => ({
       projectName: projectMetadata.name,
+      projectChainId: projectChainId ?? defaultChainId,
       projectTagline: projectMetadata.projectTagline,
       projectDescription: projectMetadata.description,
       logo: projectMetadata.logoUri,
@@ -78,6 +86,8 @@ export const useProjectDetailsForm = () => {
     }),
     [
       projectMetadata.name,
+      projectChainId,
+      defaultChainId,
       projectMetadata.projectTagline,
       projectMetadata.description,
       projectMetadata.logoUri,
@@ -106,6 +116,13 @@ export const useProjectDetailsForm = () => {
     dispatchFunction: creatingV2ProjectActions.setName,
     formatter: v => v ?? '',
   })
+  useFormDispatchWatch({
+    form,
+    fieldName: 'projectChainId',
+    ignoreUndefined: true,
+    dispatchFunction: creatingV2ProjectActions.setProjectChainId,
+    formatter: v => v ?? DEFAULT_PROJECT_CHAIN_ID,
+  })
   useFormDispatchWatch({
     form,
     fieldName: 'projectTagline',
diff --git a/src/packages/v4/components/Create/components/pages/ReviewDeploy/ReviewDeployPage.tsx b/src/packages/v4/components/Create/components/pages/ReviewDeploy/ReviewDeployPage.tsx
index 3a5fa0e842..29c1ef67e1 100644
--- a/src/packages/v4/components/Create/components/pages/ReviewDeploy/ReviewDeployPage.tsx
+++ b/src/packages/v4/components/Create/components/pages/ReviewDeploy/ReviewDeployPage.tsx
@@ -1,32 +1,32 @@
 import { Checkbox, Form } from 'antd'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
-import { CheckCircleFilled } from '@ant-design/icons'
-import { Trans } from '@lingui/macro'
 import { Callout } from 'components/Callout/Callout'
-import ExternalLink from 'components/ExternalLink'
-import TransactionModal from 'components/modals/TransactionModal'
-import { TERMS_OF_SERVICE_URL } from 'constants/links'
-import { useWallet } from 'hooks/Wallet'
-import { emitConfirmationDeletionModal } from 'hooks/emitConfirmationDeletionModal'
-import useMobile from 'hooks/useMobile'
-import { useModal } from 'hooks/useModal'
-import { useRouter } from 'next/router'
-import { useDispatch } from 'react-redux'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
-import { useSetCreateFurthestPageReached } from 'redux/hooks/v2v3/useEditingCreateFurthestPageReached'
-import { creatingV2ProjectActions } from 'redux/slices/v2v3/creatingV2Project'
-import { helpPagePath } from 'utils/helpPagePath'
-import { useDeployProject } from '../../../hooks/DeployProject/useDeployProject'
+import { CheckCircleFilled } from '@ant-design/icons'
 import { CreateBadge } from '../../CreateBadge'
 import { CreateCollapse } from '../../CreateCollapse/CreateCollapse'
-import { Wizard } from '../../Wizard/Wizard'
-import { WizardContext } from '../../Wizard/contexts/WizardContext'
+import ExternalLink from 'components/ExternalLink'
 import { FundingConfigurationReview } from './components/FundingConfigurationReview/FundingConfigurationReview'
 import { ProjectDetailsReview } from './components/ProjectDetailsReview/ProjectDetailsReview'
 import { ProjectTokenReview } from './components/ProjectTokenReview/ProjectTokenReview'
 import { RewardsReview } from './components/RewardsReview/RewardsReview'
 import { RulesReview } from './components/RulesReview/RulesReview'
+import { TERMS_OF_SERVICE_URL } from 'constants/links'
+import { Trans } from '@lingui/macro'
+import TransactionModal from 'components/modals/TransactionModal'
+import { Wizard } from '../../Wizard/Wizard'
+import { WizardContext } from '../../Wizard/contexts/WizardContext'
+import { creatingV2ProjectActions } from 'redux/slices/v2v3/creatingV2Project'
+import { emitConfirmationDeletionModal } from 'hooks/emitConfirmationDeletionModal'
+import { helpPagePath } from 'utils/helpPagePath'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { useDeployProject } from '../../../hooks/DeployProject/useDeployProject'
+import { useDispatch } from 'react-redux'
+import useMobile from 'hooks/useMobile'
+import { useModal } from 'hooks/useModal'
+import { useRouter } from 'next/router'
+import { useSetCreateFurthestPageReached } from 'redux/hooks/v2v3/useEditingCreateFurthestPageReached'
+import { useWallet } from 'hooks/Wallet'
 
 enum ReviewDeployKey {
   ProjectDetails = 0,
@@ -58,7 +58,7 @@ export const ReviewDeployPage = () => {
   useSetCreateFurthestPageReached('reviewDeploy')
   const { goToPage } = useContext(WizardContext)
   const isMobile = useMobile()
-  const { chainUnsupported, changeNetworks, isConnected, connect } = useWallet()
+  const { changeNetworks, isConnected, connect, chain } = useWallet()
   const router = useRouter()
   const [form] = Form.useForm<{ termsAccepted: boolean }>()
   const termsAccepted = Form.useWatch('termsAccepted', form)
@@ -68,6 +68,9 @@ export const ReviewDeployPage = () => {
   const nftRewards = useAppSelector(
     state => state.creatingV2Project.nftRewards.rewardTiers,
   )
+  const {
+    projectChainId,
+  } = useAppSelector(state => state.creatingV2Project) 
 
   const nftRewardsAreSet = useMemo(
     () => nftRewards && nftRewards?.length > 0,
@@ -81,10 +84,13 @@ export const ReviewDeployPage = () => {
     goToPage?.('projectDetails')
     dispatch(creatingV2ProjectActions.resetState())
   }, [dispatch, goToPage, router])
+
+  const walletConnectedToWrongChain = chain?.id && projectChainId !== parseInt(chain.id)
+
   const onFinish = useCallback(async () => {
 
-    if (chainUnsupported) {
-      await changeNetworks()
+    if (walletConnectedToWrongChain) {
+      await changeNetworks(projectChainId)
       return
     }
     if (!isConnected) {
@@ -102,8 +108,9 @@ export const ReviewDeployPage = () => {
       },
     })
   }, [
-    chainUnsupported,
+    walletConnectedToWrongChain,
     changeNetworks,
+    projectChainId,
     connect,
     deployProject,
     isConnected,
diff --git a/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx b/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx
index d5ea262bc2..ab6a2609cf 100644
--- a/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx
+++ b/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx
@@ -1,18 +1,21 @@
 import { Trans, t } from '@lingui/macro'
+
 import EthereumAddress from 'components/EthereumAddress'
+import { NETWORKS } from 'constants/networks'
 import ProjectLogo from 'components/ProjectLogo'
 import { ProjectTagsList } from 'components/ProjectTags/ProjectTagsList'
+import { ReviewDescription } from '../ReviewDescription'
 import { RichPreview } from 'components/RichPreview/RichPreview'
-import { useWallet } from 'hooks/Wallet'
-import { useMemo } from 'react'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { ipfsUriToGatewayUrl } from 'utils/ipfs'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { useMemo } from 'react'
+import { useWallet } from 'hooks/Wallet'
 import { wrapNonAnchorsInAnchor } from 'utils/wrapNonAnchorsInAnchor'
-import { ReviewDescription } from '../ReviewDescription'
 
 export const ProjectDetailsReview = () => {
   const { userAddress } = useWallet()
   const {
+    projectChainId,
     projectMetadata: {
       description,
       discord,
@@ -27,8 +30,6 @@ export const ProjectDetailsReview = () => {
       tags,
       introVideoUrl,
       introImageUri,
-      softTargetAmount,
-      softTargetCurrency,
     },
     inputProjectOwner,
   } = useAppSelector(state => state.creatingV2Project)
@@ -68,7 +69,15 @@ export const ProjectDetailsReview = () => {
         }
       />
       <ReviewDescription
-        className="col-span-3"
+        title={t`Project chain`}
+        desc={
+          <div className="overflow-hidden text-ellipsis text-base font-medium">
+            {NETWORKS[projectChainId]?.label}
+          </div>
+        }
+      />
+      <ReviewDescription
+        className="col-span-2"
         title={t`Tagline`}
         desc={
           projectTagline ? (
diff --git a/src/packages/v4/components/Create/hooks/useLoadInitialStateFromQuery.ts b/src/packages/v4/components/Create/hooks/useLoadInitialStateFromQuery.ts
index 265923a1d5..ed9e31d1f8 100644
--- a/src/packages/v4/components/Create/hooks/useLoadInitialStateFromQuery.ts
+++ b/src/packages/v4/components/Create/hooks/useLoadInitialStateFromQuery.ts
@@ -1,24 +1,26 @@
-import { ETH_TOKEN_ADDRESS } from 'constants/juiceboxTokens'
-import isEqual from 'lodash/isEqual'
-import { CreatePage } from 'models/createPage'
-import { ProjectTokensSelection } from 'models/projectTokenSelection'
-import { TreasurySelection } from 'models/treasurySelection'
-import { useRouter } from 'next/router'
-import { ballotStrategiesFn } from 'packages/v2v3/constants/ballotStrategies'
-import { MAX_PAYOUT_LIMIT } from 'packages/v4/utils/math'
-import { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { CreateState, ProjectState } from 'redux/slices/v2v3/shared/v2ProjectTypes'
 import {
   DEFAULT_REDUX_STATE,
   creatingV2ProjectActions,
 } from 'redux/slices/v2v3/creatingV2Project'
+import { useEffect, useState } from 'react'
+
+import { CreatePage } from 'models/createPage'
+import { DEFAULT_PROJECT_CHAIN_ID } from 'constants/networks'
+import { DefaultSettings as DefaultTokenSettings } from '../components/pages/ProjectToken/hooks/useProjectTokenForm'
+import { ETH_TOKEN_ADDRESS } from 'constants/juiceboxTokens'
 import { INITIAL_REDUX_STATE } from 'redux/slices/v2v3/shared/v2ProjectInitialReduxState'
-import { CreateState, ProjectState } from 'redux/slices/v2v3/shared/v2ProjectTypes'
+import { MAX_PAYOUT_LIMIT } from 'packages/v4/utils/math'
+import { ProjectTokensSelection } from 'models/projectTokenSelection'
+import { TreasurySelection } from 'models/treasurySelection'
+import { ballotStrategiesFn } from 'packages/v2v3/constants/ballotStrategies'
+import isEqual from 'lodash/isEqual'
 import { isEqualAddress } from 'utils/address'
 import { parseWad } from 'utils/format/formatNumber'
-import { zeroAddress } from 'viem'
-import { DefaultSettings as DefaultTokenSettings } from '../components/pages/ProjectToken/hooks/useProjectTokenForm'
 import { projectTokenSettingsToReduxFormat } from '../utils/projectTokenSettingsToReduxFormat'
+import { useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { zeroAddress } from 'viem'
 
 const ReduxDefaultTokenSettings =
   projectTokenSettingsToReduxFormat(DefaultTokenSettings)
@@ -100,6 +102,7 @@ const parseCreateFlowStateFromInitialState = (
   }
 
   return {
+    projectChainId: DEFAULT_PROJECT_CHAIN_ID,
     fundingCyclesPageSelection,
     treasurySelection,
     fundingTargetSelection: undefined, // TODO: Remove
diff --git a/src/redux/slices/v2v3/creatingV2Project/creatingV2Project.ts b/src/redux/slices/v2v3/creatingV2Project/creatingV2Project.ts
index e01caea4e8..e791046704 100644
--- a/src/redux/slices/v2v3/creatingV2Project/creatingV2Project.ts
+++ b/src/redux/slices/v2v3/creatingV2Project/creatingV2Project.ts
@@ -1,31 +1,32 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { CreatePage } from 'models/createPage'
-import { NftPostPayModalConfig } from 'models/nftPostPayModal'
+import {
+  EMPTY_PAYOUT_GROUPED_SPLITS,
+  EMPTY_RESERVED_TOKENS_GROUPED_SPLITS,
+} from '../shared/v2ProjectDefaultState'
 import {
   JB721GovernanceType,
   NftCollectionMetadata,
   NftRewardTier,
 } from 'models/nftRewards'
-import { PayoutsSelection } from 'models/payoutsSelection'
-import { ProjectTagName } from 'models/project-tags'
-import { ProjectTokensSelection } from 'models/projectTokenSelection'
-import { ReconfigurationStrategy } from 'models/reconfigurationStrategy'
-import { TreasurySelection } from 'models/treasurySelection'
-import { AmountInputValue } from 'packages/v2v3/components/Create/components/pages/ProjectDetails/ProjectDetailsPage'
-import { projectTokenSettingsToReduxFormat } from 'packages/v2v3/components/Create/utils/projectTokenSettingsToReduxFormat'
-import { AllocationSplit } from 'packages/v2v3/components/shared/Allocation/Allocation'
-import { Split } from 'packages/v2v3/models/splits'
+import { NftRewardsData, ReduxState } from '../shared/v2ProjectTypes'
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import {
   SerializedV2V3FundAccessConstraint,
   SerializedV2V3FundingCycleData,
   SerializedV2V3FundingCycleMetadata,
 } from 'packages/v2v3/utils/serializers'
-import {
-  EMPTY_PAYOUT_GROUPED_SPLITS,
-  EMPTY_RESERVED_TOKENS_GROUPED_SPLITS,
-} from '../shared/v2ProjectDefaultState'
+
+import { AllocationSplit } from 'packages/v2v3/components/shared/Allocation/Allocation'
+import { AmountInputValue } from 'packages/v2v3/components/Create/components/pages/ProjectDetails/ProjectDetailsPage'
+import { CreatePage } from 'models/createPage'
 import { INITIAL_REDUX_STATE } from '../shared/v2ProjectInitialReduxState'
-import { NftRewardsData, ReduxState } from '../shared/v2ProjectTypes'
+import { NftPostPayModalConfig } from 'models/nftPostPayModal'
+import { PayoutsSelection } from 'models/payoutsSelection'
+import { ProjectTagName } from 'models/project-tags'
+import { ProjectTokensSelection } from 'models/projectTokenSelection'
+import { ReconfigurationStrategy } from 'models/reconfigurationStrategy'
+import { Split } from 'packages/v2v3/models/splits'
+import { TreasurySelection } from 'models/treasurySelection'
+import { projectTokenSettingsToReduxFormat } from 'packages/v2v3/components/Create/utils/projectTokenSettingsToReduxFormat'
 
 const creatingV2ProjectSlice = createSlice({
   name: 'creatingV2Project',
@@ -38,6 +39,9 @@ const creatingV2ProjectSlice = createSlice({
     setName: (state, action: PayloadAction<string>) => {
       state.projectMetadata.name = action.payload
     },
+    setProjectChainId: (state, action: PayloadAction<number>) => {
+      state.projectChainId = action.payload
+    },
     setProjectTagline: (state, action: PayloadAction<string>) => {
       state.projectMetadata.projectTagline = action.payload
     },
diff --git a/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts b/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts
index aec047faca..1a4cd8b27e 100644
--- a/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts
+++ b/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts
@@ -1,30 +1,29 @@
-import { ONE_MILLION } from 'constants/numbers'
+import { BigNumber, constants } from 'ethers'
+import { CreateState, ProjectState } from './v2ProjectTypes'
 import {
   ETH_PAYOUT_SPLIT_GROUP,
   RESERVED_TOKEN_SPLIT_GROUP,
 } from 'constants/splits'
-import { constants } from 'ethers'
-
-import { BigNumber } from 'ethers'
 import { JB721GovernanceType, JBTiered721Flags } from 'models/nftRewards'
 import {
   LATEST_METADATA_VERSION,
   ProjectMetadata,
 } from 'models/projectMetadata'
-import {
-  V2V3_CURRENCY_ETH,
-  V2V3_CURRENCY_USD,
-} from 'packages/v2v3/utils/currency'
-import { issuanceRateFrom, redemptionRateFrom } from 'packages/v2v3/utils/math'
 import {
   SerializedV2V3FundingCycleData,
   SerializedV2V3FundingCycleMetadata,
   serializeV2V3FundingCycleData,
   serializeV2V3FundingCycleMetadata,
 } from 'packages/v2v3/utils/serializers'
+import {
+  V2V3_CURRENCY_ETH,
+  V2V3_CURRENCY_USD,
+} from 'packages/v2v3/utils/currency'
+import { issuanceRateFrom, redemptionRateFrom } from 'packages/v2v3/utils/math'
+
 import { JB721TiersHookFlags } from 'packages/v4/models/nfts'
+import { ONE_MILLION } from 'constants/numbers'
 import { projectDescriptionTemplate } from 'templates/create/projectDescriptionTemplate'
-import { CreateState, ProjectState } from './v2ProjectTypes'
 
 const DEFAULT_DOMAIN = 'juicebox'
 
@@ -120,6 +119,7 @@ const DEFAULT_PROJECT_METADATA_STATE: ProjectMetadata = {
 }
 
 const DEFAULT_CREATE_STATE: CreateState = {
+  projectChainId: 0, // not necessary for v2v3
   treasurySelection: 'zero',
   reconfigurationRuleSelection: undefined,
   fundingCyclesPageSelection: undefined,
diff --git a/src/redux/slices/v2v3/shared/v2ProjectTypes.ts b/src/redux/slices/v2v3/shared/v2ProjectTypes.ts
index a7b558e9c8..2e10b9b0ff 100644
--- a/src/redux/slices/v2v3/shared/v2ProjectTypes.ts
+++ b/src/redux/slices/v2v3/shared/v2ProjectTypes.ts
@@ -1,28 +1,30 @@
-import { CreatePage } from 'models/createPage'
-import { FundingTargetType } from 'models/fundingTargetType'
-import { NftPostPayModalConfig } from 'models/nftPostPayModal'
+import {
+  ETHPayoutGroupedSplits,
+  ReservedTokensGroupedSplits,
+} from 'packages/v2v3/models/splits'
 import {
   JB721GovernanceType,
   JBTiered721Flags,
   NftCollectionMetadata,
   NftRewardTier,
 } from 'models/nftRewards'
-import { PayoutsSelection } from 'models/payoutsSelection'
-import { ProjectMetadata } from 'models/projectMetadata'
-import { ProjectTokensSelection } from 'models/projectTokenSelection'
-import { ReconfigurationStrategy } from 'models/reconfigurationStrategy'
-import { TreasurySelection } from 'models/treasurySelection'
-import { NftPricingContext } from 'packages/v2v3/hooks/JB721Delegate/contractReader/useNftCollectionPricingContext'
-import {
-  ETHPayoutGroupedSplits,
-  ReservedTokensGroupedSplits,
-} from 'packages/v2v3/models/splits'
 import {
   SerializedV2V3FundAccessConstraint,
   SerializedV2V3FundingCycleData,
   SerializedV2V3FundingCycleMetadata,
 } from 'packages/v2v3/utils/serializers'
 
+import { CreatePage } from 'models/createPage'
+import { FundingTargetType } from 'models/fundingTargetType'
+import { NftPostPayModalConfig } from 'models/nftPostPayModal'
+import { NftPricingContext } from 'packages/v2v3/hooks/JB721Delegate/contractReader/useNftCollectionPricingContext'
+import { PayoutsSelection } from 'models/payoutsSelection'
+import { ProjectMetadata } from 'models/projectMetadata'
+import { ProjectTokensSelection } from 'models/projectTokenSelection'
+import { ReconfigurationStrategy } from 'models/reconfigurationStrategy'
+import { SupportedChainId } from 'constants/networks'
+import { TreasurySelection } from 'models/treasurySelection'
+
 export type NftRewardsData = {
   rewardTiers: NftRewardTier[] | undefined
   CIDs: string[] | undefined // points to locations of the NFTs' json on IPFS
@@ -35,6 +37,7 @@ export type NftRewardsData = {
 
 export interface CreateState {
   fundingCyclesPageSelection: 'automated' | 'manual' | undefined
+  projectChainId: SupportedChainId
   treasurySelection: TreasurySelection | undefined
   fundingTargetSelection: FundingTargetType | undefined
   payoutsSelection: PayoutsSelection | undefined

From 570a270f44ff5425b028dab455c3cf947b15ad2f Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Thu, 2 Jan 2025 17:26:37 +1000
Subject: [PATCH 02/21] poo

---
 package.json |  4 ++--
 yarn.lock    | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 05605b398b..43fa193372 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^12.2.4-alpha",
-    "juice-sdk-react": "^12.2.4-alpha",
+    "juice-sdk-core": "^12.2.5-alpha",
+    "juice-sdk-react": "^12.2.6-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
diff --git a/yarn.lock b/yarn.lock
index c612fd90bb..c299a40814 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12178,18 +12178,18 @@ jsx-ast-utils@^3.3.5:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-juice-sdk-core@^12.2.4-alpha:
-  version "12.2.4-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.4-alpha.tgz#b6c2d03b25a9c5660cdb82a83cb5a0d994f3a313"
-  integrity sha512-LvcjZCD3rNPrYXKQlG/WRaOA05yA+pjJFMROKWNk2vIBK/tdEglaeagwo1OXpW5JqjaoQ3RS83nT+aC8YvQSVA==
+juice-sdk-core@^12.2.5-alpha:
+  version "12.2.5-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.5-alpha.tgz#3608f0d856e7a090210ff4f3d26f349e3383ee2c"
+  integrity sha512-6AcS9B4a8tkc7cci1HzQPtMLNM9PGIK3zWguFSJkpB4n+ZQmu2vJR/iT5DeTya3HsvI05utRIX49X1amAwNS5w==
   dependencies:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.4-alpha:
-  version "12.2.4-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.4-alpha.tgz#2d53d1296d7d0817c3a7dda75b99570df12661f2"
-  integrity sha512-SX/WvlCANpgS568Ohdf7q+yC2jLY4vTUUGjgmZD2XUgCZTbfPorgUbZ4pxWwWgtfxydq6vyoPHcUUjWItMEPWw==
+juice-sdk-react@^12.2.6-alpha:
+  version "12.2.6-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.6-alpha.tgz#d58d8f13084ea50f70ce4a51305ff97fac20bcf3"
+  integrity sha512-u9ZaETNeZmHcHjlJc/oDpERrMfs2bSVd46O6N+DCDSRODqBFhwszS9qPmgwaGiajIc7aKmEh0xJouJgBvWtdag==
 
 juice@^10.0.0:
   version "10.0.0"

From 3044f176ee6a7596970ab60ff5f1e576286179a0 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Thu, 2 Jan 2025 19:08:31 +1000
Subject: [PATCH 03/21] sdk

---
 package.json |  4 ++--
 yarn.lock    | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 43fa193372..5c1a8e718d 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^12.2.5-alpha",
-    "juice-sdk-react": "^12.2.6-alpha",
+    "juice-sdk-core": "^12.2.8-alpha",
+    "juice-sdk-react": "^12.2.9-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
diff --git a/yarn.lock b/yarn.lock
index c299a40814..077ef646fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12178,18 +12178,18 @@ jsx-ast-utils@^3.3.5:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-juice-sdk-core@^12.2.5-alpha:
-  version "12.2.5-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.5-alpha.tgz#3608f0d856e7a090210ff4f3d26f349e3383ee2c"
-  integrity sha512-6AcS9B4a8tkc7cci1HzQPtMLNM9PGIK3zWguFSJkpB4n+ZQmu2vJR/iT5DeTya3HsvI05utRIX49X1amAwNS5w==
+juice-sdk-core@^12.2.8-alpha:
+  version "12.2.8-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.8-alpha.tgz#0a4273051519bd35f0d45b704f64bc6a01952271"
+  integrity sha512-ZmSxuec7/5i7AuT2DUDgeGvXNbTPFHL3SS5dg6tgxL31wxc6Yp2sPN1s8nvy4ANbtG3G/SFypSCnlKRI18oTwA==
   dependencies:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.6-alpha:
-  version "12.2.6-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.6-alpha.tgz#d58d8f13084ea50f70ce4a51305ff97fac20bcf3"
-  integrity sha512-u9ZaETNeZmHcHjlJc/oDpERrMfs2bSVd46O6N+DCDSRODqBFhwszS9qPmgwaGiajIc7aKmEh0xJouJgBvWtdag==
+juice-sdk-react@^12.2.9-alpha:
+  version "12.2.9-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.9-alpha.tgz#f37869621b9796a15ae0c887a89ea4377ced1811"
+  integrity sha512-kR3coJU9vYAXGZSvOHYyiSw5n2a9Fb38WANjhjysdiFLQsIJ08LFR4qIgrhwkMUXmzP18ImutivUh4sZbukl5g==
 
 juice@^10.0.0:
   version "10.0.0"

From 3c7830898f645d448ee051c926901b2bd661e579 Mon Sep 17 00:00:00 2001
From: wraeth-eth <104132113+wraeth-eth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:35:14 +1100
Subject: [PATCH 04/21] =?UTF-8?q?Fix=20an=20nft=20credit=20bug=20where=20c?=
 =?UTF-8?q?redit=20is=20applied=20irrespective=20of=20whether=E2=80=A6=20(?=
 =?UTF-8?q?#4570)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PayProjectModal/PayProjectModal.tsx            |  8 +++++++-
 .../PayProjectModal/hooks/usePayAmounts.ts         |  8 +++++---
 .../hooks/usePayProjectModal/usePayProjectTx.ts    | 14 ++++++++------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/PayProjectModal.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/PayProjectModal.tsx
index 24b0fbb66d..ca9783f0e9 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/PayProjectModal.tsx
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/PayProjectModal.tsx
@@ -9,6 +9,7 @@ import { useNftCredits } from 'packages/v2v3/hooks/JB721Delegate/useNftCredits'
 import React, { ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { helpPagePath } from 'utils/helpPagePath'
+import { useProjectSelector } from '../../../redux/hooks'
 import { MessageSection } from './components/MessageSection'
 import { ReceiveSection } from './components/ReceiveSection'
 import { usePayAmounts } from './hooks/usePayAmounts'
@@ -167,6 +168,7 @@ export const PayProjectModal: React.FC = () => {
 const AmountSection = () => {
   const { userAddress } = useWallet()
   const { data: nftCredits } = useNftCredits(userAddress)
+  const { chosenNftRewards } = useProjectSelector(state => state.projectCart)
   const { formattedAmount, formattedNftCredits, formattedTotalAmount } =
     usePayAmounts()
 
@@ -192,7 +194,11 @@ const AmountSection = () => {
     </div>
   )
 
-  if (!nftCredits?.gt(0) || !formattedNftCredits)
+  if (
+    !nftCredits?.gt(0) ||
+    !formattedNftCredits ||
+    chosenNftRewards.length === 0
+  )
     return (
       <RowData
         label={t`Total amount`}
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayAmounts.ts b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayAmounts.ts
index 074455272f..29f936e0bf 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayAmounts.ts
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayAmounts.ts
@@ -13,7 +13,9 @@ import { usePayProjectModal } from './usePayProjectModal/usePayProjectModal'
 
 export const usePayAmounts = () => {
   const converter = useCurrencyConverter()
-  const { payAmount } = useProjectSelector(state => state.projectCart)
+  const { payAmount, chosenNftRewards } = useProjectSelector(
+    state => state.projectCart,
+  )
   const { primaryAmount, secondaryAmount } = usePayProjectModal()
   const { userAddress } = useWallet()
   const { data: nftCreditsData } = useNftCredits(userAddress)
@@ -36,7 +38,7 @@ export const usePayAmounts = () => {
   }, [converter, payAmount])
 
   const appliedNFTCreditsRaw = React.useMemo(() => {
-    if (!payAmountRaw || !nftCreditsData) return
+    if (!payAmountRaw || !nftCreditsData || !chosenNftRewards.length) return
 
     const nftCreditsApplied = payAmountRaw.eth.lt(nftCreditsData)
       ? payAmountRaw.eth
@@ -49,7 +51,7 @@ export const usePayAmounts = () => {
       eth,
       usd,
     }
-  }, [converter, nftCreditsData, payAmountRaw])
+  }, [chosenNftRewards.length, converter, nftCreditsData, payAmountRaw])
 
   const formattedNftCredits = React.useMemo(() => {
     if (!appliedNFTCreditsRaw || !payAmount) return
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
index b5d64a2cd7..cc2f5fa1bc 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
@@ -71,15 +71,17 @@ export const usePayProjectTx = ({
       payAmount.currency === V2V3_CURRENCY_ETH
         ? parseWad(payAmount.amount)
         : converter.usdToWei(payAmount.amount)
-    if (nftCredits) {
-      if (nftCredits.gte(weiAmount)) {
-        weiAmount = parseWad(0)
-      } else {
-        weiAmount = weiAmount.sub(nftCredits)
+    if (chosenNftRewards.length > 0) {
+      if (nftCredits) {
+        if (nftCredits.gte(weiAmount)) {
+          weiAmount = parseWad(0)
+        } else {
+          weiAmount = weiAmount.sub(nftCredits)
+        }
       }
     }
     return weiAmount
-  }, [payAmount, converter, nftCredits])
+  }, [payAmount, converter, chosenNftRewards.length, nftCredits])
 
   const prepareDelegateMetadata = usePrepareDelegatePayMetadata(weiAmount, {
     nftRewards: chosenNftRewards,

From 1cd2592ea7f0452142221bc2215b40776cfa63c4 Mon Sep 17 00:00:00 2001
From: wraeth-eth <104132113+wraeth-eth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:35:47 +1100
Subject: [PATCH 05/21] add spacing for nft callout credit (#4569)

---
 .../V2V3Project/NftCreditsCallout.tsx         | 34 +++++++++++--------
 .../V4PayRedeemCard/V4NftCreditsCallouts.tsx  |  2 +-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx b/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx
index 51e9998fa4..d79b994d34 100644
--- a/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx
+++ b/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx
@@ -1,10 +1,10 @@
-import { CubeIcon } from "@heroicons/react/24/outline"
-import { Trans } from "@lingui/macro"
-import { Button } from "antd"
-import { useWallet } from "hooks/Wallet"
-import { useNftCredits } from "packages/v2v3/hooks/JB721Delegate/useNftCredits"
-import { fromWad } from "utils/format/formatNumber"
-import { useProjectPageQueries } from "./ProjectDashboard/hooks/useProjectPageQueries"
+import { CubeIcon } from '@heroicons/react/24/outline'
+import { Trans } from '@lingui/macro'
+import { Button } from 'antd'
+import { useWallet } from 'hooks/Wallet'
+import { useNftCredits } from 'packages/v2v3/hooks/JB721Delegate/useNftCredits'
+import { fromWad } from 'utils/format/formatNumber'
+import { useProjectPageQueries } from './ProjectDashboard/hooks/useProjectPageQueries'
 
 export function NftCreditsCallout() {
   const { setProjectPageTab } = useProjectPageQueries()
@@ -13,19 +13,23 @@ export function NftCreditsCallout() {
   if (nftCredits && nftCredits.gt(0)) {
     return (
       <div
-        className={'flex flex-col gap-5 rounded-lg border border-grey-200 bg-white p-5 pb-6 shadow-[0_6px_16px_0_rgba(0,_0,_0,_0.04)] dark:border-slate-600 dark:bg-slate-700'}
+        className={
+          'mt-5 flex flex-col gap-5 rounded-lg border border-grey-200 bg-white p-5 pb-6 shadow-[0_6px_16px_0_rgba(0,_0,_0,_0.04)] dark:border-slate-600 dark:bg-slate-700'
+        }
       >
-        <div className='flex flex-start gap-1.5 items-center'>
-          <div className='bg-bluebs-50 dark:bg-bluebs-500 rounded-full flex items-center justify-center p-1'>
-            <CubeIcon className="h-5 w-5 text-gray-500 text-bluebs-600 dark:text-black stroke-2" />
+        <div className="flex-start flex items-center gap-1.5">
+          <div className="flex items-center justify-center rounded-full bg-bluebs-50 p-1 dark:bg-bluebs-500">
+            <CubeIcon className="text-gray-500 h-5 w-5 stroke-2 text-bluebs-600 dark:text-black" />
           </div>
           <Trans>
-            You have <strong className="font-bold">{fromWad(nftCredits)} ETH</strong> of unclaimed NFT credits
+            You have{' '}
+            <strong className="font-bold">{fromWad(nftCredits)} ETH</strong> of
+            unclaimed NFT credits
           </Trans>
         </div>
-        <Button 
-          type="default" 
-          className="bg-bluebs-50 dark:bg-bluebs-500 border-none font-medium dark:text-black"
+        <Button
+          type="default"
+          className="border-none bg-bluebs-50 font-medium dark:bg-bluebs-500 dark:text-black"
           onClick={() => setProjectPageTab('nft_rewards')}
         >
           Browse NFTs
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/V4NftCreditsCallouts.tsx b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/V4NftCreditsCallouts.tsx
index 787d11e527..7d3370c986 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/V4NftCreditsCallouts.tsx
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/V4NftCreditsCallouts.tsx
@@ -16,7 +16,7 @@ export function V4NftCreditsCallouts() {
   return (
     <div
       className={
-        'flex flex-col gap-5 rounded-lg border border-grey-200 bg-white p-5 pb-6 shadow-[0_6px_16px_0_rgba(0,_0,_0,_0.04)] dark:border-slate-600 dark:bg-slate-700'
+        'mt-5 flex flex-col gap-5 rounded-lg border border-grey-200 bg-white p-5 pb-6 shadow-[0_6px_16px_0_rgba(0,_0,_0,_0.04)] dark:border-slate-600 dark:bg-slate-700'
       }
     >
       <div className="flex-start flex items-center gap-1.5">

From 0af1c9497b009ff26cd5a48ca4f1c9d4f84df6de Mon Sep 17 00:00:00 2001
From: Johnny D <johnnyD.eth@protonmail.com>
Date: Fri, 3 Jan 2025 15:23:24 +1100
Subject: [PATCH 06/21] feat: chain selector mvp pay flow v4 (#4568)

---
 next.config.js                                |   1 +
 src/constants/networks.ts                     |  20 ++
 src/locales/messages.pot                      |   6 +
 src/models/networkName.ts                     |   2 +
 .../V4PayRedeemCard/PayConfiguration.tsx      |  21 +-
 .../PayProjectModal/PayProjectModal.tsx       | 263 ++++++++++--------
 .../components/ChainSelectSection.tsx         |  88 ++++++
 .../usePayProjectModal/usePayProjectModal.ts  |  29 +-
 .../usePayProjectModal/usePayProjectTx.ts     |  36 ++-
 src/packages/v4/models/suckers.ts             |   6 +
 src/packages/v4/utils/networks.ts             |   5 +
 .../V4ProjectDashboard/V4ProjectHeader.tsx    |  27 +-
 .../ProjectSettingsLayout.tsx                 |  18 +-
 .../hooks/useSettingsPagePath.ts              |   7 +-
 14 files changed, 352 insertions(+), 177 deletions(-)
 create mode 100644 src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
 create mode 100644 src/packages/v4/models/suckers.ts

diff --git a/next.config.js b/next.config.js
index d4fb7c621a..e8ee37fa2a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -66,6 +66,7 @@ const CONNECT_SRC = [
   'https://*.safe.global',
   'https://*.snapshot.org',
   'https://*.wallet.coinbase.com',
+  'https://api.blocknative.com', // used for tx gas estimation across chains
   'wss://www.walletlink.org/rpc', // Coinbase
   ...WALLET_CONNECT_URLS,
   'https://*.supabase.co',
diff --git a/src/constants/networks.ts b/src/constants/networks.ts
index dbedddf472..65d288cccf 100644
--- a/src/constants/networks.ts
+++ b/src/constants/networks.ts
@@ -39,6 +39,15 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia.infura.io/v3/${infuraId}`,
     token: 'SepETH',
   },
+  42161: {
+    name: NetworkName.arbitrumOne,
+    label: 'Arbitrum One',
+    color: '#28a0f0',
+    chainId: 42161,
+    token: 'ArbETH',
+    rpcUrl: `https://arbitrum-mainnet.infura.io/v3/${infuraId}`,
+    blockExplorer: 'https://arbiscan.io',
+  },
   421614: {
     name: NetworkName.arbitrumSepolia,
     label: 'Arbitrum Sepolia Testnet',
@@ -57,8 +66,19 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia.optimism.io`,
     blockExplorer: 'https://optimism-sepolia.blockscout.com',
   },
+  84532: {
+    name: NetworkName.baseSepolia,
+    label: 'Base Sepolia',
+    color: '#00d395',
+    chainId: 84532,
+    token: 'BaseETH',
+    rpcUrl: `https://sepolia.base.org`,
+    blockExplorer: 'https://sepolia.basescan.org',
+  },
 }
 
+export const TESTNET_IDS = new Set([11155111, 421614, 11155420, 84531])
+
 export type SupportedChainId = keyof typeof NETWORKS;
 
 export const NETWORKS_BY_NAME = Object.values(NETWORKS).reduce(
diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index 4ce986a407..3aca333a37 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -32,6 +32,9 @@ msgstr ""
 msgid "The number of tokens set aside for reserved token recipients when someone pays this project 1 ETH."
 msgstr ""
 
+msgid "Change networks to pay"
+msgstr ""
+
 msgid "\"Editing\" an NFT creates a copy of it. The old version won't be available, and the new version will have a new token ID."
 msgstr ""
 
@@ -890,6 +893,9 @@ msgstr ""
 msgid "Hold fees"
 msgstr ""
 
+msgid "Chain selection"
+msgstr ""
+
 msgid "Grant NFT permissions"
 msgstr ""
 
diff --git a/src/models/networkName.ts b/src/models/networkName.ts
index d3e5e35266..8dceae7436 100644
--- a/src/models/networkName.ts
+++ b/src/models/networkName.ts
@@ -4,4 +4,6 @@ export enum NetworkName {
   sepolia = 'sepolia',
   arbitrumSepolia = 'arbitrumSepolia',
   optimismSepolia = 'optimismSepolia',
+  arbitrumOne = 'arbitrumOne',
+  baseSepolia = 'baseSepolia',
 }
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayConfiguration.tsx b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayConfiguration.tsx
index 675d89d0f1..e46d57bbec 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayConfiguration.tsx
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayConfiguration.tsx
@@ -1,22 +1,23 @@
-import { t, Trans } from '@lingui/macro'
 import { Button, Tooltip } from 'antd'
-import { PV_V2 } from 'constants/pv'
-import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
-import { useProjectLogoSrc } from 'hooks/useProjectLogoSrc'
-import { useWallet } from 'hooks/Wallet'
-import { useJBTokenContext } from 'juice-sdk-react'
-// import { usePayProjectDisabled } from 'packages/v2v3/hooks/usePayProjectDisabled'
-import { V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
+import { Trans, t } from '@lingui/macro'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   useProjectDispatch,
   useProjectSelector,
   useProjectStore,
 } from '../redux/hooks'
-import { projectCartActions } from '../redux/projectCartSlice'
+
 import { EthereumLogo } from './EthereumLogo'
-import { useProjectPaymentTokens } from './PayProjectModal/hooks/useProjectPaymentTokens'
+import { PV_V2 } from 'constants/pv'
 import { PayRedeemInput } from './PayRedeemInput'
+import { V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
+import { projectCartActions } from '../redux/projectCartSlice'
+import { useJBTokenContext } from 'juice-sdk-react'
+import { useProjectLogoSrc } from 'hooks/useProjectLogoSrc'
+// import { usePayProjectDisabled } from 'packages/v2v3/hooks/usePayProjectDisabled'
+import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
+import { useProjectPaymentTokens } from './PayProjectModal/hooks/useProjectPaymentTokens'
+import { useWallet } from 'hooks/Wallet'
 
 type PayConfigurationProps = {
   userTokenBalance: number | undefined
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/PayProjectModal.tsx b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/PayProjectModal.tsx
index 0fe15b45fa..8b5b6a1b29 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/PayProjectModal.tsx
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/PayProjectModal.tsx
@@ -1,19 +1,22 @@
+import {
+  PayProjectModalFormValues,
+  usePayProjectModal,
+} from './hooks/usePayProjectModal/usePayProjectModal'
 import { Trans, t } from '@lingui/macro'
+
+import { ChainSelectSection } from './components/ChainSelectSection'
 import EtherscanLink from 'components/EtherscanLink'
 import ExternalLink from 'components/ExternalLink'
-import { JuiceModal } from 'components/modals/JuiceModal'
 import { Formik } from 'formik'
 import Image from 'next/legacy/image'
-import { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
-import { twMerge } from 'tailwind-merge'
-import { helpPagePath } from 'utils/helpPagePath'
+import { JuiceModal } from 'components/modals/JuiceModal'
 import { MessageSection } from './components/MessageSection'
 import { ReceiveSection } from './components/ReceiveSection'
+import { helpPagePath } from 'utils/helpPagePath'
+import { twMerge } from 'tailwind-merge'
 import { usePayAmounts } from './hooks/usePayAmounts'
-import {
-  PayProjectModalFormValues,
-  usePayProjectModal,
-} from './hooks/usePayProjectModal/usePayProjectModal'
+import { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
+import { useWallet } from 'hooks/Wallet'
 
 export const PayProjectModal: React.FC = () => {
   const {
@@ -28,6 +31,7 @@ export const PayProjectModal: React.FC = () => {
     onPaySubmit,
   } = usePayProjectModal()
   const { formattedTotalAmount } = usePayAmounts()
+  const { chain: walletChain, changeNetworks, connect } = useWallet()
 
   return (
     <Formik<PayProjectModalFormValues>
@@ -38,126 +42,149 @@ export const PayProjectModal: React.FC = () => {
         },
         userAcceptsTerms: false,
         beneficiaryAddress: undefined,
+        chainId: undefined,
       }}
       validationSchema={validationSchema}
-      onSubmit={onPaySubmit}
+      onSubmit={async (values, actions) => {
+        const walletConnectedToWrongChain =
+          walletChain?.id && values.chainId !== parseInt(walletChain.id)
+        if (walletConnectedToWrongChain) {
+          await changeNetworks(values.chainId) 
+          return
+        }
+        if (!walletChain) {
+          await connect() 
+          return
+        }
+        await onPaySubmit(values, actions)
+      }}
     >
-      {props => (
-        <form name="PayProjectModalForm" onSubmit={props.handleSubmit}>
-          <JuiceModal
-            className="w-full max-w-xl"
-            buttonPosition="stretch"
-            title={t`Pay ${projectName}`}
-            position="top"
-            okLoading={props.isSubmitting || isTransactionPending}
-            okButtonForm="PayProjectModalForm"
-            okText={t`Pay ${formattedTotalAmount.primaryAmount}`}
-            cancelText={
-              isTransactionPending || isTransactionConfirmed
-                ? t`Close`
-                : t`Cancel`
-            }
-            open={open}
-            setOpen={setOpen}
-            onSubmit={props.handleSubmit}
-            onCancel={setOpen => {
-              setOpen(false)
-              // Small timeout to allow the modal to close before resetting the form
-              setTimeout(() => props.resetForm(), 300)
-            }}
-          >
-            {isTransactionPending ? (
-              <div className="flex h-full w-full flex-col items-center justify-center">
-                <Image
-                  src="/assets/images/orange-loading.webp"
-                  alt={t`Juicebox loading animation`}
-                  width={260}
-                  height={260}
-                  style={{
-                    maxWidth: '100%',
-                    height: 'auto',
-                  }}
-                />
-                <h2 className="mt-4 font-heading text-2xl font-medium text-black dark:text-slate-100">
-                  <Trans>Transaction pending...</Trans>
-                </h2>
-                <p>
-                  <Trans>
-                    Your transaction has been submitted and is awaiting
-                    confirmation.
-                  </Trans>
-                </p>
-                {pendingTransactionHash ? (
+      {props => {
+        const walletConnectedToWrongChain =
+          walletChain?.id && props.values.chainId !== parseInt(walletChain.id)
+
+        return (
+          <form name="PayProjectModalForm" onSubmit={props.handleSubmit}>
+            <JuiceModal
+              className="w-full max-w-xl"
+              buttonPosition="stretch"
+              title={t`Pay ${projectName}`}
+              position="top"
+              okLoading={props.isSubmitting || isTransactionPending}
+              okButtonForm="PayProjectModalForm"
+              okText={
+                walletConnectedToWrongChain
+                  ? t`Change networks to pay`
+                  : t`Pay ${formattedTotalAmount.primaryAmount}`
+              }
+              cancelText={
+                isTransactionPending || isTransactionConfirmed
+                  ? t`Close`
+                  : t`Cancel`
+              }
+              open={open}
+              setOpen={setOpen}
+              onSubmit={props.handleSubmit}
+              onCancel={setOpen => {
+                setOpen(false)
+                setTimeout(() => props.resetForm(), 300)
+              }}
+            >
+              {isTransactionPending ? (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  <Image
+                    src="/assets/images/orange-loading.webp"
+                    alt={t`Juicebox loading animation`}
+                    width={260}
+                    height={260}
+                    style={{
+                      maxWidth: '100%',
+                      height: 'auto',
+                    }}
+                  />
+                  <h2 className="mt-4 font-heading text-2xl font-medium text-black dark:text-slate-100">
+                    <Trans>Transaction pending...</Trans>
+                  </h2>
                   <p>
-                    <EtherscanLink value={pendingTransactionHash} type="tx">
-                      <Trans>View on Etherscan</Trans>
-                    </EtherscanLink>
+                    <Trans>
+                      Your transaction has been submitted and is awaiting
+                      confirmation.
+                    </Trans>
                   </p>
-                ) : null}
-              </div>
-            ) : (
-              <>
-                <div className="flex flex-col divide-y divide-grey-200 dark:divide-slate-500">
-                  <AmountSection />
+                  {pendingTransactionHash ? (
+                    <p>
+                      <EtherscanLink value={pendingTransactionHash} type="tx">
+                        <Trans>View on Etherscan</Trans>
+                      </EtherscanLink>
+                    </p>
+                  ) : null}
+                </div>
+              ) : (
+                <>
+                  <div className="flex flex-col divide-y divide-grey-200 dark:divide-slate-500">
+                    <AmountSection />
+
+                    <ReceiveSection className="py-6" />
 
-                  <ReceiveSection className="py-6" />
+                    <ChainSelectSection />
 
-                  <div className="py-6">
-                    <MessageSection />
+                    <div className="py-6">
+                      <MessageSection />
 
-                    <div className="mt-6 flex gap-2">
-                      <input
-                        id="userAcceptsTerms"
-                        name="userAcceptsTerms"
-                        type="checkbox"
-                        checked={props.values.userAcceptsTerms}
-                        onChange={() =>
-                          props.setFieldValue(
-                            'userAcceptsTerms',
-                            !props.values.userAcceptsTerms,
-                          )
-                        }
-                      />
-                      <label
-                        htmlFor="userAcceptsTerms"
-                        className={twMerge(
-                          'font-normal',
-                          props.errors.userAcceptsTerms &&
-                            props.submitCount > 0 &&
-                            'text-error-500 transition-colors',
-                        )}
-                      >
-                        {projectPayDisclosure ? (
-                          <Trans>
-                            I understand and accept this project's notice and
-                            the{' '}
-                            <ExternalLink
-                              href={helpPagePath('dev/learn/risks')}
-                            >
-                              risks
-                            </ExternalLink>{' '}
-                            associated with the Juicebox protocol.
-                          </Trans>
-                        ) : (
-                          <Trans>
-                            I understand and accept the{' '}
-                            <ExternalLink
-                              href={helpPagePath('dev/learn/risks')}
-                            >
-                              risks
-                            </ExternalLink>{' '}
-                            associated with the Juicebox protocol.
-                          </Trans>
-                        )}
-                      </label>
+                      <div className="mt-6 flex gap-2">
+                        <input
+                          id="userAcceptsTerms"
+                          name="userAcceptsTerms"
+                          type="checkbox"
+                          checked={props.values.userAcceptsTerms}
+                          onChange={() =>
+                            props.setFieldValue(
+                              'userAcceptsTerms',
+                              !props.values.userAcceptsTerms,
+                            )
+                          }
+                        />
+                        <label
+                          htmlFor="userAcceptsTerms"
+                          className={twMerge(
+                            'font-normal',
+                            props.errors.userAcceptsTerms &&
+                              props.submitCount > 0 &&
+                              'text-error-500 transition-colors',
+                          )}
+                        >
+                          {projectPayDisclosure ? (
+                            <Trans>
+                              I understand and accept this project's notice and
+                              the{' '}
+                              <ExternalLink
+                                href={helpPagePath('dev/learn/risks')}
+                              >
+                                risks
+                              </ExternalLink>{' '}
+                              associated with the Juicebox protocol.
+                            </Trans>
+                          ) : (
+                            <Trans>
+                              I understand and accept the{' '}
+                              <ExternalLink
+                                href={helpPagePath('dev/learn/risks')}
+                              >
+                                risks
+                              </ExternalLink>{' '}
+                              associated with the Juicebox protocol.
+                            </Trans>
+                          )}
+                        </label>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </>
-            )}
-          </JuiceModal>
-        </form>
-      )}
+                </>
+              )}
+            </JuiceModal>
+          </form>
+        )
+      }}
     </Formik>
   )
 }
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
new file mode 100644
index 0000000000..8b6793dd10
--- /dev/null
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import { useJBChainId, useSuckers } from "juice-sdk-react";
+
+import { JuiceListbox } from "components/inputs/JuiceListbox";
+import { NETWORKS } from "constants/networks";
+import { PayProjectModalFormValues } from "../hooks/usePayProjectModal/usePayProjectModal";
+import { Sucker } from "packages/v4/models/suckers";
+import { Trans } from "@lingui/macro";
+import axios from "axios";
+import { useFormikContext } from "formik";
+import { useProjectPaymentTokens } from "../hooks/useProjectPaymentTokens";
+
+type GasEstimates = Record<number, string>;
+
+export const ChainSelectSection = () => {
+  const [gasEstimates, setGasEstimates] = useState<GasEstimates>({});
+
+  const { receivedTokenSymbolText } = useProjectPaymentTokens();
+
+  const { data: suckers } = useSuckers() as { data: Sucker[] | undefined }
+
+  const defaultChainId = useJBChainId();
+  const { values, setFieldValue } =
+    useFormikContext<PayProjectModalFormValues>();
+
+  const allowedChainIds = new Set(suckers?.map((sucker) => sucker.peerChainId));
+  const networkOptions = Object.entries(NETWORKS)
+    .filter(([chainId]) => allowedChainIds.has(parseInt(chainId)))
+    .map(([chainId, networkInfo]) => ({
+      label: networkInfo.label,
+      value: parseInt(chainId),
+    }));
+
+  const fetchGasEstimates = async () => {
+    const estimates: GasEstimates = {};
+    for (const option of networkOptions) {
+      try {
+        const response = await axios.get(
+          `https://api.blocknative.com/gasprices/blockprices?chainid=${option.value}`
+        );
+        const data = response.data
+        const estimatedGas =
+          data?.blockPrices[0]?.estimatedPrices[0]?.maxFeePerGas;
+        estimates[option.value] = estimatedGas || "Unavailable";
+      } catch (error) {
+        estimates[option.value] = "Error fetching";
+      }
+    }
+    setGasEstimates(estimates);
+  }
+
+  useEffect(() => {
+    fetchGasEstimates();
+  }, []);
+
+  if (!suckers || suckers.length <= 1) return null;
+
+  return (
+    <div className="py-6 flex flex-col gap-3">
+      <span className="font-medium">
+        <Trans>Chain selection</Trans>
+      </span>
+
+      <span className="text-grey-500 dark:text-slate-200">
+        <strong>{receivedTokenSymbolText}</strong> is available on multiple chains.
+      </span>
+
+      <JuiceListbox
+        value={{
+          label: defaultChainId
+            ? NETWORKS[values.chainId ?? defaultChainId]?.label
+            : "",
+          value: values.chainId,
+        }}
+        onChange={({ value }) => {
+          if (!value) return;
+          setFieldValue?.("chainId", value);
+        }}
+        options={networkOptions.map((option) => ({
+          ...option,
+          label: `${option.label} - Gas: ${
+            gasEstimates[option.value] || "Loading..."
+          }`,
+        }))}
+      />
+    </div>
+  );
+};
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectModal.ts b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectModal.ts
index 6d3538dbd0..c262e0664e 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectModal.ts
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectModal.ts
@@ -1,23 +1,25 @@
-import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
-import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
-import { useWallet } from 'hooks/Wallet'
-import { useCurrencyConverter } from 'hooks/useCurrencyConverter'
-import { NATIVE_TOKEN_DECIMALS } from 'juice-sdk-core'
-import { TxStatus } from 'models/transaction'
+import * as Yup from 'yup'
+
+import { V4_CURRENCY_ETH, V4_CURRENCY_USD } from 'packages/v4/utils/currency'
+import { formatEther, parseUnits } from 'viem'
+import { useCallback, useContext, useMemo, useReducer } from 'react'
 import {
   useProjectDispatch,
   useProjectSelector,
 } from 'packages/v4/components/ProjectDashboard/redux/hooks'
-import { projectCartActions } from 'packages/v4/components/ProjectDashboard/redux/projectCartSlice'
-import { V4_CURRENCY_ETH, V4_CURRENCY_USD } from 'packages/v4/utils/currency'
-import { formatCurrencyAmount } from 'packages/v4/utils/formatCurrencyAmount'
-import { useProjectPageQueries } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
-import { useCallback, useContext, useMemo, useReducer } from 'react'
+
+import { NATIVE_TOKEN_DECIMALS } from 'juice-sdk-core'
+import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
+import { TxStatus } from 'models/transaction'
 import { emitErrorNotification } from 'utils/notifications'
-import { formatEther, parseUnits } from 'viem'
-import * as Yup from 'yup'
+import { formatCurrencyAmount } from 'packages/v4/utils/formatCurrencyAmount'
 import { payProjectModalReducer } from './payProjectModalReducer'
+import { projectCartActions } from 'packages/v4/components/ProjectDashboard/redux/projectCartSlice'
+import { useCurrencyConverter } from 'hooks/useCurrencyConverter'
 import { usePayProjectTx } from './usePayProjectTx'
+import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
+import { useProjectPageQueries } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
+import { useWallet } from 'hooks/Wallet'
 
 const ValidationSchema = Yup.object().shape({
   message: Yup.object().shape({
@@ -29,6 +31,7 @@ const ValidationSchema = Yup.object().shape({
     'You must accept the terms and conditions',
   ),
   beneficiaryAddress: Yup.string(),
+  chainId: Yup.number()
 })
 
 const getValidationSchema = (projectHasPayNotice: boolean) =>
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
index 7116194971..0868513c33 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
@@ -1,27 +1,29 @@
-import { waitForTransactionReceipt } from '@wagmi/core'
-import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
-import { FormikHelpers } from 'formik'
-import { useWallet } from 'hooks/Wallet'
-import { useCurrencyConverter } from 'hooks/useCurrencyConverter'
+import { Address, Hash, parseEther } from 'viem'
 import { DEFAULT_METADATA, NATIVE_TOKEN } from 'juice-sdk-core'
+import { useCallback, useContext, useMemo } from 'react'
 import {
+  useJBChainId,
   useJBContractContext,
   useJBRulesetContext,
   usePreparePayMetadata,
   useWriteJbMultiTerminalPay,
 } from 'juice-sdk-react'
+
+import { FormikHelpers } from 'formik'
+import { PayProjectModalFormValues } from './usePayProjectModal'
+import { ProjectPayReceipt } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
+import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
+import { V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
+import { buildPaymentMemo } from 'utils/buildPaymentMemo'
+import { useCurrencyConverter } from 'hooks/useCurrencyConverter'
+import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
+import { useProjectPaymentTokens } from '../useProjectPaymentTokens'
 import { useProjectSelector } from 'packages/v4/components/ProjectDashboard/redux/hooks'
 import { useV4NftRewards } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
 import { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
-import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
-import { V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
-import { ProjectPayReceipt } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
+import { useWallet } from 'hooks/Wallet'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
-import { useCallback, useContext, useMemo } from 'react'
-import { buildPaymentMemo } from 'utils/buildPaymentMemo'
-import { Address, Hash, parseEther } from 'viem'
-import { useProjectPaymentTokens } from '../useProjectPaymentTokens'
-import { PayProjectModalFormValues } from './usePayProjectModal'
+import { waitForTransactionReceipt } from '@wagmi/core'
 
 export const usePayProjectTx = ({
   onTransactionPending: onTransactionPendingCallback,
@@ -49,6 +51,8 @@ export const usePayProjectTx = ({
     nftRewards: { rewardTiers },
   } = useV4NftRewards()
   const converter = useCurrencyConverter()
+  const defaultChainId = useJBChainId()
+
   const { receivedTickets } = useProjectPaymentTokens()
   // TODO: is this needed for preferClaimedTokens?
   const projectHasErc20 = useProjectHasErc20Token()
@@ -117,7 +121,8 @@ export const usePayProjectTx = ({
       if (
         !contracts.primaryNativeTerminal.data ||
         !userAddress ||
-        !values.userAcceptsTerms
+        !values.userAcceptsTerms ||
+        !values.chainId
       ) {
         return
       }
@@ -135,6 +140,8 @@ export const usePayProjectTx = ({
           .filter((url): url is string => !!url),
       })
       const beneficiary = (values.beneficiaryAddress ?? userAddress) as Address
+      const chainId = values.chainId || defaultChainId
+      
       const args = [
         projectId,
         NATIVE_TOKEN,
@@ -153,6 +160,7 @@ export const usePayProjectTx = ({
       // })
       try {
         const hash = await writePay({
+          chainId,
           address: contracts.primaryNativeTerminal.data,
           args,
           value: weiAmount,
diff --git a/src/packages/v4/models/suckers.ts b/src/packages/v4/models/suckers.ts
new file mode 100644
index 0000000000..68b4a6cf74
--- /dev/null
+++ b/src/packages/v4/models/suckers.ts
@@ -0,0 +1,6 @@
+
+// v4TODO: move to SDK
+export type Sucker = {
+  peerChainId: number; // should be JBChainId?
+  projectId: bigint;
+}
\ No newline at end of file
diff --git a/src/packages/v4/utils/networks.ts b/src/packages/v4/utils/networks.ts
index c06ad5e88f..6c051612b5 100644
--- a/src/packages/v4/utils/networks.ts
+++ b/src/packages/v4/utils/networks.ts
@@ -1,4 +1,5 @@
 import { JBChainId } from 'juice-sdk-react'
+import { TESTNET_IDS } from 'constants/networks'
 
 export const chainNameMap: Record<string, JBChainId> = {
   sepolia: 11_155_111, //sepolia.id,
@@ -10,3 +11,7 @@ export const chainNameMap: Record<string, JBChainId> = {
 export function getChainName(chainId: number) {
   return Object.entries(chainNameMap).find(([, id]) => id === chainId)?.[0]
 }
+
+export function isTestnet(chainId: number) {
+  return TESTNET_IDS.has(chainId)
+}
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx
index ce91676e82..886015608e 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx
@@ -1,25 +1,26 @@
-import { Cog6ToothIcon } from '@heroicons/react/24/outline'
-import { Trans } from '@lingui/macro'
 import { Button, Divider } from 'antd'
+import { settingsPagePath, v4ProjectRoute } from 'packages/v4/utils/routes'
+
 import { Badge } from 'components/Badge'
+import { Cog6ToothIcon } from '@heroicons/react/24/outline'
 import EthereumAddress from 'components/EthereumAddress'
 import { GnosisSafeBadge } from 'components/Project/ProjectHeader/GnosisSafeBadge'
-import { useSocialLinks } from 'components/Project/ProjectHeader/hooks/useSocialLinks'
+import Link from 'next/link'
 import { ProjectHeaderLogo } from 'components/Project/ProjectHeader/ProjectHeaderLogo'
+import { ProjectHeaderPopupMenu } from 'packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu'
+import { ProjectHeaderStats } from './ProjectHeaderStats'
 import { SocialLinkButton } from 'components/Project/ProjectHeader/SocialLinkButton'
+import { Trans } from '@lingui/macro'
 // import { Subtitle } from 'components/Project/ProjectHeader/Subtitle'
 import { TruncatedText } from 'components/TruncatedText'
-import useMobile from 'hooks/useMobile'
-import { useJBChainId } from 'juice-sdk-react'
-import Link from 'next/link'
-import { ProjectHeaderPopupMenu } from 'packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu'
-import V4ProjectHandleLink from 'packages/v4/components/V4ProjectHandleLink'
-import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
 import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
-import { settingsPagePath, v4ProjectRoute } from 'packages/v4/utils/routes'
+import V4ProjectHandleLink from 'packages/v4/components/V4ProjectHandleLink'
 import { twMerge } from 'tailwind-merge'
+import { useJBChainId } from 'juice-sdk-react'
+import useMobile from 'hooks/useMobile'
+import { useSocialLinks } from 'components/Project/ProjectHeader/hooks/useSocialLinks'
 import { useV4ProjectHeader } from './hooks/useV4ProjectHeader'
-import { ProjectHeaderStats } from './ProjectHeaderStats'
+import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
 
 export type SocialLink = 'twitter' | 'discord' | 'telegram' | 'website'
 
@@ -74,7 +75,7 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
                   ))}
               </div>
               <ProjectHeaderPopupMenu projectId={projectId} />
-              {canQueueRuleSets && (
+              {canQueueRuleSets && chainId && (
                 <Link
                   href={settingsPagePath({ projectId, chainId }, undefined)}
                   legacyBehavior
@@ -127,7 +128,7 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
                 <Trans>
                   Owned by: <EthereumAddress address={owner} />
                 </Trans>
-                {gnosisSafe && projectId && (
+                {gnosisSafe && projectId && chainId && (
                   <GnosisSafeBadge
                     safe={gnosisSafe}
                     href={`${v4ProjectRoute({ projectId, chainId })}/safe`}
diff --git a/src/packages/v4/views/V4ProjectSettings/ProjectSettingsLayout.tsx b/src/packages/v4/views/V4ProjectSettings/ProjectSettingsLayout.tsx
index 44bfb2ca13..54ac686949 100644
--- a/src/packages/v4/views/V4ProjectSettings/ProjectSettingsLayout.tsx
+++ b/src/packages/v4/views/V4ProjectSettings/ProjectSettingsLayout.tsx
@@ -1,7 +1,8 @@
 import { Cog6ToothIcon, XMarkIcon } from '@heroicons/react/24/solid'
-import { Trans } from '@lingui/macro'
 import { useJBChainId, useJBContractContext } from 'juice-sdk-react'
+
 import Link from 'next/link'
+import { Trans } from '@lingui/macro'
 import { v4ProjectRoute } from 'packages/v4/utils/routes'
 
 export const ProjectSettingsLayout: React.FC<React.PropsWithChildren> = ({
@@ -18,13 +19,14 @@ export const ProjectSettingsLayout: React.FC<React.PropsWithChildren> = ({
             <Cog6ToothIcon className="h-6 w-6" />
             <Trans>Manage project</Trans>
           </h1>
-
-          <Link
-            href={v4ProjectRoute({ projectId: Number(projectId), chainId })}
-            className="text-secondary"
-          >
-            <XMarkIcon className="h-6 w-6" />
-          </Link>
+          {chainId ?
+            <Link
+              href={v4ProjectRoute({ projectId: Number(projectId), chainId })}
+              className="text-secondary"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </Link>
+          : null}
         </div>
       </header>
 
diff --git a/src/packages/v4/views/V4ProjectSettings/hooks/useSettingsPagePath.ts b/src/packages/v4/views/V4ProjectSettings/hooks/useSettingsPagePath.ts
index 908fce024a..f419e1673b 100644
--- a/src/packages/v4/views/V4ProjectSettings/hooks/useSettingsPagePath.ts
+++ b/src/packages/v4/views/V4ProjectSettings/hooks/useSettingsPagePath.ts
@@ -1,10 +1,15 @@
 import { useJBChainId, useJBContractContext } from 'juice-sdk-react'
-import { settingsPagePath } from 'packages/v4/utils/routes'
+
 import { SettingsPageKey } from '../ProjectSettingsDashboard'
+import { settingsPagePath } from 'packages/v4/utils/routes'
 
 export function useSettingsPagePath(key?: SettingsPageKey) {
   const { projectId } = useJBContractContext()
   const chainId = useJBChainId()
 
+  if (!projectId || !chainId) {
+    return ''
+  }
+
   return settingsPagePath({ projectId: Number(projectId), chainId }, key)
 }

From 53411b08cf3cf06cb3a45b64c5225f21f262df1c Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:29:42 +1000
Subject: [PATCH 07/21] feat: terminalstore v4 endpoint

---
 .../[terminalAddress]/jb-terminal-store.ts    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts

diff --git a/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts b/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts
new file mode 100644
index 0000000000..bbcf8fd07d
--- /dev/null
+++ b/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts
@@ -0,0 +1,48 @@
+import { readJbMultiTerminalStore } from 'juice-sdk-core'
+import { JBChainId } from 'juice-sdk-react'
+import { enableCors } from 'lib/api/nextjs'
+import { getLogger } from 'lib/logger'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { version } from 'os'
+import { wagmiConfig } from 'packages/v4/wagmiConfig'
+import { Address } from 'viem'
+
+const logger = getLogger('api/v4/terminal/[terminalAddress]/jb-terminal-store')
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  enableCors(res)
+
+  if (req.method !== 'GET') {
+    return res.status(405).end()
+  }
+
+  try {
+    const { terminalAddress } = req.query
+    const chainId = Number(req.query.chainId as string) as JBChainId
+
+    if (!terminalAddress || !chainId) {
+      return res
+        .status(400)
+        .json({ error: 'terminalAddress and chainId is required' })
+    }
+
+    const terminalStoreAddress = await readJbMultiTerminalStore(wagmiConfig, {
+      chainId,
+      address: terminalAddress as Address,
+    })
+
+    // cache for 1 week
+    res.setHeader(
+      'Cache-Control',
+      `s-maxage=${86400 * 7}, stale-while-revalidate`,
+    )
+    const data = { version, terminalStoreAddress }
+    logger.info({ data })
+    return res.status(200).json(data)
+  } catch (err) {
+    logger.error({ error: err })
+    return res.status(500).json({ error: 'failed to resolve terminal store' })
+  }
+}
+
+export default handler

From ea09938cfda0d8927267a640e703bc434b5181fa Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:32:15 +1000
Subject: [PATCH 08/21] asd

---
 .../v4/terminal/[terminalAddress]/jb-terminal-store.ts         | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts b/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts
index bbcf8fd07d..338b7c01ad 100644
--- a/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts
+++ b/src/pages/api/juicebox/v4/terminal/[terminalAddress]/jb-terminal-store.ts
@@ -3,7 +3,6 @@ import { JBChainId } from 'juice-sdk-react'
 import { enableCors } from 'lib/api/nextjs'
 import { getLogger } from 'lib/logger'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { version } from 'os'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
 import { Address } from 'viem'
 
@@ -36,7 +35,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       'Cache-Control',
       `s-maxage=${86400 * 7}, stale-while-revalidate`,
     )
-    const data = { version, terminalStoreAddress }
+    const data = { terminalStoreAddress }
     logger.info({ data })
     return res.status(200).json(data)
   } catch (err) {

From 5b03b7fe4a799212527a71503e2c43b87e5904e8 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:53:37 +1000
Subject: [PATCH 09/21] Add sucker-pairs endpoint

---
 .../v4/project/[projectId]/sucker-pairs.ts    | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts

diff --git a/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts b/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts
new file mode 100644
index 0000000000..ed8f9c3d69
--- /dev/null
+++ b/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts
@@ -0,0 +1,47 @@
+import { resolveSuckers } from 'juice-sdk-core'
+import { JBChainId } from 'juice-sdk-react'
+import { enableCors } from 'lib/api/nextjs'
+import { getLogger } from 'lib/logger'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { wagmiConfig } from 'packages/v4/wagmiConfig'
+
+const logger = getLogger('api/v4/project/[projectId]/sucker-pairs')
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  enableCors(res)
+
+  if (req.method !== 'GET') {
+    return res.status(405).end()
+  }
+
+  try {
+    const { projectId } = req.query
+    const chainId = Number(req.query.chainId as string) as JBChainId
+
+    if (!projectId || !chainId) {
+      return res
+        .status(400)
+        .json({ error: 'projectId and chainId is required' })
+    }
+
+    const suckers = await resolveSuckers({
+      config: wagmiConfig,
+      chainId,
+      projectId: BigInt(projectId as string),
+    })
+
+    // cache for 1 week
+    res.setHeader(
+      'Cache-Control',
+      `s-maxage=${86400 * 7}, stale-while-revalidate`,
+    )
+    const data = { suckers }
+    logger.info({ data })
+    return res.status(200).json(data)
+  } catch (err) {
+    logger.error({ error: err })
+    return res.status(500).json({ error: 'failed to resolve suckers' })
+  }
+}
+
+export default handler

From 2b467100095a19f8c870934b7467f2d134c5e173 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 14:58:21 +1000
Subject: [PATCH 10/21] Update v4 wagmi transports

---
 src/packages/v4/wagmiConfig.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/packages/v4/wagmiConfig.ts b/src/packages/v4/wagmiConfig.ts
index 58831225e0..2fe640cb86 100644
--- a/src/packages/v4/wagmiConfig.ts
+++ b/src/packages/v4/wagmiConfig.ts
@@ -13,13 +13,13 @@ export const wagmiConfig = createConfig({
       `https://sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`,
     ),
     [optimismSepolia.id]: http(
-      'https://sepolia.optimism.io'
+      `https://optimism-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`,
     ),
     [baseSepolia.id]: http(
-      `https://api.developer.coinbase.com/rpc/v1/base-sepolia/${process.env.NEXT_PUBLIC_BASE_ID}`,
+      `https://base-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`,
     ),
     [arbitrumSepolia.id]: http(
-      `https://sepolia-rollup.arbitrum.io/rpc`,
+      `https://arbitrum-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`,
     ),
   },
 })

From 1ce03e066740067a8bb34c41bf966ccbe5e1b78a Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:00:02 +1000
Subject: [PATCH 11/21] todo note base

---
 src/packages/v4/wagmiConfig.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/packages/v4/wagmiConfig.ts b/src/packages/v4/wagmiConfig.ts
index 2fe640cb86..cdf108a71b 100644
--- a/src/packages/v4/wagmiConfig.ts
+++ b/src/packages/v4/wagmiConfig.ts
@@ -15,6 +15,8 @@ export const wagmiConfig = createConfig({
     [optimismSepolia.id]: http(
       `https://optimism-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`,
     ),
+    // TODO maybe revert to       `https://api.developer.coinbase.com/rpc/v1/base-sepolia/${process.env.NEXT_PUBLIC_BASE_ID}`
+
     [baseSepolia.id]: http(
       `https://base-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`,
     ),

From f6d9c8b9c28fc0e6169dc47ae98f5205262e240f Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:09:56 +1000
Subject: [PATCH 12/21] sdk

---
 package.json |  4 ++--
 yarn.lock    | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 5c1a8e718d..e12eb64128 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^12.2.8-alpha",
-    "juice-sdk-react": "^12.2.9-alpha",
+    "juice-sdk-core": "^12.2.9-alpha",
+    "juice-sdk-react": "^12.2.11-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
diff --git a/yarn.lock b/yarn.lock
index 077ef646fa..dba10bd14b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12178,18 +12178,18 @@ jsx-ast-utils@^3.3.5:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-juice-sdk-core@^12.2.8-alpha:
-  version "12.2.8-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.8-alpha.tgz#0a4273051519bd35f0d45b704f64bc6a01952271"
-  integrity sha512-ZmSxuec7/5i7AuT2DUDgeGvXNbTPFHL3SS5dg6tgxL31wxc6Yp2sPN1s8nvy4ANbtG3G/SFypSCnlKRI18oTwA==
+juice-sdk-core@^12.2.9-alpha:
+  version "12.2.9-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.9-alpha.tgz#010f6a4d1b7a5bef7520f204e37340fdbe339aa4"
+  integrity sha512-qxZEusaxRSos9D1I0EmQfIGvDwbdtvedj7n6mhwdoV2JGOZjiXoubHwkpoddQoXsozGneWL0blPI3OYFv7/7OA==
   dependencies:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.9-alpha:
-  version "12.2.9-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.9-alpha.tgz#f37869621b9796a15ae0c887a89ea4377ced1811"
-  integrity sha512-kR3coJU9vYAXGZSvOHYyiSw5n2a9Fb38WANjhjysdiFLQsIJ08LFR4qIgrhwkMUXmzP18ImutivUh4sZbukl5g==
+juice-sdk-react@^12.2.11-alpha:
+  version "12.2.11-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.11-alpha.tgz#e96334d30321c1a8561af38bcdde6c6609292d00"
+  integrity sha512-8dbnhyLDmumJjU3QWLO3iW+71z+11E47etctK/9+6q3Aa9VTMaMI9JoiyK4UpLDRWtPkO4Neu2oPN8HGZw36/Q==
 
 juice@^10.0.0:
   version "10.0.0"

From 9008ff12368e09113d112f281737a1ff0122de47 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:33:42 +1000
Subject: [PATCH 13/21] sdk again

---
 package.json |  4 ++--
 yarn.lock    | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index e12eb64128..a7c59cdb3f 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^12.2.9-alpha",
-    "juice-sdk-react": "^12.2.11-alpha",
+    "juice-sdk-core": "^12.2.10-alpha",
+    "juice-sdk-react": "^12.2.12-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
diff --git a/yarn.lock b/yarn.lock
index dba10bd14b..d4faca1bde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12178,18 +12178,18 @@ jsx-ast-utils@^3.3.5:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-juice-sdk-core@^12.2.9-alpha:
-  version "12.2.9-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.9-alpha.tgz#010f6a4d1b7a5bef7520f204e37340fdbe339aa4"
-  integrity sha512-qxZEusaxRSos9D1I0EmQfIGvDwbdtvedj7n6mhwdoV2JGOZjiXoubHwkpoddQoXsozGneWL0blPI3OYFv7/7OA==
+juice-sdk-core@^12.2.10-alpha:
+  version "12.2.10-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.10-alpha.tgz#38b7e4fda1352892ecacd5a9d87964bc52441ff8"
+  integrity sha512-VBNpxrJmNIG9+RqIYE0t3dyQEiLicmq+ChKUqxRzqS5Y84988HCbCtRwzq3pAlB/fjc7P9USYPYRmnPfBoC+GQ==
   dependencies:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.11-alpha:
-  version "12.2.11-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.11-alpha.tgz#e96334d30321c1a8561af38bcdde6c6609292d00"
-  integrity sha512-8dbnhyLDmumJjU3QWLO3iW+71z+11E47etctK/9+6q3Aa9VTMaMI9JoiyK4UpLDRWtPkO4Neu2oPN8HGZw36/Q==
+juice-sdk-react@^12.2.12-alpha:
+  version "12.2.12-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.12-alpha.tgz#86556bd8355226fca6fea1773f67eca2d3c79f54"
+  integrity sha512-wM1yTcF4VxTZ82aUlm/HTcrI+JBz9ebbgf5uBLjLZk/T1bKO0xOGc6wIZD0MQMIR8AOnCEWvTi7VryDZDSpo4A==
 
 juice@^10.0.0:
   version "10.0.0"

From 4aad9e9bf2f262add4c92451de1598cd316d0d4a Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 21:10:33 +1000
Subject: [PATCH 14/21] serialize bigint

---
 .../api/juicebox/v4/project/[projectId]/sucker-pairs.ts  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts b/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts
index ed8f9c3d69..287d18e39e 100644
--- a/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts
+++ b/src/pages/api/juicebox/v4/project/[projectId]/sucker-pairs.ts
@@ -35,7 +35,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       'Cache-Control',
       `s-maxage=${86400 * 7}, stale-while-revalidate`,
     )
-    const data = { suckers }
+    const data = {
+      suckers: suckers.map(s => {
+        return {
+          ...s,
+          projectId: Number(s.projectId),
+        }
+      }),
+    }
     logger.info({ data })
     return res.status(200).json(data)
   } catch (err) {

From 2a2e72d24bc035c5c0985b5d467d6115f1843e84 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Fri, 3 Jan 2025 22:55:19 +1000
Subject: [PATCH 15/21] Update suckers query

---
 package.json                                  |  2 +-
 .../components/ChainSelectSection.tsx         | 77 ++++++++++---------
 src/packages/v4/models/suckers.ts             |  6 --
 yarn.lock                                     |  8 +-
 4 files changed, 45 insertions(+), 48 deletions(-)
 delete mode 100644 src/packages/v4/models/suckers.ts

diff --git a/package.json b/package.json
index a7c59cdb3f..8df3aad04c 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
     "juice-sdk-core": "^12.2.10-alpha",
-    "juice-sdk-react": "^12.2.12-alpha",
+    "juice-sdk-react": "^12.2.14-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
index 8b6793dd10..2998bf56ae 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
@@ -1,88 +1,91 @@
-import { useEffect, useState } from "react";
-import { useJBChainId, useSuckers } from "juice-sdk-react";
+import { useJBChainId, useSuckers } from 'juice-sdk-react'
+import { useEffect, useState } from 'react'
 
-import { JuiceListbox } from "components/inputs/JuiceListbox";
-import { NETWORKS } from "constants/networks";
-import { PayProjectModalFormValues } from "../hooks/usePayProjectModal/usePayProjectModal";
-import { Sucker } from "packages/v4/models/suckers";
-import { Trans } from "@lingui/macro";
-import axios from "axios";
-import { useFormikContext } from "formik";
-import { useProjectPaymentTokens } from "../hooks/useProjectPaymentTokens";
+import { Trans } from '@lingui/macro'
+import axios from 'axios'
+import { JuiceListbox } from 'components/inputs/JuiceListbox'
+import { NETWORKS } from 'constants/networks'
+import { useFormikContext } from 'formik'
+import { SuckerPair } from 'juice-sdk-core'
+import { PayProjectModalFormValues } from '../hooks/usePayProjectModal/usePayProjectModal'
+import { useProjectPaymentTokens } from '../hooks/useProjectPaymentTokens'
 
-type GasEstimates = Record<number, string>;
+type GasEstimates = Record<number, string>
 
 export const ChainSelectSection = () => {
-  const [gasEstimates, setGasEstimates] = useState<GasEstimates>({});
+  const [gasEstimates, setGasEstimates] = useState<GasEstimates>({})
 
-  const { receivedTokenSymbolText } = useProjectPaymentTokens();
+  const { receivedTokenSymbolText } = useProjectPaymentTokens()
 
-  const { data: suckers } = useSuckers() as { data: Sucker[] | undefined }
+  const suckersQuery = useSuckers()
+  const suckers = (suckersQuery.data as { suckers: SuckerPair[] | null })
+    ?.suckers
 
-  const defaultChainId = useJBChainId();
+  const defaultChainId = useJBChainId()
   const { values, setFieldValue } =
-    useFormikContext<PayProjectModalFormValues>();
+    useFormikContext<PayProjectModalFormValues>()
 
-  const allowedChainIds = new Set(suckers?.map((sucker) => sucker.peerChainId));
+  const allowedChainIds = new Set(suckers?.map(sucker => sucker.peerChainId))
   const networkOptions = Object.entries(NETWORKS)
     .filter(([chainId]) => allowedChainIds.has(parseInt(chainId)))
     .map(([chainId, networkInfo]) => ({
       label: networkInfo.label,
       value: parseInt(chainId),
-    }));
+    }))
 
   const fetchGasEstimates = async () => {
-    const estimates: GasEstimates = {};
+    const estimates: GasEstimates = {}
     for (const option of networkOptions) {
       try {
         const response = await axios.get(
-          `https://api.blocknative.com/gasprices/blockprices?chainid=${option.value}`
-        );
+          `https://api.blocknative.com/gasprices/blockprices?chainid=${option.value}`,
+        )
         const data = response.data
         const estimatedGas =
-          data?.blockPrices[0]?.estimatedPrices[0]?.maxFeePerGas;
-        estimates[option.value] = estimatedGas || "Unavailable";
+          data?.blockPrices[0]?.estimatedPrices[0]?.maxFeePerGas
+        estimates[option.value] = estimatedGas || 'Unavailable'
       } catch (error) {
-        estimates[option.value] = "Error fetching";
+        estimates[option.value] = 'Error fetching'
       }
     }
-    setGasEstimates(estimates);
+    setGasEstimates(estimates)
   }
 
   useEffect(() => {
-    fetchGasEstimates();
-  }, []);
+    fetchGasEstimates()
+  }, [])
 
-  if (!suckers || suckers.length <= 1) return null;
+  if (!suckers || suckers.length <= 1) return null
 
   return (
-    <div className="py-6 flex flex-col gap-3">
+    <div className="flex flex-col gap-3 py-6">
       <span className="font-medium">
         <Trans>Chain selection</Trans>
       </span>
 
       <span className="text-grey-500 dark:text-slate-200">
-        <strong>{receivedTokenSymbolText}</strong> is available on multiple chains.
+        <strong>{receivedTokenSymbolText}</strong> is available on multiple
+        chains.
       </span>
 
       <JuiceListbox
         value={{
           label: defaultChainId
             ? NETWORKS[values.chainId ?? defaultChainId]?.label
-            : "",
+            : '',
           value: values.chainId,
         }}
         onChange={({ value }) => {
-          if (!value) return;
-          setFieldValue?.("chainId", value);
+          if (!value) return
+          setFieldValue?.('chainId', value)
         }}
-        options={networkOptions.map((option) => ({
+        options={networkOptions.map(option => ({
           ...option,
           label: `${option.label} - Gas: ${
-            gasEstimates[option.value] || "Loading..."
+            gasEstimates[option.value] || 'Loading...'
           }`,
         }))}
       />
     </div>
-  );
-};
+  )
+}
diff --git a/src/packages/v4/models/suckers.ts b/src/packages/v4/models/suckers.ts
deleted file mode 100644
index 68b4a6cf74..0000000000
--- a/src/packages/v4/models/suckers.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-
-// v4TODO: move to SDK
-export type Sucker = {
-  peerChainId: number; // should be JBChainId?
-  projectId: bigint;
-}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index d4faca1bde..26c2b0cf36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12186,10 +12186,10 @@ juice-sdk-core@^12.2.10-alpha:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.12-alpha:
-  version "12.2.12-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.12-alpha.tgz#86556bd8355226fca6fea1773f67eca2d3c79f54"
-  integrity sha512-wM1yTcF4VxTZ82aUlm/HTcrI+JBz9ebbgf5uBLjLZk/T1bKO0xOGc6wIZD0MQMIR8AOnCEWvTi7VryDZDSpo4A==
+juice-sdk-react@^12.2.14-alpha:
+  version "12.2.14-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.14-alpha.tgz#812b9f25fef2660014d002f7b06ed388918c404f"
+  integrity sha512-Fu6HpWol4w5rHj9pHCm8SeEmUEWBugvtmMNzxvKJP0xYBSUiJuI9GfnysU3NdT1Bngb3Bt/h5OBziNDkX+5QeQ==
 
 juice@^10.0.0:
   version "10.0.0"

From 3943d726ed17a0353ef966b1366596ef2c052a5e Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Sat, 4 Jan 2025 13:05:14 +1000
Subject: [PATCH 16/21] bump sdk

---
 package.json                                     |  4 ++--
 .../pages/NftRewards/NftRewardsPage.tsx          |  4 ++--
 .../components/RewardsReview/RewardsReview.tsx   |  4 ++--
 .../components/ChainSelectSection.tsx            |  4 +---
 src/packages/v4/contexts/V4SettingsProvider.tsx  |  2 +-
 src/packages/v4/hooks/useCurrentRouteChainId.ts  |  4 ++--
 src/packages/v4/utils/networks.ts                | 11 ++---------
 .../V4ProjectDashboard/V4ProjectProviders.tsx    |  5 ++---
 .../LaunchNftCollection/LaunchNftsCollection.tsx |  4 ++--
 .../UpdateNftsPage/EditNftsSection.tsx           |  8 +++++---
 src/utils/server/v4Metadata.ts                   |  7 ++++---
 yarn.lock                                        | 16 ++++++++--------
 12 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 8df3aad04c..da49a69a08 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^12.2.10-alpha",
-    "juice-sdk-react": "^12.2.14-alpha",
+    "juice-sdk-core": "^12.4.0-alpha",
+    "juice-sdk-react": "^12.4.1-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",
diff --git a/src/packages/v4/components/Create/components/pages/NftRewards/NftRewardsPage.tsx b/src/packages/v4/components/Create/components/pages/NftRewards/NftRewardsPage.tsx
index 3b785511cb..568c3b3ce7 100644
--- a/src/packages/v4/components/Create/components/pages/NftRewards/NftRewardsPage.tsx
+++ b/src/packages/v4/components/Create/components/pages/NftRewards/NftRewardsPage.tsx
@@ -1,6 +1,6 @@
 import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm/AddNftCollectionForm'
 import { CREATE_FLOW } from 'constants/fathomEvents'
-import { JBChainId, NATIVE_TOKEN_SYMBOLS } from 'juice-sdk-core'
+import { JB_CHAINS, JBChainId } from 'juice-sdk-core'
 import { trackFathomGoal } from 'lib/fathom'
 import { useContext } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
@@ -33,7 +33,7 @@ export function NftRewardsPage() {
       postPayModalData={postPayModalData}
       nftRewardsData={nftRewardsData}
       okButton={<Wizard.Page.ButtonControl />}
-      priceCurrencySymbol={NATIVE_TOKEN_SYMBOLS[chainId as JBChainId]}
+      priceCurrencySymbol={JB_CHAINS[chainId as JBChainId].nativeTokenSymbol}
       onFinish={() => {
         goToNextPage?.()
         trackFathomGoal(CREATE_FLOW.NFT_NEXT_CTA)
diff --git a/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/RewardsReview/RewardsReview.tsx b/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/RewardsReview/RewardsReview.tsx
index 975f4486a7..432e521eb0 100644
--- a/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/RewardsReview/RewardsReview.tsx
+++ b/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/RewardsReview/RewardsReview.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro'
 import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
-import { JBChainId, NATIVE_TOKEN_SYMBOLS } from 'juice-sdk-core'
+import { JB_CHAINS, JBChainId } from 'juice-sdk-core'
 import { NftRewardTier } from 'models/nftRewards'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
@@ -72,7 +72,7 @@ export const RewardsReview = () => {
   return (
     <div className="flex flex-col gap-12">
       <RewardsList
-        priceCurrencySymbol={NATIVE_TOKEN_SYMBOLS[chainId as JBChainId]}
+        priceCurrencySymbol={JB_CHAINS[chainId as JBChainId].nativeTokenSymbol}
         nftRewardsData={nftRewardsData}
         value={rewards}
         onChange={setRewards}
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
index 2998bf56ae..9e3396d0f6 100644
--- a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
+++ b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx
@@ -6,7 +6,6 @@ import axios from 'axios'
 import { JuiceListbox } from 'components/inputs/JuiceListbox'
 import { NETWORKS } from 'constants/networks'
 import { useFormikContext } from 'formik'
-import { SuckerPair } from 'juice-sdk-core'
 import { PayProjectModalFormValues } from '../hooks/usePayProjectModal/usePayProjectModal'
 import { useProjectPaymentTokens } from '../hooks/useProjectPaymentTokens'
 
@@ -18,8 +17,7 @@ export const ChainSelectSection = () => {
   const { receivedTokenSymbolText } = useProjectPaymentTokens()
 
   const suckersQuery = useSuckers()
-  const suckers = (suckersQuery.data as { suckers: SuckerPair[] | null })
-    ?.suckers
+  const suckers = suckersQuery.data
 
   const defaultChainId = useJBChainId()
   const { values, setFieldValue } =
diff --git a/src/packages/v4/contexts/V4SettingsProvider.tsx b/src/packages/v4/contexts/V4SettingsProvider.tsx
index d07268761b..a230c34484 100644
--- a/src/packages/v4/contexts/V4SettingsProvider.tsx
+++ b/src/packages/v4/contexts/V4SettingsProvider.tsx
@@ -19,7 +19,7 @@ export const V4SettingsProvider: React.FC<React.PropsWithChildren> = ({
   const chainId = useCurrentRouteChainId()
 
   const { projectId: rawProjectId } = router.query
-  if (!rawProjectId) return null
+  if (!rawProjectId || !chainId) return null
 
   const projectId = parseInt(rawProjectId as string)
   const projectIdBigInt = BigInt(projectId)
diff --git a/src/packages/v4/hooks/useCurrentRouteChainId.ts b/src/packages/v4/hooks/useCurrentRouteChainId.ts
index ce35621834..6df05b37f1 100644
--- a/src/packages/v4/hooks/useCurrentRouteChainId.ts
+++ b/src/packages/v4/hooks/useCurrentRouteChainId.ts
@@ -1,9 +1,9 @@
+import { JB_CHAIN_SLUGS, JBChainId } from 'juice-sdk-core'
 import { useRouter } from 'next/router'
-import { chainNameMap } from '../utils/networks'
 
 export function useCurrentRouteChainId() {
   const router = useRouter()
   const { chainName } = router.query
 
-  return chainNameMap[chainName as string]
+  return JB_CHAIN_SLUGS[chainName as string].chain.id as JBChainId | undefined
 }
diff --git a/src/packages/v4/utils/networks.ts b/src/packages/v4/utils/networks.ts
index 6c051612b5..af32cdaedc 100644
--- a/src/packages/v4/utils/networks.ts
+++ b/src/packages/v4/utils/networks.ts
@@ -1,15 +1,8 @@
-import { JBChainId } from 'juice-sdk-react'
 import { TESTNET_IDS } from 'constants/networks'
-
-export const chainNameMap: Record<string, JBChainId> = {
-  sepolia: 11_155_111, //sepolia.id,
-  opsepolia: 11155420, // optimismSepolia.id,
-  basesepolia: 84532, // baseSepolia.id,
-  arbsepolia: 421_614, // arbitrumSepolia.id,
-}
+import { JB_CHAINS, JBChainId } from 'juice-sdk-core'
 
 export function getChainName(chainId: number) {
-  return Object.entries(chainNameMap).find(([, id]) => id === chainId)?.[0]
+  return JB_CHAINS[chainId as JBChainId].name
 }
 
 export function isTestnet(chainId: number) {
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx
index bd305f0437..afc0209062 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectProviders.tsx
@@ -1,5 +1,6 @@
 import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { OPEN_IPFS_GATEWAY_HOSTNAME } from 'constants/ipfs'
+import { JB_CHAIN_SLUGS } from 'juice-sdk-core'
 import { JBChainId, JBProjectProvider } from 'juice-sdk-react'
 import { ReduxProjectCartProvider } from 'packages/v4/components/ProjectDashboard/ReduxProjectCartProvider'
 import store from 'packages/v4/components/ProjectDashboard/redux/store'
@@ -7,16 +8,14 @@ import { V4NftRewardsProvider } from 'packages/v4/contexts/V4NftRewards/V4NftRew
 import V4ProjectMetadataProvider from 'packages/v4/contexts/V4ProjectMetadataProvider'
 import { V4UserNftCreditsProvider } from 'packages/v4/contexts/V4UserNftCreditsProvider'
 import { V4UserTotalTokensBalanceProvider } from 'packages/v4/contexts/V4UserTotalTokensBalanceProvider'
-import { chainNameMap } from 'packages/v4/utils/networks'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
 import React, { PropsWithChildren } from 'react'
 import { Provider } from 'react-redux'
 import { WagmiProvider } from 'wagmi'
-
 const V4ProjectProviders: React.FC<
   PropsWithChildren & { chainName: string; projectId: bigint }
 > = ({ chainName, projectId, children }) => {
-  const chainId = chainNameMap[chainName] as JBChainId
+  const chainId = JB_CHAIN_SLUGS[chainName].chain.id as JBChainId
 
   return (
     <AppWrapper txHistoryProvider="wagmi">
diff --git a/src/packages/v4/views/V4ProjectSettings/EditNftsPage/LaunchNftCollection/LaunchNftsCollection.tsx b/src/packages/v4/views/V4ProjectSettings/EditNftsPage/LaunchNftCollection/LaunchNftsCollection.tsx
index 31bb7435d0..2deaa90074 100644
--- a/src/packages/v4/views/V4ProjectSettings/EditNftsPage/LaunchNftCollection/LaunchNftsCollection.tsx
+++ b/src/packages/v4/views/V4ProjectSettings/EditNftsPage/LaunchNftCollection/LaunchNftsCollection.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Button } from 'antd'
 import TransactionModal from 'components/modals/TransactionModal'
 import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm/AddNftCollectionForm'
-import { JBChainId, NATIVE_TOKEN_SYMBOLS } from 'juice-sdk-core'
+import { JB_CHAINS, JBChainId } from 'juice-sdk-core'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useChainId } from 'wagmi'
 import { TransactionSuccessModal } from '../../EditCyclePage/TransactionSuccessModal'
@@ -30,7 +30,7 @@ export function LaunchNftsPage() {
     <>
       <AddNftCollectionForm
         form={form}
-        priceCurrencySymbol={NATIVE_TOKEN_SYMBOLS[chainId as JBChainId]}
+        priceCurrencySymbol={JB_CHAINS[chainId as JBChainId].nativeTokenSymbol}
         postPayModalData={postPayModalData}
         nftRewardsData={nftRewardsData}
         okButton={
diff --git a/src/packages/v4/views/V4ProjectSettings/EditNftsPage/UpdateNftsPage/EditNftsSection.tsx b/src/packages/v4/views/V4ProjectSettings/EditNftsPage/UpdateNftsPage/EditNftsSection.tsx
index 9338196ca0..b1c71b3554 100644
--- a/src/packages/v4/views/V4ProjectSettings/EditNftsPage/UpdateNftsPage/EditNftsSection.tsx
+++ b/src/packages/v4/views/V4ProjectSettings/EditNftsPage/UpdateNftsPage/EditNftsSection.tsx
@@ -1,10 +1,10 @@
-import { Trans, t } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { Button, Empty } from 'antd'
 import { Callout } from 'components/Callout/Callout'
 import Loading from 'components/Loading'
 import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
 import TransactionModal from 'components/modals/TransactionModal'
-import { JBChainId, NATIVE_TOKEN_SYMBOLS } from 'juice-sdk-core'
+import { JB_CHAINS, JBChainId } from 'juice-sdk-core'
 import { useHasNftRewards } from 'packages/v4/hooks/useHasNftRewards'
 import { useCallback, useState } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
@@ -71,7 +71,9 @@ export function EditNftsSection() {
 
       <div className="mb-8">
         <RewardsList
-          priceCurrencySymbol={NATIVE_TOKEN_SYMBOLS[chainId as JBChainId]}
+          priceCurrencySymbol={
+            JB_CHAINS[chainId as JBChainId].nativeTokenSymbol
+          }
           nftRewardsData={nftRewardsData}
           value={rewardTiers}
           onChange={setRewardTiers}
diff --git a/src/utils/server/v4Metadata.ts b/src/utils/server/v4Metadata.ts
index ede66ce8ee..38898f9c97 100644
--- a/src/utils/server/v4Metadata.ts
+++ b/src/utils/server/v4Metadata.ts
@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { getPublicClient } from '@wagmi/core'
 import {
+  JB_CHAIN_SLUGS,
   readJbDirectoryControllerOf,
   getProjectMetadata as sdkGetProjectMetadata,
 } from 'juice-sdk-core'
-import { chainNameMap } from 'packages/v4/utils/networks'
+import { JBChainId } from 'juice-sdk-react'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
 import { PublicClient } from 'viem'
-
 export const getV4ProjectMetadata = async (
   projectId: string | number,
   chain?: string | undefined,
@@ -25,7 +25,8 @@ const V4GetMetadataCidFromContract = async (
   projectId: number,
   chainName: string,
 ) => {
-  const chainId = chainNameMap[chainName]
+  const chainId = JB_CHAIN_SLUGS[chainName].chain.id as JBChainId | undefined
+  if (!chainId) throw new Error('Chain id not found for chain')
   const jbControllerAddress = await readJbDirectoryControllerOf(wagmiConfig, {
     chainId,
     args: [BigInt(projectId)],
diff --git a/yarn.lock b/yarn.lock
index 26c2b0cf36..b45eff205c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12178,18 +12178,18 @@ jsx-ast-utils@^3.3.5:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-juice-sdk-core@^12.2.10-alpha:
-  version "12.2.10-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.2.10-alpha.tgz#38b7e4fda1352892ecacd5a9d87964bc52441ff8"
-  integrity sha512-VBNpxrJmNIG9+RqIYE0t3dyQEiLicmq+ChKUqxRzqS5Y84988HCbCtRwzq3pAlB/fjc7P9USYPYRmnPfBoC+GQ==
+juice-sdk-core@^12.4.0-alpha:
+  version "12.4.0-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-core/-/juice-sdk-core-12.4.0-alpha.tgz#966283a87a0ba2fcfbf7499912e8fe3213557dbb"
+  integrity sha512-qL8YEoID45pm+levjtJ5jCThfkmqTvsNYKIpWr+z+Ij+lmWmRambVXvKp6SlYNqD7jp3F4s+uSmLDEZEeYaDpw==
   dependencies:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.14-alpha:
-  version "12.2.14-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.14-alpha.tgz#812b9f25fef2660014d002f7b06ed388918c404f"
-  integrity sha512-Fu6HpWol4w5rHj9pHCm8SeEmUEWBugvtmMNzxvKJP0xYBSUiJuI9GfnysU3NdT1Bngb3Bt/h5OBziNDkX+5QeQ==
+juice-sdk-react@^12.4.1-alpha:
+  version "12.4.1-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.4.1-alpha.tgz#e63bafd1e21e0d30bf1e47f9f6a45b6f323747ff"
+  integrity sha512-9jqxaprt2+DQiz3drSEdidbdLS4C5DTyUHGqLsQEVbPSwH2PjO2WTr8HbVMtMcRdtdZrytDRCSkJdMOPtmg3BQ==
 
 juice@^10.0.0:
   version "10.0.0"

From 091fbe65d28e7c13529576ce111a4665c104ef16 Mon Sep 17 00:00:00 2001
From: wraeth-eth <104132113+wraeth-eth@users.noreply.github.com>
Date: Mon, 6 Jan 2025 12:08:49 +1100
Subject: [PATCH 17/21] Fix: ensure chain slug is used over name for pathing
 (#4576)

---
 src/packages/v4/utils/networks.ts | 4 ++++
 src/packages/v4/utils/routes.ts   | 9 ++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/packages/v4/utils/networks.ts b/src/packages/v4/utils/networks.ts
index af32cdaedc..a5960e23e8 100644
--- a/src/packages/v4/utils/networks.ts
+++ b/src/packages/v4/utils/networks.ts
@@ -5,6 +5,10 @@ export function getChainName(chainId: number) {
   return JB_CHAINS[chainId as JBChainId].name
 }
 
+export function getChainSlug(chainId: number) {
+  return JB_CHAINS[chainId as JBChainId].slug
+}
+
 export function isTestnet(chainId: number) {
   return TESTNET_IDS.has(chainId)
 }
diff --git a/src/packages/v4/utils/routes.ts b/src/packages/v4/utils/routes.ts
index d7ce939c40..a6d0019150 100644
--- a/src/packages/v4/utils/routes.ts
+++ b/src/packages/v4/utils/routes.ts
@@ -1,5 +1,5 @@
 import { SettingsPageKey } from '../views/V4ProjectSettings/ProjectSettingsDashboard'
-import { getChainName } from './networks'
+import { getChainSlug } from './networks'
 
 export const v4ProjectRoute = ({
   chainId,
@@ -8,14 +8,14 @@ export const v4ProjectRoute = ({
   chainId: number
   projectId?: number
 }) => {
-  const chainName = getChainName(chainId)
-  return `/v4/${chainName}/p/${projectId?.toString()}`
+  const chainSlug = getChainSlug(chainId)
+  return `/v4/${chainSlug}/p/${projectId?.toString()}`
 }
 
 export const settingsPagePath = (
   {
     projectId,
-    chainId
+    chainId,
   }: {
     projectId: number
     chainId: number
@@ -27,4 +27,3 @@ export const settingsPagePath = (
     projectId,
   })}/settings/${settingsPage ?? ''}`
 }
-

From c357ec98758406ab51e3a8419b0d3cf54f5c1e0b Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Wed, 8 Jan 2025 08:05:57 +1000
Subject: [PATCH 18/21] feat: improve upcoming cycle start time for 0-duration
 cycles with non-0 ballots

---
 src/locales/messages.pot                      | 12 +++++-----
 .../components/CurrentUpcomingSubPanel.tsx    | 23 +++++++++----------
 .../useFormatConfigurationCyclesSection.ts    | 13 ++++++++---
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index 3aca333a37..bed1d3d5a3 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -563,9 +563,6 @@ msgstr ""
 msgid "I understand"
 msgstr ""
 
-msgid "This cycle has upcoming changes"
-msgstr ""
-
 msgid "<0/> Your project's rules cannot be edited during the first ruleset."
 msgstr ""
 
@@ -1343,6 +1340,9 @@ msgstr ""
 msgid "Failed to create ERC20 token: {0}"
 msgstr ""
 
+msgid "This upcoming cycle has no changes"
+msgstr ""
+
 msgid "Payments"
 msgstr ""
 
@@ -2852,9 +2852,6 @@ msgstr ""
 msgid "Edit {projectTitle}'s rules"
 msgstr ""
 
-msgid "This cycle has no upcoming changes"
-msgstr ""
-
 msgid "Software"
 msgstr ""
 
@@ -3212,6 +3209,9 @@ msgstr ""
 msgid "No description"
 msgstr ""
 
+msgid "This upcoming cycle has changes"
+msgstr ""
+
 msgid "Connect wallet to send payouts"
 msgstr ""
 
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx
index 67803def08..2990e5768f 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx
@@ -99,23 +99,22 @@ export const CurrentUpcomingSubPanel = ({
   }
 
   const upcomingCycleChangesCalloutText = hasChanges
-    ? t`This cycle has upcoming changes`
-    : t`This cycle has no upcoming changes`
+    ? t`This upcoming cycle has changes`
+    : t`This upcoming cycle has no changes`
 
   return (
     <div>
       <div className="flex flex-col gap-4">
-        {/* 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}
-          />
+          <>
+            <CountdownCallout cycleStart={info.start?.toNumber()} />
+
+            <UpcomingCycleChangesCallout
+              text={upcomingCycleChangesCalloutText}
+              hasChanges={hasChanges}
+              loading={loading}
+            />
+          </>
         )}
 
         <div className="grid grid-cols-2 gap-4 md:flex">
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts
index c4c7522822..01c25245f4 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts
@@ -50,9 +50,11 @@ export const useFormatConfigurationCyclesSection = ({
     const formattedTime =
       upcomingFundingCycle === null
         ? formatTime(fundingCycle?.start.toNumber())
-        : fundingCycle?.duration.isZero()
+        : fundingCycle?.duration.isZero() &&
+          getBallotStrategyByAddress(fundingCycle?.ballot)?.durationSeconds ===
+            0
         ? t`Any time`
-        : formatTime(fundingCycle?.start.add(fundingCycle?.duration).toNumber())
+        : formatTime(upcomingFundingCycle?.start.toNumber())
 
     const formatTimeDatum: ConfigurationPanelDatum = {
       name: t`Start time`,
@@ -60,7 +62,12 @@ export const useFormatConfigurationCyclesSection = ({
       easyCopy: true,
     }
     return formatTimeDatum
-  }, [fundingCycle?.start, fundingCycle?.duration, upcomingFundingCycle])
+  }, [
+    fundingCycle?.start,
+    fundingCycle?.duration,
+    upcomingFundingCycle,
+    fundingCycle?.ballot,
+  ])
 
   const payoutsDatum: ConfigurationPanelDatum = useMemo(() => {
     const formatCurrency = (currency: BigNumber | undefined) => {

From 6525139e2c9a2bae301d0e2ce4c0937b21b5227f Mon Sep 17 00:00:00 2001
From: wraeth-eth <104132113+wraeth-eth@users.noreply.github.com>
Date: Wed, 8 Jan 2025 09:09:09 +1100
Subject: [PATCH 19/21] fix: ensure that project chain is defined at beginning
 (#4577)

---
 src/locales/messages.pot                      |  3 ++
 .../Create/DeployProjectButtonText.tsx        | 15 +++---
 .../ProjectDetails/ProjectChainSelect.tsx     | 25 ++++++----
 .../ProjectDetails/ProjectDetailsPage.tsx     | 37 +++++++-------
 .../hooks/useProjectDetailsForm.ts            | 24 ++++++----
 .../ProjectDetailsReview.tsx                  | 48 +++++++++++--------
 .../v2v3/shared/v2ProjectDefaultState.ts      | 18 +++----
 .../slices/v2v3/shared/v2ProjectTypes.ts      | 14 +++---
 8 files changed, 104 insertions(+), 80 deletions(-)

diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index bed1d3d5a3..ca31ba9e4d 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -1904,6 +1904,9 @@ msgstr ""
 msgid "The amount of ETH in the wallet that owns this project."
 msgstr ""
 
+msgid "A project chain"
+msgstr ""
+
 msgid "Get paid in ETH, program your own payouts, token issuance, and redemptions to easily run your treasury completely on-chain — as your community grows, you can update your treasury's rules to grow with it."
 msgstr ""
 
diff --git a/src/packages/v4/components/Create/DeployProjectButtonText.tsx b/src/packages/v4/components/Create/DeployProjectButtonText.tsx
index 1cb5ea2186..3ca5f3ef23 100644
--- a/src/packages/v4/components/Create/DeployProjectButtonText.tsx
+++ b/src/packages/v4/components/Create/DeployProjectButtonText.tsx
@@ -1,18 +1,17 @@
-import { NETWORKS } from 'constants/networks'
 import { Trans } from '@lingui/macro'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { NETWORKS } from 'constants/networks'
 import useMobile from 'hooks/useMobile'
 import { useWallet } from 'hooks/Wallet'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
 
 export function DeployProjectButtonText() {
   const isMobile = useMobile()
   const { isConnected, chain } = useWallet()
 
-  const {
-    projectChainId,
-  } = useAppSelector(state => state.creatingV2Project)
+  const { projectChainId } = useAppSelector(state => state.creatingV2Project)
 
-  const walletConnectedToWrongChain = chain?.id && projectChainId !== parseInt(chain.id)
+  const walletConnectedToWrongChain =
+    chain?.id && projectChainId !== parseInt(chain.id)
 
   if (!isConnected) {
     return isMobile ? (
@@ -30,8 +29,8 @@ export function DeployProjectButtonText() {
     )
   }
 
-  if (chain?.name && !isMobile) {
-    return <Trans>Deploy project to {NETWORKS[projectChainId]?.label}</Trans>
+  if (projectChainId && NETWORKS[projectChainId]?.label && !isMobile) {
+    return <Trans>Deploy project to {NETWORKS[projectChainId].label}</Trans>
   }
 
   return <Trans>Deploy project</Trans>
diff --git a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx
index 7e60ef0b0f..d27788fc22 100644
--- a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx
+++ b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx
@@ -1,6 +1,10 @@
-import { DEFAULT_PROJECT_CHAIN_ID, NETWORKS, SupportedChainId } from "constants/networks"
+import {
+  DEFAULT_PROJECT_CHAIN_ID,
+  NETWORKS,
+  SupportedChainId,
+} from 'constants/networks'
 
-import { JuiceListbox } from "components/inputs/JuiceListbox"
+import { JuiceListbox } from 'components/inputs/JuiceListbox'
 
 export const ProjectChainSelect: React.FC<
   React.PropsWithChildren<{
@@ -8,17 +12,18 @@ export const ProjectChainSelect: React.FC<
     onChange?: (value: SupportedChainId) => void
   }>
 > = ({ value, onChange }) => {
-  
-  const networkOptions = () => Object.entries(NETWORKS).map(
-    ([chainId, networkInfo]) => ({
-      label: networkInfo.label, 
+  const networkOptions = () =>
+    Object.entries(NETWORKS).map(([chainId, networkInfo]) => ({
+      label: networkInfo.label,
       value: parseInt(chainId),
-    })
-  )
+    }))
 
   return (
     <JuiceListbox
-      value={{label: NETWORKS[value ?? DEFAULT_PROJECT_CHAIN_ID]?.label, value }}
+      value={{
+        label: NETWORKS[value ?? DEFAULT_PROJECT_CHAIN_ID]?.label,
+        value,
+      }}
       onChange={({ value }) => {
         if (!value) return
         onChange?.(value)
@@ -26,4 +31,4 @@ export const ProjectChainSelect: React.FC<
       options={networkOptions()}
     />
   )
-}
\ No newline at end of file
+}
diff --git a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx
index 58daa993a2..9711ac02e5 100644
--- a/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx
+++ b/src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx
@@ -1,36 +1,36 @@
-import { Col, Form, Row } from 'antd'
 import { Trans, t } from '@lingui/macro'
+import { Col, Form, Row } from 'antd'
 import {
   V2V3_CURRENCY_ETH,
   V2V3_CURRENCY_USD,
 } from 'packages/v2v3/utils/currency'
-import { inputMustBeEthAddressRule, inputMustExistRule } from 'utils/antdRules'
 import { useCallback, useContext, useState } from 'react'
+import { inputMustBeEthAddressRule, inputMustExistRule } from 'utils/antdRules'
 
-import { CREATE_FLOW } from 'constants/fathomEvents'
+import { RightOutlined } from '@ant-design/icons'
 import { Callout } from 'components/Callout/Callout'
-import { CreateCollapse } from '../../CreateCollapse/CreateCollapse'
-import { EthAddressInput } from 'components/inputs/EthAddressInput'
-import { FormImageUploader } from 'components/inputs/FormImageUploader'
 import { FormItems } from 'components/formItems'
+import { EthAddressInput } from 'components/inputs/EthAddressInput'
 import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
-import { JuiceInput } from 'components/inputs/JuiceTextInput'
+import { FormImageUploader } from 'components/inputs/FormImageUploader'
 import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
-import Link from 'next/link'
-import { OptionalHeader } from '../../OptionalHeader'
-import { PageContext } from '../../Wizard/contexts/PageContext'
-import { ProjectChainSelect } from './ProjectChainSelect'
+import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { RichEditor } from 'components/RichEditor'
-import { RightOutlined } from '@ant-design/icons'
-import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
-import { Wizard } from '../../Wizard/Wizard'
+import { CREATE_FLOW } from 'constants/fathomEvents'
 import { constants } from 'ethers'
-import { inputIsLengthRule } from 'utils/antdRules/inputIsLengthRule'
+import { useWallet } from 'hooks/Wallet'
 import { trackFathomGoal } from 'lib/fathom'
+import Link from 'next/link'
 import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
-import { useProjectDetailsForm } from './hooks/useProjectDetailsForm'
+import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
 import { useSetCreateFurthestPageReached } from 'redux/hooks/v2v3/useEditingCreateFurthestPageReached'
-import { useWallet } from 'hooks/Wallet'
+import { inputIsLengthRule } from 'utils/antdRules/inputIsLengthRule'
+import { CreateCollapse } from '../../CreateCollapse/CreateCollapse'
+import { OptionalHeader } from '../../OptionalHeader'
+import { PageContext } from '../../Wizard/contexts/PageContext'
+import { Wizard } from '../../Wizard/Wizard'
+import { useProjectDetailsForm } from './hooks/useProjectDetailsForm'
+import { ProjectChainSelect } from './ProjectChainSelect'
 
 export const ProjectDetailsPage: React.FC<
   React.PropsWithChildren<unknown>
@@ -75,6 +75,9 @@ export const ProjectDetailsPage: React.FC<
           name="projectChainId"
           label={t`Project chain`}
           required
+          rules={lockPageRulesWrapper([
+            inputMustExistRule({ label: t`A project chain` }),
+          ])}
         >
           <ProjectChainSelect />
         </Form.Item>
diff --git a/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts b/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts
index 9489804376..0d42fb408b 100644
--- a/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts
+++ b/src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts
@@ -1,20 +1,20 @@
+import { DEFAULT_PROJECT_CHAIN_ID, SupportedChainId } from 'constants/networks'
+import { useEffect, useMemo } from 'react'
 import {
   DEFAULT_MUST_START_AT_OR_AFTER,
   creatingV2ProjectActions,
 } from 'redux/slices/v2v3/creatingV2Project'
-import { DEFAULT_PROJECT_CHAIN_ID, SupportedChainId } from 'constants/networks'
-import { useEffect, useMemo } from 'react'
 
-import { AmountInputValue } from '../ProjectDetailsPage'
 import { Form } from 'antd'
+import { useForm } from 'antd/lib/form/Form'
+import { useWallet } from 'hooks/Wallet'
 import { ProjectTagName } from 'models/project-tags'
 import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
 import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
-import { useForm } from 'antd/lib/form/Form'
 import { useFormDispatchWatch } from '../../hooks/useFormDispatchWatch'
-import { useWallet } from 'hooks/Wallet'
+import { AmountInputValue } from '../ProjectDetailsPage'
 
 type ProjectDetailsFormProps = Partial<{
   projectName: string
@@ -43,12 +43,18 @@ type ProjectDetailsFormProps = Partial<{
 
 export const useProjectDetailsForm = () => {
   const [form] = useForm<ProjectDetailsFormProps>()
-  const { projectChainId, projectMetadata, inputProjectOwner, mustStartAtOrAfter } =
-    useAppSelector(state => state.creatingV2Project)
+  const {
+    projectChainId,
+    projectMetadata,
+    inputProjectOwner,
+    mustStartAtOrAfter,
+  } = useAppSelector(state => state.creatingV2Project)
 
-  const { chain } = useWallet() 
+  const { chain } = useWallet()
 
-  const defaultChainId = chain?.id ? parseInt(chain.id) : DEFAULT_PROJECT_CHAIN_ID
+  const defaultChainId = chain?.id
+    ? parseInt(chain.id)
+    : DEFAULT_PROJECT_CHAIN_ID
   const initialValues: ProjectDetailsFormProps = useMemo(
     () => ({
       projectName: projectMetadata.name,
diff --git a/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx b/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx
index ab6a2609cf..47961a298a 100644
--- a/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx
+++ b/src/packages/v4/components/Create/components/pages/ReviewDeploy/components/ProjectDetailsReview/ProjectDetailsReview.tsx
@@ -1,16 +1,16 @@
 import { Trans, t } from '@lingui/macro'
 
 import EthereumAddress from 'components/EthereumAddress'
-import { NETWORKS } from 'constants/networks'
 import ProjectLogo from 'components/ProjectLogo'
 import { ProjectTagsList } from 'components/ProjectTags/ProjectTagsList'
-import { ReviewDescription } from '../ReviewDescription'
 import { RichPreview } from 'components/RichPreview/RichPreview'
-import { ipfsUriToGatewayUrl } from 'utils/ipfs'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
-import { useMemo } from 'react'
+import { NETWORKS } from 'constants/networks'
 import { useWallet } from 'hooks/Wallet'
+import React, { useMemo } from 'react'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { ipfsUriToGatewayUrl } from 'utils/ipfs'
 import { wrapNonAnchorsInAnchor } from 'utils/wrapNonAnchorsInAnchor'
+import { ReviewDescription } from '../ReviewDescription'
 
 export const ProjectDetailsReview = () => {
   const { userAddress } = useWallet()
@@ -34,13 +34,18 @@ export const ProjectDetailsReview = () => {
     inputProjectOwner,
   } = useAppSelector(state => state.creatingV2Project)
 
-  const youtubeUrl = useMemo(() => {
-    if (!introVideoUrl) return undefined
-    const url = new URL(introVideoUrl)
-    const videoId = url.searchParams.get('v')
-    if (!videoId) return undefined
-    return `https://www.youtube.com/embed/${videoId}`
-  }, [introVideoUrl])
+  const projectChainName = React.useMemo(
+    () => (projectChainId ? NETWORKS[projectChainId]?.label : undefined),
+    [projectChainId],
+  )
+
+  // const youtubeUrl = useMemo(() => {
+  //   if (!introVideoUrl) return undefined
+  //   const url = new URL(introVideoUrl)
+  //   const videoId = url.searchParams.get('v')
+  //   if (!videoId) return undefined
+  //   return `https://www.youtube.com/embed/${videoId}`
+  // }, [introVideoUrl])
 
   const ownerAddress = inputProjectOwner ?? userAddress
 
@@ -68,14 +73,16 @@ export const ProjectDetailsReview = () => {
           </div>
         }
       />
-      <ReviewDescription
-        title={t`Project chain`}
-        desc={
-          <div className="overflow-hidden text-ellipsis text-base font-medium">
-            {NETWORKS[projectChainId]?.label}
-          </div>
-        }
-      />
+      {projectChainName && (
+        <ReviewDescription
+          title={t`Project chain`}
+          desc={
+            <div className="overflow-hidden text-ellipsis text-base font-medium">
+              {projectChainName}
+            </div>
+          }
+        />
+      )}
       <ReviewDescription
         className="col-span-2"
         title={t`Tagline`}
@@ -160,6 +167,7 @@ export const ProjectDetailsReview = () => {
           className="row-span-2"
           title={t`Project cover photo`}
           desc={
+            // eslint-disable-next-line @next/next/no-img-element
             <img width={144} src={coverImageSrc} alt={`${name} cover photo`} />
           }
         />
diff --git a/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts b/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts
index 1a4cd8b27e..a79efdbd4c 100644
--- a/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts
+++ b/src/redux/slices/v2v3/shared/v2ProjectDefaultState.ts
@@ -1,28 +1,28 @@
-import { BigNumber, constants } from 'ethers'
-import { CreateState, ProjectState } from './v2ProjectTypes'
 import {
   ETH_PAYOUT_SPLIT_GROUP,
   RESERVED_TOKEN_SPLIT_GROUP,
 } from 'constants/splits'
+import { BigNumber, constants } from 'ethers'
 import { JB721GovernanceType, JBTiered721Flags } from 'models/nftRewards'
 import {
   LATEST_METADATA_VERSION,
   ProjectMetadata,
 } from 'models/projectMetadata'
+import {
+  V2V3_CURRENCY_ETH,
+  V2V3_CURRENCY_USD,
+} from 'packages/v2v3/utils/currency'
+import { issuanceRateFrom, redemptionRateFrom } from 'packages/v2v3/utils/math'
 import {
   SerializedV2V3FundingCycleData,
   SerializedV2V3FundingCycleMetadata,
   serializeV2V3FundingCycleData,
   serializeV2V3FundingCycleMetadata,
 } from 'packages/v2v3/utils/serializers'
-import {
-  V2V3_CURRENCY_ETH,
-  V2V3_CURRENCY_USD,
-} from 'packages/v2v3/utils/currency'
-import { issuanceRateFrom, redemptionRateFrom } from 'packages/v2v3/utils/math'
+import { CreateState, ProjectState } from './v2ProjectTypes'
 
-import { JB721TiersHookFlags } from 'packages/v4/models/nfts'
 import { ONE_MILLION } from 'constants/numbers'
+import { JB721TiersHookFlags } from 'packages/v4/models/nfts'
 import { projectDescriptionTemplate } from 'templates/create/projectDescriptionTemplate'
 
 const DEFAULT_DOMAIN = 'juicebox'
@@ -119,7 +119,7 @@ const DEFAULT_PROJECT_METADATA_STATE: ProjectMetadata = {
 }
 
 const DEFAULT_CREATE_STATE: CreateState = {
-  projectChainId: 0, // not necessary for v2v3
+  projectChainId: undefined, // not necessary for v2v3
   treasurySelection: 'zero',
   reconfigurationRuleSelection: undefined,
   fundingCyclesPageSelection: undefined,
diff --git a/src/redux/slices/v2v3/shared/v2ProjectTypes.ts b/src/redux/slices/v2v3/shared/v2ProjectTypes.ts
index 2e10b9b0ff..efc7e44f74 100644
--- a/src/redux/slices/v2v3/shared/v2ProjectTypes.ts
+++ b/src/redux/slices/v2v3/shared/v2ProjectTypes.ts
@@ -1,29 +1,29 @@
-import {
-  ETHPayoutGroupedSplits,
-  ReservedTokensGroupedSplits,
-} from 'packages/v2v3/models/splits'
 import {
   JB721GovernanceType,
   JBTiered721Flags,
   NftCollectionMetadata,
   NftRewardTier,
 } from 'models/nftRewards'
+import {
+  ETHPayoutGroupedSplits,
+  ReservedTokensGroupedSplits,
+} from 'packages/v2v3/models/splits'
 import {
   SerializedV2V3FundAccessConstraint,
   SerializedV2V3FundingCycleData,
   SerializedV2V3FundingCycleMetadata,
 } from 'packages/v2v3/utils/serializers'
 
+import { SupportedChainId } from 'constants/networks'
 import { CreatePage } from 'models/createPage'
 import { FundingTargetType } from 'models/fundingTargetType'
 import { NftPostPayModalConfig } from 'models/nftPostPayModal'
-import { NftPricingContext } from 'packages/v2v3/hooks/JB721Delegate/contractReader/useNftCollectionPricingContext'
 import { PayoutsSelection } from 'models/payoutsSelection'
 import { ProjectMetadata } from 'models/projectMetadata'
 import { ProjectTokensSelection } from 'models/projectTokenSelection'
 import { ReconfigurationStrategy } from 'models/reconfigurationStrategy'
-import { SupportedChainId } from 'constants/networks'
 import { TreasurySelection } from 'models/treasurySelection'
+import { NftPricingContext } from 'packages/v2v3/hooks/JB721Delegate/contractReader/useNftCollectionPricingContext'
 
 export type NftRewardsData = {
   rewardTiers: NftRewardTier[] | undefined
@@ -37,7 +37,7 @@ export type NftRewardsData = {
 
 export interface CreateState {
   fundingCyclesPageSelection: 'automated' | 'manual' | undefined
-  projectChainId: SupportedChainId
+  projectChainId: SupportedChainId | undefined
   treasurySelection: TreasurySelection | undefined
   fundingTargetSelection: FundingTargetType | undefined
   payoutsSelection: PayoutsSelection | undefined

From 7dede8f41d3d9a2e378bb5b8c01c71a88bc492da Mon Sep 17 00:00:00 2001
From: wraeth-eth <104132113+wraeth-eth@users.noreply.github.com>
Date: Wed, 8 Jan 2025 09:09:32 +1100
Subject: [PATCH 20/21] Allows getting to project settings on mobile (#4574)

---
 .../components/ProjectHeaderPopupMenu.tsx     | 30 ++++++++++++++++++-
 .../components/ProjectHeaderPopupMenu.tsx     | 30 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx
index 1e4e1a6d5c..a51cbea1b7 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx
@@ -1,4 +1,7 @@
-import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline'
+import {
+  Cog6ToothIcon,
+  WrenchScrewdriverIcon,
+} from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
 import { SocialLinkButton } from 'components/Project/ProjectHeader/SocialLinkButton'
 import { useSocialLinks } from 'components/Project/ProjectHeader/hooks/useSocialLinks'
@@ -9,9 +12,13 @@ import { useSubscribeButton } from 'components/buttons/SubscribeButton/hooks/use
 import { PopupMenu } from 'components/ui/PopupMenu'
 import { PV_V2 } from 'constants/pv'
 import useMobile from 'hooks/useMobile'
+import { useV2V3WalletHasPermission } from 'packages/v2v3/hooks/contractReader/useV2V3WalletHasPermission'
+import { V2V3OperatorPermission } from 'packages/v2v3/models/v2v3Permissions'
+import { settingsPagePath } from 'packages/v2v3/utils/routes'
 import { useMemo, useState } from 'react'
 import { twJoin } from 'tailwind-merge'
 import { V2V3ProjectToolsDrawer } from '../../V2V3ProjectToolsDrawer'
+import { useV2V3ProjectHeader } from '../hooks/useV2V3ProjectHeader'
 
 type SocialLink = 'twitter' | 'discord' | 'telegram' | 'website'
 
@@ -22,8 +29,12 @@ export function ProjectHeaderPopupMenu({
   className?: string
   projectId: number
 }) {
+  const { handle } = useV2V3ProjectHeader()
   const socialLinks = useSocialLinks()
   const isMobile = useMobile()
+  const canReconfigure = useV2V3WalletHasPermission(
+    V2V3OperatorPermission.RECONFIGURE,
+  )
   const [toolsIsOpen, setToolsIsOpen] = useState<boolean>()
 
   const { isBookmarked, onBookmarkButtonClicked } = useBookmarkButton({
@@ -90,6 +101,23 @@ export function ProjectHeaderPopupMenu({
               onBookmarkButtonClicked()
             },
           },
+          ...(isMobile && canReconfigure
+            ? [
+                {
+                  id: 'manage',
+                  label: (
+                    <>
+                      <Cog6ToothIcon className="text-primary h-5 w-5" />
+
+                      <span className="text-primary whitespace-nowrap text-sm font-medium">
+                        <Trans>Manage project</Trans>
+                      </span>
+                    </>
+                  ),
+                  href: settingsPagePath(undefined, { handle, projectId }),
+                },
+              ]
+            : []),
           {
             id: 'tools',
             label: (
diff --git a/src/packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx b/src/packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx
index 03267ec3eb..b75b3b5a0f 100644
--- a/src/packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx
+++ b/src/packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu.tsx
@@ -1,9 +1,16 @@
-import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline'
+import {
+  Cog6ToothIcon,
+  WrenchScrewdriverIcon,
+} from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
 import { SocialLinkButton } from 'components/Project/ProjectHeader/SocialLinkButton'
 import { useSocialLinks } from 'components/Project/ProjectHeader/hooks/useSocialLinks'
 import { PopupMenu } from 'components/ui/PopupMenu'
 import useMobile from 'hooks/useMobile'
+import { useJBChainId } from 'juice-sdk-react'
+import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
+import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
+import { settingsPagePath } from 'packages/v4/utils/routes'
 import { useMemo, useState } from 'react'
 import { twJoin } from 'tailwind-merge'
 import { V4ProjectToolsDrawer } from './V4ProjectToolsDrawer'
@@ -19,6 +26,10 @@ export function ProjectHeaderPopupMenu({
 }) {
   const socialLinks = useSocialLinks()
   const isMobile = useMobile()
+  const canQueueRuleSets = useV4WalletHasPermission(
+    V4OperatorPermission.QUEUE_RULESETS,
+  )
+  const chainId = useJBChainId()
   const [toolsIsOpen, setToolsIsOpen] = useState<boolean>()
 
   // const { isBookmarked, onBookmarkButtonClicked } = useBookmarkButton({
@@ -85,6 +96,23 @@ export function ProjectHeaderPopupMenu({
           //     onBookmarkButtonClicked()
           //   },
           // },
+          ...(isMobile && chainId && canQueueRuleSets
+            ? [
+                {
+                  id: 'manage',
+                  label: (
+                    <>
+                      <Cog6ToothIcon className="text-primary h-5 w-5" />
+
+                      <span className="text-primary whitespace-nowrap text-sm font-medium">
+                        <Trans>Manage project</Trans>
+                      </span>
+                    </>
+                  ),
+                  href: settingsPagePath({ chainId, projectId }),
+                },
+              ]
+            : []),
           {
             id: 'tools',
             label: (

From 950d3d17ed9731570c73752bdc3c5802a3a49b44 Mon Sep 17 00:00:00 2001
From: aeolian <94939382+aeolianeth@users.noreply.github.com>
Date: Wed, 8 Jan 2025 08:23:52 +1000
Subject: [PATCH 21/21] fix tests

---
 .../CurrentUpcomingSubPanel.test.tsx.snap     | 42 -------------------
 ...seFormatConfigurationCyclesSection.test.ts |  3 +-
 .../useFormatConfigurationCyclesSection.ts    |  4 +-
 3 files changed, 4 insertions(+), 45 deletions(-)

diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/__snapshots__/CurrentUpcomingSubPanel.test.tsx.snap b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/__snapshots__/CurrentUpcomingSubPanel.test.tsx.snap
index 1d0966d067..6c268782d8 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/__snapshots__/CurrentUpcomingSubPanel.test.tsx.snap
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/__snapshots__/CurrentUpcomingSubPanel.test.tsx.snap
@@ -135,27 +135,6 @@ exports[`CurrentUpcomingSubPanel renders "upcoming" 1`] = `
     <div
       class="flex flex-col gap-4"
     >
-      <div
-        class="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"
-      >
-        <svg
-          aria-hidden="true"
-          class="h-5 w-5"
-          data-slot="icon"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-        Starts in 
-      </div>
       <div
         class="grid grid-cols-2 gap-4 md:flex"
       >
@@ -396,27 +375,6 @@ exports[`CurrentUpcomingSubPanel renders a skeleton when loading "upcoming" 1`]
     <div
       class="flex flex-col gap-4"
     >
-      <div
-        class="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"
-      >
-        <svg
-          aria-hidden="true"
-          class="h-5 w-5"
-          data-slot="icon"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-        Starts in 
-      </div>
       <div
         class="grid grid-cols-2 gap-4 md:flex"
       >
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.test.ts b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.test.ts
index cacb209bed..6b45dd8a49 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.test.ts
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.test.ts
@@ -24,6 +24,7 @@ describe('useFormatConfigurationCyclesSection', () => {
 
   const mockUpcomingFundingCycle = {
     duration: BigNumber.from(20000),
+    start: BigNumber.from(1),
     ballot: '0x0000000000000000000000000000000000000001',
   }
 
@@ -57,7 +58,7 @@ describe('useFormatConfigurationCyclesSection', () => {
     }
     const expectedStartTime = {
       name: 'Start time',
-      new: '1970-01-01, Thursday, 02:46:40 AM UTC',
+      new: '1970-01-01, Thursday, 12:00:01 AM UTC', // BigNumber.from(1)
       // new: '1970-01-01, Wednesday, 09:46:40 PM EST',
       easyCopy: true,
     }
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts
index 01c25245f4..e809bdba3e 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useFormatConfigurationCyclesSection.ts
@@ -49,12 +49,12 @@ export const useFormatConfigurationCyclesSection = ({
   const startTimeDatum: ConfigurationPanelDatum = useMemo(() => {
     const formattedTime =
       upcomingFundingCycle === null
-        ? formatTime(fundingCycle?.start.toNumber())
+        ? formatTime(fundingCycle?.start?.toNumber())
         : fundingCycle?.duration.isZero() &&
           getBallotStrategyByAddress(fundingCycle?.ballot)?.durationSeconds ===
             0
         ? t`Any time`
-        : formatTime(upcomingFundingCycle?.start.toNumber())
+        : formatTime(upcomingFundingCycle?.start?.toNumber())
 
     const formatTimeDatum: ConfigurationPanelDatum = {
       name: t`Start time`,