feat: links to projects other chain instances + multichain surplus

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,7 +1,6 @@
-import { SupportedChainId, readNetwork } from 'constants/networks'
-
-import { useCallback } from 'react'
 import { useSetChain } from '@web3-onboard/react'
+import { readNetwork } from 'constants/networks'
+import { useCallback } from 'react'
 
 /**
  * Attempts to sync the user wallet's chain with the readNetwork (hard-coded per environment)
@@ -10,7 +9,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?: number) => { // should be 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/ChainLogo.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import { JBChainId } from "juice-sdk-react";
+import { NETWORKS } from "constants/networks";
+
+const chainIdToLogo: Record<number, string> = {
+  1: "/assets/images/chain-logos/mainnet.svg",
+  11155111: "/assets/images/chain-logos/mainnet.svg",
+  42161: "/assets/images/chain-logos/arbitrum.svg",
+  421614: "/assets/images/chain-logos/arbitrum.svg",
+  11155420: "/assets/images/chain-logos/optimism.svg",
+  84532: "/assets/images/chain-logos/base.svg",
+};
+
+export const ChainLogo = ({
+  chainId,
+  width,
+  height,
+}: {
+  chainId: JBChainId;
+  width?: number;
+  height?: number;
+}) => {
+  return (
+    <Image
+      src={chainIdToLogo[chainId]}
+      alt={`${NETWORKS[chainId].label} Logo`}
+      width={width ?? 20}
+      height={height ?? 20}
+    />
+  );
+};

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,6 +6,7 @@ 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 { ProjectTagName } from 'models/project-tags'
 import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
@@ -18,7 +18,7 @@ import { AmountInputValue } from '../ProjectDetailsPage'
 
 type ProjectDetailsFormProps = Partial<{
   projectName: string
-  projectChainId: SupportedChainId
+  projectChainId: number // v4TODO: should be JBChainId
   projectTagline: string
   projectDescription: string
   logo: string

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

@@ -1,26 +1,26 @@
-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 { 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 { MAX_PAYOUT_LIMIT } from 'packages/v4/utils/math'
+import { DEFAULT_PROJECT_CHAIN_ID } from 'constants/networks'
+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 { MAX_PAYOUT_LIMIT } from 'packages/v4/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 { projectTokenSettingsToReduxFormat } from '../utils/projectTokenSettingsToReduxFormat'
-import { useDispatch } from 'react-redux'
-import { useRouter } from 'next/router'
 import { zeroAddress } from 'viem'
+import { DefaultSettings as DefaultTokenSettings } from '../components/pages/ProjectToken/hooks/useProjectTokenForm'
+import { projectTokenSettingsToReduxFormat } from '../utils/projectTokenSettingsToReduxFormat'
 
 const ReduxDefaultTokenSettings =
   projectTokenSettingsToReduxFormat(DefaultTokenSettings)

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) {