feat: show links to projects other chain instances on v4 project page

src/constants/networks.ts

@@ -9,7 +9,7 @@ type NetworkInfo = {
   name: NetworkName
   label: string
   color: string
-  chainId: number
+  chainId: number, // should be JBChainId
   blockExplorer: string
   rpcUrl: string
   token: string
@@ -57,6 +57,15 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia-rollup.arbitrum.io/rpc`,
     blockExplorer: 'https://sepolia-explorer.arbitrum.io',
   },
+  10: {
+    name: NetworkName.optimism,
+    label: 'Optimism',
+    color: '#ff0420',
+    chainId: 10,
+    token: 'OpETH',
+    rpcUrl: `https://optimism-mainnet.infura.io/v3/${infuraId}`,
+    blockExplorer: 'https://optimistic.etherscan.io',
+  },
   11155420: {
     name: NetworkName.optimismSepolia,
     label: 'Optimism Sepolia Testnet',
@@ -66,6 +75,15 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia.optimism.io`,
     blockExplorer: 'https://optimism-sepolia.blockscout.com',
   },
+  8453: {
+    name: NetworkName.base,
+    label: 'Base',
+    color: '#00d395',
+    chainId: 8453,
+    token: 'BaseETH',
+    rpcUrl: `https://mainnet.base.org`,
+    blockExplorer: 'https://basescan.org',
+  },
   84532: {
     name: NetworkName.baseSepolia,
     label: 'Base Sepolia',
@@ -75,11 +93,27 @@ export const NETWORKS: Record<number, NetworkInfo> = {
     rpcUrl: `https://sepolia.base.org`,
     blockExplorer: 'https://sepolia.basescan.org',
   },
+  137: {
+    name: NetworkName.polygon,
+    label: 'Polygon',
+    color: '#8247e5',
+    chainId: 137,
+    token: 'MATIC',
+    rpcUrl: `https://polygon-mainnet.infura.io/v3/${infuraId}`,
+    blockExplorer: 'https://polygonscan.com',
+  },
+  1442: {
+    name: NetworkName.polygonSepolia,
+    label: 'Polygon Sepolia Testnet',
+    color: '#9f7bea',
+    chainId: 1442,
+    token: 'MATIC',
+    rpcUrl: `https://sepolia-polygon.io/rpc`,
+    blockExplorer: 'https://sepolia.polygonscan.com',
+  },
 }
 
