Merge pull request #4578 from jbx-protocol/dev

release 2025-01-08

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',

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.5-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",

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>

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
 }

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,21 @@ 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(
   (acc, curr) => ({
     ...acc,
@@ -67,5 +89,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]

src/hooks/Wallet/hooks/useChangeNetworks.ts

@@ -1,7 +1,7 @@
-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'
 
 /**
  * Attempts to sync the user wallet's chain with the readNetwork (hard-coded per environment)
@@ -10,8 +10,8 @@ import { readNetwork } from 'constants/networks'
 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')

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 ""
 
@@ -560,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 ""
 
@@ -890,6 +890,9 @@ msgstr ""
 msgid "Hold fees"
 msgstr ""
 
+msgid "Chain selection"
+msgstr ""
+
 msgid "Grant NFT permissions"
 msgstr ""
 
@@ -1196,6 +1199,9 @@ msgstr ""
 msgid "Check your email for a confirmation link and retry subscribing."
 msgstr ""
 
+msgid "Project chain"
+msgstr ""
+
 msgid "Claim ERC-20 token"
 msgstr ""
 
@@ -1334,6 +1340,9 @@ msgstr ""
 msgid "Failed to create ERC20 token: {0}"
 msgstr ""
 
+msgid "This upcoming cycle has no changes"
+msgstr ""
+
 msgid "Payments"
 msgstr ""
 
@@ -1895,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 ""
 
@@ -2846,9 +2858,6 @@ msgstr ""
 msgid "Edit {projectTitle}'s rules"
 msgstr ""
 
-msgid "This cycle has no upcoming changes"
-msgstr ""
-
 msgid "Software"
 msgstr ""
 
@@ -3206,6 +3215,9 @@ msgstr ""
 msgid "No description"
 msgstr ""
 
+msgid "This upcoming cycle has changes"
+msgstr ""
+
 msgid "Connect wallet to send payouts"
 msgstr ""
 

src/models/networkName.ts

@@ -4,4 +4,6 @@ export enum NetworkName {
   sepolia = 'sepolia',
   arbitrumSepolia = 'arbitrumSepolia',
   optimismSepolia = 'optimismSepolia',
+  arbitrumOne = 'arbitrumOne',
+  baseSepolia = 'baseSepolia',
 }

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

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

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

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">