Merge pull request #4580 from jbx-protocol/dev

release 2025-01-12

src/components/Home/FaqList/QAs.tsx

@@ -172,7 +172,7 @@ export default function QAs(): {
             Juicebox with caution.
           </p>
           <p>
-            <ExternalLink href={helpPagePath('/dev/learn/risks/')}>
+            <ExternalLink href={helpPagePath('/v4/learn/risks/')}>
               Learn more about the risks.
             </ExternalLink>
           </p>

src/constants/networks.ts

@@ -1,3 +1,4 @@
+import { JBChainId } from 'juice-sdk-core'
 import { NetworkName } from 'models/networkName'
 import { isBrowser } from 'utils/isBrowser'
 
@@ -9,7 +10,7 @@ type NetworkInfo = {
   name: NetworkName
   label: string
   color: string
-  chainId: number
+  chainId: number // should be JBChainId
   blockExplorer: string
   rpcUrl: string
   token: string
@@ -39,15 +40,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',
-  },
+  // 42161: {
+  //   name: NetworkName.arbitrum,
+  //   label: 'Arbitrum',
+  //   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,15 +58,33 @@ 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',
     color: '#f01f70',
-    chainId: 11155420, 
+    chainId: 11155420,
     token: 'OpETH',
     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',
@@ -77,9 +96,9 @@ export const NETWORKS: Record<number, NetworkInfo> = {
   },
 }
 
-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) => ({
@@ -89,7 +108,8 @@ 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 DEFAULT_PROJECT_CHAIN_ID = NETWORKS_BY_NAME.mainnet
+  .chainId as unknown as JBChainId // TODO once mainnet is a JBChainId, this wont be necessary
 
 export const readNetwork =
   NETWORKS_BY_NAME[process.env.NEXT_PUBLIC_INFURA_NETWORK]

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 ""
 
@@ -218,9 +215,6 @@ msgstr ""
 msgid "{0} tokens"
 msgstr ""
 
-msgid "Staked balance"
-msgstr ""
-
 msgid "<0>Edits to this project must be made before this deadline. This gives token holders time to verify the edits before they take effect.</0><1>For example: with a 1-day edit deadline, edits must be made at least 1 day before a ruleset cycle starts.</1>"
 msgstr ""
 
@@ -386,9 +380,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 ""
 
@@ -767,6 +758,9 @@ msgstr ""
 msgid "Saved projects"
 msgstr ""
 
+msgid "Unclaimed token balance"
+msgstr ""
+
 msgid "The redemption rate determines how token holders can burn their tokens to reclaim a portion of the ETH not needed for payouts."
 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 ""
 
@@ -2504,9 +2498,6 @@ msgstr ""
 msgid "Ruleset #"
 msgstr ""
 
-msgid "Unstaked balance"
-msgstr ""
-
 msgid "Recommended"
 msgstr ""
 
@@ -2942,6 +2933,9 @@ msgstr ""
 msgid "If your project has \"hold fees\" enabled, instead of processing that that 2.5% fee immediately, the fee gets held within the Juicebox contracts. These fees can be unlocked by transferring the ETH back to your project."
 msgstr ""
 
+msgid "Claimed token balance"
+msgstr ""
+
 msgid "Redemption rate"
 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,10 @@ export enum NetworkName {
   localhost = 'localhost',
   mainnet = 'mainnet',
   sepolia = 'sepolia',
+  arbitrum = 'arbitrum',
   arbitrumSepolia = 'arbitrumSepolia',
+  optimism = 'optimism',
   optimismSepolia = 'optimismSepolia',
-  arbitrumOne = 'arbitrumOne',
+  base = 'base',
   baseSepolia = 'baseSepolia',
 }

src/packages/v2v3/components/Create/components/pages/ReviewDeploy/ReviewDeployPage.tsx

@@ -205,7 +205,7 @@ export const ReviewDeployPage = () => {
                   Terms of Service
                 </ExternalLink>{' '}
                 and{' '}
-                <ExternalLink href={helpPagePath(`/dev/learn/risks`)}>
+                <ExternalLink href={helpPagePath(`/v4/learn/risks`)}>
                   the risks
                 </ExternalLink>
                 .

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

@@ -1,25 +1,29 @@
-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 { 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 { 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 +105,7 @@ const parseCreateFlowStateFromInitialState = (
   }
 
   return {
-    projectChainId: 0, // not necessary for v2v3
+    projectChainId: DEFAULT_PROJECT_CHAIN_ID, // not necessary for v2v3
     fundingCyclesPageSelection,
     treasurySelection,
     fundingTargetSelection: undefined, // TODO: Remove

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/PayProjectModal.tsx

@@ -14,8 +14,8 @@ import { MessageSection } from './components/MessageSection'
 import { ReceiveSection } from './components/ReceiveSection'
 import { usePayAmounts } from './hooks/usePayAmounts'
 import {
-  PayProjectModalFormValues,
-  usePayProjectModal,
+    PayProjectModalFormValues,
+    usePayProjectModal,
 } from './hooks/usePayProjectModal/usePayProjectModal'
 
 export const PayProjectModal: React.FC = () => {
@@ -135,7 +135,7 @@ export const PayProjectModal: React.FC = () => {
                             I understand and accept this project's notice and
                             the{' '}
                             <ExternalLink
-                              href={helpPagePath('dev/learn/risks')}
+                              href={helpPagePath('v4/learn/risks')}
                             >
                               risks
                             </ExternalLink>{' '}
@@ -145,7 +145,7 @@ export const PayProjectModal: React.FC = () => {
                           <Trans>
                             I understand and accept the{' '}
                             <ExternalLink
-                              href={helpPagePath('dev/learn/risks')}
+                              href={helpPagePath('v4/learn/risks')}
                             >
                               risks
                             </ExternalLink>{' '}

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,21 +1,18 @@
-import {
-  DEFAULT_PROJECT_CHAIN_ID,
-  NETWORKS,
-  SupportedChainId,
-} from 'constants/networks'
-
 import { JuiceListbox } from 'components/inputs/JuiceListbox'
+import { DEFAULT_PROJECT_CHAIN_ID, NETWORKS } from 'constants/networks'
+import { JB_CHAINS } from 'juice-sdk-core'
+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),
+    Object.values(JB_CHAINS).map(chain => ({
+      label: chain.name,
+      value: chain.chain.id as JBChainId,
     }))
 
   return (