-export const TESTNET_IDS = new Set([11155111, 421614, 11155420, 84531])
-
-export type SupportedChainId = keyof typeof NETWORKS;
+export const TESTNET_IDS = new Set<number>([11155111, 421614, 11155420, 84531, 1442]);
 
 export const NETWORKS_BY_NAME = Object.values(NETWORKS).reduce(
   (acc, curr) => ({

src/hooks/Wallet/hooks/useChangeNetworks.ts

@@ -1,5 +1,5 @@
-import { SupportedChainId, readNetwork } from 'constants/networks'
-
+import { JBChainId } from 'juice-sdk-react'
+import { readNetwork } from 'constants/networks'
 import { useCallback } from 'react'
 import { useSetChain } from '@web3-onboard/react'
 
@@ -10,7 +10,7 @@ import { useSetChain } from '@web3-onboard/react'
 export function useChangeNetworks() {
   const [{ chains }, setChain] = useSetChain()
 
-  const changeNetworks = useCallback(async (chainId?: SupportedChainId) => {
+  const changeNetworks = useCallback(async (chainId?: JBChainId) => {
     const chain = chains.find(c => Number(c.id) === (chainId ?? readNetwork.chainId))
     if (!chain) {
       console.error('FATAL: Chain not found')

src/locales/messages.pot

@@ -77,9 +77,6 @@ msgstr ""
 msgid "Contract address: {0}"
 msgstr ""
 
-msgid "No surplus"
-msgstr ""
-
 msgid "Trust"
 msgstr ""
 
@@ -386,9 +383,6 @@ msgstr ""
 msgid "Basic details"
 msgstr ""
 
-msgid "{surplus} is available for future payouts."
-msgstr ""
-
 msgid "Your project can receive payments through the juicebox.money app."
 msgstr ""
 
@@ -1076,9 +1070,6 @@ msgstr ""
 msgid "1. Set ENS name"
 msgstr ""
 
-msgid "{surplus} is available for token redemptions or future payouts."
-msgstr ""
-
 msgid "No overflow"
 msgstr ""
 
@@ -1475,6 +1466,9 @@ msgstr ""
 msgid "File"
 msgstr ""
 
+msgid "{surplusElement} is available across all chains for token redemptions or future payouts."
+msgstr ""
+
 msgid "You have <0>{0} ETH</0> of unclaimed NFT credits"
 msgstr ""
 
@@ -3272,6 +3266,9 @@ msgstr ""
 msgid "Owner token minting is not available for V1.0 projects. Owner token minting can be enabled by editing the project's cycle."
 msgstr ""
 
+msgid "{surplusElement} is available across all chains for future payouts."
+msgstr ""
+
 msgid "<0/> reclaimed from project"
 msgstr ""
 

src/models/networkName.ts

@@ -2,8 +2,12 @@ export enum NetworkName {
   localhost = 'localhost',
   mainnet = 'mainnet',
   sepolia = 'sepolia',
+  arbitrumOne = 'arbitrumOne',
   arbitrumSepolia = 'arbitrumSepolia',
+  optimism = 'optimism',
   optimismSepolia = 'optimismSepolia',
-  arbitrumOne = 'arbitrumOne',
+  base = 'base',
   baseSepolia = 'baseSepolia',
+  polygon = 'polygon',
+  polygonSepolia = 'polygonSepolia',
 }

src/packages/v2v3/components/Create/hooks/useLoadInitialStateFromQuery.ts

@@ -1,25 +1,25 @@
-import { CreateState, ProjectState } from 'redux/slices/v2v3/shared/v2ProjectTypes'
+import { useEffect, useState } from 'react'
 import {
   DEFAULT_REDUX_STATE,
   creatingV2ProjectActions,
 } from 'redux/slices/v2v3/creatingV2Project'
-import { useEffect, useState } from 'react'
+import { CreateState, ProjectState } from 'redux/slices/v2v3/shared/v2ProjectTypes'
 
-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 { MAX_DISTRIBUTION_LIMIT } from 'packages/v2v3/utils/math'
+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 isEqual from 'lodash/isEqual'
+import { useDefaultJBETHPaymentTerminal } from 'packages/v2v3/hooks/defaultContracts/useDefaultJBETHPaymentTerminal'
+import { MAX_DISTRIBUTION_LIMIT } from 'packages/v2v3/utils/math'
+import { useDispatch } from 'react-redux'
+import { INITIAL_REDUX_STATE } from 'redux/slices/v2v3/shared/v2ProjectInitialReduxState'
 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)
@@ -101,7 +101,7 @@ const parseCreateFlowStateFromInitialState = (
   }
 
   return {
-    projectChainId: 0, // not necessary for v2v3
+    projectChainId: 84532, // not necessary for v2v3
     fundingCyclesPageSelection,
     treasurySelection,
     fundingTargetSelection: undefined, // TODO: Remove

src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectChainSelect.tsx

@@ -1,22 +1,21 @@
-import {
-  DEFAULT_PROJECT_CHAIN_ID,
-  NETWORKS,
-  SupportedChainId,
-} from 'constants/networks'
+import { DEFAULT_PROJECT_CHAIN_ID, NETWORKS } from "constants/networks"
 
-import { JuiceListbox } from 'components/inputs/JuiceListbox'
+import { JuiceListbox } from "components/inputs/JuiceListbox"
+import { JBChainId } from "juice-sdk-react"
 
 export const ProjectChainSelect: React.FC<
   React.PropsWithChildren<{
-    value?: SupportedChainId
-    onChange?: (value: SupportedChainId) => void
+    value?: JBChainId
+    onChange?: (value: JBChainId) => void
   }>
 > = ({ value, onChange }) => {
-  const networkOptions = () =>
-    Object.entries(NETWORKS).map(([chainId, networkInfo]) => ({
-      label: networkInfo.label,
-      value: parseInt(chainId),
-    }))
+
+  const networkOptions = () => Object.entries(NETWORKS).map(
+    ([chainId, networkInfo]) => ({
+      label: networkInfo.label, 
+      value: parseInt(chainId) as JBChainId,
+    })
+  )
 
   return (
     <JuiceListbox

src/packages/v4/components/Create/components/pages/ProjectDetails/hooks/useProjectDetailsForm.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_PROJECT_CHAIN_ID, SupportedChainId } from 'constants/networks'
 import { useEffect, useMemo } from 'react'
 import {
   DEFAULT_MUST_START_AT_OR_AFTER,
@@ -7,7 +6,9 @@ import {
 
 import { Form } from 'antd'
 import { useForm } from 'antd/lib/form/Form'
+import { DEFAULT_PROJECT_CHAIN_ID } from 'constants/networks'
 import { useWallet } from 'hooks/Wallet'
+import { JBChainId } from 'juice-sdk-react'
 import { ProjectTagName } from 'models/project-tags'
 import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
 import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
@@ -18,7 +19,7 @@ import { AmountInputValue } from '../ProjectDetailsPage'
 
 type ProjectDetailsFormProps = Partial<{
   projectName: string
-  projectChainId: SupportedChainId
+  projectChainId: JBChainId
   projectTagline: string
   projectDescription: string
   logo: string

src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/PayProjectModal.tsx

@@ -1,22 +1,23 @@
+import { Trans, t } from '@lingui/macro'
 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 { useWallet } from 'hooks/Wallet'
+import { JBChainId } from 'juice-sdk-react'
 import Image from 'next/legacy/image'
-import { JuiceModal } from 'components/modals/JuiceModal'
+import { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
+import { twMerge } from 'tailwind-merge'
+import { helpPagePath } from 'utils/helpPagePath'
+import { ChainSelectSection } from './components/ChainSelectSection'
 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 { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
-import { useWallet } from 'hooks/Wallet'
 
 export const PayProjectModal: React.FC = () => {
   const {
@@ -49,7 +50,7 @@ export const PayProjectModal: React.FC = () => {
         const walletConnectedToWrongChain =
           walletChain?.id && values.chainId !== parseInt(walletChain.id)
         if (walletConnectedToWrongChain) {
-          await changeNetworks(values.chainId) 
+          await changeNetworks(values.chainId as JBChainId) 
           return
         }
         if (!walletChain) {

src/packages/v4/hooks/JB721Delegate/transactor/useLaunchProjectWithNftsTx.ts

@@ -1,41 +1,42 @@
-import { waitForTransactionReceipt } from '@wagmi/core'
-import { JUICEBOX_MONEY_PROJECT_METADATA_DOMAIN } from 'constants/metadataDomain'
-import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
-import { useWallet } from 'hooks/Wallet'
+import {
+  Address,
+  WaitForTransactionReceiptReturnType,
+  toBytes,
+  toHex,
+  zeroAddress,
+} from 'viem'
 import {
   DEFAULT_MEMO,
-  jbProjectDeploymentAddresses,
   NATIVE_TOKEN,
   NATIVE_TOKEN_DECIMALS,
+  jbProjectDeploymentAddresses,
 } from 'juice-sdk-core'
 import {
   JBChainId,
   jbPricesAddress,
   useJBContractContext,
   useWriteJb721TiersHookProjectDeployerLaunchProjectFor,
 } from 'juice-sdk-react'
-import { isValidMustStartAtOrAfter } from 'packages/v2v3/utils/fundingCycle'
 import {
   JBDeploy721TiersHookConfig,
   LaunchProjectWithNftsTxArgs,
 } from 'packages/v4/models/nfts'
-import { wagmiConfig } from 'packages/v4/wagmiConfig'
-import { useContext } from 'react'
-import { DEFAULT_MUST_START_AT_OR_AFTER } from 'redux/slices/v2v3/shared/v2ProjectDefaultState'
-import { ipfsUri } from 'utils/ipfs'
-import {
-  Address,
-  toBytes,
-  toHex,
-  WaitForTransactionReceiptReturnType,
-  zeroAddress,
-} from 'viem'
-import { useChainId } from 'wagmi'
 import {
   LaunchV2V3ProjectArgs,
   transformV2V3CreateArgsToV4,
 } from '../../../utils/launchProjectTransformers'
+
+import { DEFAULT_MUST_START_AT_OR_AFTER } from 'redux/slices/v2v3/shared/v2ProjectDefaultState'
+import { JUICEBOX_MONEY_PROJECT_METADATA_DOMAIN } from 'constants/metadataDomain'
 import { LaunchTxOpts } from '../../useLaunchProjectTx'
+import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
+import { ipfsUri } from 'utils/ipfs'
+import { isValidMustStartAtOrAfter } from 'packages/v2v3/utils/fundingCycle'
+import { useChainId } from 'wagmi'
+import { useContext } from 'react'
+import { useWallet } from 'hooks/Wallet'
+import { wagmiConfig } from 'packages/v4/wagmiConfig'
+import { waitForTransactionReceipt } from '@wagmi/core'
 
 /**
  * Return the project ID created from a `launchProjectFor` transaction.
@@ -193,7 +194,7 @@ export function useLaunchProjectWithNftsTx() {
       // })
 
       const hash = await writeLaunchProject({
-        chainId: chainId as 84532 | 421614 | 11155111 | 11155420, // TODO: cleanup
+        chainId: chainId as JBChainId,
         args,
       })