Merge branch 'dev' of github.com-johnnyd-eth:jbx-protocol/juice-interface

johnnyd-eth · johnnyd-eth · commit 33f4e10ac17c · 2025-09-22T21:29:17.000+08:00
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,13 +1,14 @@
 import { GithubFilled, TwitterCircleFilled } from '@ant-design/icons'
 import { Trans, t } from '@lingui/macro'
+import { LinkColProps, LinkColumn } from './LinkColumn'
+
 import ExternalLink from 'components/ExternalLink'
-import Logo from 'components/Logo'
 import Discord from 'components/icons/Discord'
+import Logo from 'components/Logo'
 import { TERMS_OF_SERVICE_URL } from 'constants/links'
-import { useWallet } from 'hooks/Wallet'
 import { useFetchDeveloperWallets } from 'hooks/useFetchDeveloperWallets'
+import { useWallet } from 'hooks/Wallet'
 import { isEqualAddress } from 'utils/address'
-import { LinkColProps, LinkColumn } from './LinkColumn'
 
 const ImageButtons = [
   {
@@ -160,7 +161,7 @@ export function Footer() {
         </div>
 
         <div className="mt-32 flex justify-between border-t border-slate-400 pb-16 pt-5">
-          <span className="text-slate-200">© Juicebox 2024</span>
+          <span className="text-slate-200">© Juicebox 2025</span>
 
           <div className="flex gap-x-7">
             {gitCommit && <AppVersion gitCommit={gitCommit} />}
diff --git a/src/locales/messages.pot b/src/locales/messages.pot
@@ -518,6 +518,9 @@ msgstr ""
 msgid "Claiming {tokenSymbol} tokens will convert your {tokenSymbol} balance to ERC-20 tokens and mint them to your wallet."
 msgstr ""
 
+msgid "Queue ruleset"
+msgstr ""
+
 msgid "Manage project on {0}"
 msgstr ""
 
@@ -4175,6 +4178,9 @@ msgstr ""
 msgid "<0>This project has no ETH available for redemptions</0>. You won't receive any ETH for burning your tokens."
 msgstr ""
 
+msgid "You'll be prompted a wallet signature to queue the updated ruleset."
+msgstr ""
+
 msgid "Change network"
 msgstr ""
 
diff --git a/src/packages/v4/hooks/useV4WalletHasPermission.ts b/src/packages/v4/hooks/useV4WalletHasPermission.ts
@@ -3,8 +3,10 @@ import {
   useReadJbPermissionsHasPermissions,
 } from 'juice-sdk-react'
 
+import { useGnosisSafe } from 'hooks/safe/useGnosisSafe'
 import { useWallet } from 'hooks/Wallet'
 import { isEqualAddress } from 'utils/address'
+import { isSafeSigner } from 'utils/safe'
 import { zeroAddress } from 'viem'
 import { V4OperatorPermission } from '../models/v4Permissions'
 import useV4ProjectOwnerOf from './useV4ProjectOwnerOf'
@@ -17,6 +19,9 @@ export function useV4WalletHasPermission(
   const { projectId } = useJBContractContext()
   const { data: projectOwnerAddress } = useV4ProjectOwnerOf()
 
+  // If project owner is a Safe, fetch Safe details to determine signer membership
+  const { data: safeData } = useGnosisSafe(projectOwnerAddress)
+
   const _operator = userAddress ?? zeroAddress
   const _account = projectOwnerAddress ?? zeroAddress
   const hasOperatorPermission = useReadJbPermissionsHasPermissions({
@@ -30,8 +35,17 @@ export function useV4WalletHasPermission(
     ],
   })
 
-  const isOwner = isEqualAddress(userAddress, projectOwnerAddress)
+  // Treat a Safe signer the same as the project owner if the project owner is a Safe
+  const isSafeOwnerSigner =
+    !!safeData && isSafeSigner({ address: userAddress, safe: safeData })
+  const isOwner =
+    isEqualAddress(userAddress, projectOwnerAddress) || isSafeOwnerSigner
 
+  // Allow access if:
+  // - wallet is direct owner
+  // - wallet has explicit operator permission
+  // - wallet is a signer on the Safe that owns the project (covers multisig ownership case)
+  // - in development environment
   return (
     isOwner ||
     hasOperatorPermission.data ||
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx
@@ -2,27 +2,27 @@ import { Button, Divider } from 'antd'
 import { JBChainId, useJBChainId, useSuckers } from 'juice-sdk-react'
 import { settingsPagePath, v4ProjectRoute } from 'packages/v4/utils/routes'
 
-import { Badge } from 'components/Badge'
-import { ChainLogo } from 'packages/v4/components/ChainLogo'
 import { Cog6ToothIcon } from '@heroicons/react/24/outline'
+import { Trans } from '@lingui/macro'
+import { Badge } from 'components/Badge'
 import EthereumAddress from 'components/EthereumAddress'
 import { GnosisSafeBadge } from 'components/Project/ProjectHeader/GnosisSafeBadge'
-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 { SuckerPair } from 'juice-sdk-core'
-import { Trans } from '@lingui/macro'
 import { TruncatedText } from 'components/TruncatedText'
-import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
+import useMobile from 'hooks/useMobile'
+import { SuckerPair } from 'juice-sdk-core'
+import Link from 'next/link'
+import { ChainLogo } from 'packages/v4/components/ChainLogo'
+import { ProjectHeaderPopupMenu } from 'packages/v4/components/ProjectDashboard/components/ProjectHeaderPopupMenu'
 import V4ProjectHandleLink from 'packages/v4/components/V4ProjectHandleLink'
+import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
 import { twMerge } from 'tailwind-merge'
-import useMobile from 'hooks/useMobile'
+import { ProjectHeaderStats } from './ProjectHeaderStats'
 // import { Subtitle } from 'components/Project/ProjectHeader/Subtitle'
 import { useSocialLinks } from 'components/Project/ProjectHeader/hooks/useSocialLinks'
-import { useV4ProjectHeader } from './hooks/useV4ProjectHeader'
 import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
+import { useV4ProjectHeader } from './hooks/useV4ProjectHeader'
 
 export type SocialLink = 'twitter' | 'discord' | 'telegram' | 'website'
 
@@ -46,6 +46,8 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
     V4OperatorPermission.QUEUE_RULESETS,
   )
 
+  const canManageProject = canQueueRuleSets
+
   // convert createdAtSeconds to date string Month DD, YYYY in local time
   const createdAt = createdAtSeconds
     ? new Date(createdAtSeconds * 1000).toLocaleDateString(undefined, {
@@ -78,7 +80,7 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
                   ))}
               </div>
               <ProjectHeaderPopupMenu projectId={projectId} />
-              {canQueueRuleSets && chainId && (
+              {canManageProject && chainId && (
                 <Link
                   href={settingsPagePath({ projectId, chainId }, undefined)}
                   legacyBehavior
diff --git a/src/packages/v4/views/V4ProjectSettings/EditCyclePage/ReviewConfirmModal/ReviewConfirmModal.tsx b/src/packages/v4/views/V4ProjectSettings/EditCyclePage/ReviewConfirmModal/ReviewConfirmModal.tsx
@@ -1,36 +1,37 @@
-import { EditCycleTxArgs, transformEditCycleFormFieldsToTxArgs } from 'packages/v4/utils/editRuleset'
-import { JBChainId, NATIVE_TOKEN } from 'juice-sdk-core'
 import { Trans, t } from '@lingui/macro'
-import { useEffect, useState } from 'react'
+import { JBChainId, NATIVE_TOKEN } from 'juice-sdk-core'
 import { useJBChainId, useJBContractContext, useJBProjectId, useJBRuleset, useSuckers } from 'juice-sdk-react'
+import { EditCycleTxArgs, transformEditCycleFormFieldsToTxArgs } from 'packages/v4/utils/editRuleset'
+import { useEffect, useState } from 'react'
 
 import { BigNumber } from '@ethersproject/bignumber'
+import { Form } from 'antd'
 import { Callout } from 'components/Callout/Callout'
-import { ChainSelect } from 'packages/v4/components/ChainSelect'
-import { CreateCollapse } from 'packages/v4/components/Create/components/CreateCollapse/CreateCollapse'
-import { DetailsSectionDiff } from './DetailsSectionDiff'
 import ETHAmount from 'components/currency/ETHAmount'
-import { Form } from 'antd'
 import { JuiceDatePicker } from 'components/inputs/JuiceDatePicker'
 import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
-import { PayoutsSectionDiff } from './PayoutsSectionDiff'
-import QueueSafeEditRulesetTxsModal from 'packages/v4/components/QueueSafeEditRulesetTxsModal'
-import type { RelayrPostBundleResponse } from 'juice-sdk-react'
-import { SectionCollapseHeader } from './SectionCollapseHeader'
-import { TokensSectionDiff } from './TokensSectionDiff'
 import TransactionModal from 'components/modals/TransactionModal'
-import { TransactionSuccessModal } from '../TransactionSuccessModal'
-import { emitErrorNotification } from 'utils/notifications'
+import { useGnosisSafe } from 'hooks/safe/useGnosisSafe'
+import { useWallet } from 'hooks/Wallet'
+import type { RelayrPostBundleResponse } from 'juice-sdk-react'
 import moment from 'moment'
+import { ChainSelect } from 'packages/v4/components/ChainSelect'
+import { CreateCollapse } from 'packages/v4/components/Create/components/CreateCollapse/CreateCollapse'
+import QueueSafeEditRulesetTxsModal from 'packages/v4/components/QueueSafeEditRulesetTxsModal'
+import { useEditRulesetTx } from 'packages/v4/hooks/useEditRulesetTx'
+import useV4ProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
+import { emitErrorNotification } from 'utils/notifications'
 import { useChainId } from 'wagmi'
-import { useDetailsSectionValues } from './hooks/useDetailsSectionValues'
 import { useEditCycleFormContext } from '../EditCycleFormContext'
-import { useGnosisSafe } from 'hooks/safe/useGnosisSafe'
 import { useOmnichainEditCycle } from '../hooks/useOmnichainEditCycle'
+import { TransactionSuccessModal } from '../TransactionSuccessModal'
+import { DetailsSectionDiff } from './DetailsSectionDiff'
+import { useDetailsSectionValues } from './hooks/useDetailsSectionValues'
 import { usePayoutsSectionValues } from './hooks/usePayoutsSectionValues'
 import { useTokensSectionValues } from './hooks/useTokensSectionValues'
-import useV4ProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
-import { useWallet } from 'hooks/Wallet'
+import { PayoutsSectionDiff } from './PayoutsSectionDiff'
+import { SectionCollapseHeader } from './SectionCollapseHeader'
+import { TokensSectionDiff } from './TokensSectionDiff'
 
 export function ReviewConfirmModal({
   open,
@@ -65,9 +66,12 @@ export function ReviewConfirmModal({
 
   // Omnichain edit state
   const { getEditQuote, sendRelayrTx, relayrBundle } = useOmnichainEditCycle()
+  // Direct single-chain tx hook
+  const editRulesetTx = useEditRulesetTx()
   const [selectedGasChain, setSelectedGasChain] = useState<JBChainId | undefined>(chainId)
   const [txQuote, setTxQuote] = useState<RelayrPostBundleResponse>()
   const [txQuoteLoading, setTxQuoteLoading] = useState(false)
+  const [txPending, setTxPending] = useState(false) // single-chain pending state
 
   const { data: suckers } = useSuckers()
 
@@ -162,6 +166,45 @@ export function ReviewConfirmModal({
     }
   }
 
+  // Direct single-chain confirm (no relayr)
+  const handleConfirmSingle = async () => {
+    if (isOmnichainProject) return // safety guard
+    if (walletConnectedToWrongChain) {
+      try {
+        await changeNetworks(chainId as JBChainId)
+      } catch (error) {
+        emitErrorNotification(`Error changing networks: ${error}`)
+        return
+      }
+    }
+    const formVals = editCycleForm!.getFieldsValue(true)
+    setConfirmLoading(true)
+    setTxPending(false)
+    try {
+      await editRulesetTx(formVals, {
+        onTransactionPending: () => {
+          setTxPending(true)
+        },
+        onTransactionConfirmed: () => {
+          setTxPending(false)
+          setConfirmLoading(false)
+          editCycleForm!.resetFields()
+          setEditCycleSuccessModalOpen(true)
+          onClose()
+        },
+        onTransactionError: (e) => {
+          setTxPending(false)
+          setConfirmLoading(false)
+          emitErrorNotification(e.message)
+        },
+      })
+    } catch (e) {
+      setTxPending(false)
+      setConfirmLoading(false)
+      emitErrorNotification((e as Error).message)
+    }
+  }
+
   // Poll and handle completion
   useEffect(() => {
     if (relayrBundle.isComplete) {
@@ -181,7 +224,9 @@ export function ReviewConfirmModal({
   const panelProps = { className: 'text-lg' }
 
   const txSigning = Boolean(relayrBundle.uuid) && !relayrBundle.isComplete
-  const okText = isProjectOwnerGnosisSafe ? <Trans>Queue on Safe</Trans> : !txQuote ? <Trans>Get edit quote</Trans> : <Trans>Deploy changes</Trans>
+  const okText = isOmnichainProject
+    ? (isProjectOwnerGnosisSafe ? <Trans>Queue on Safe</Trans> : !txQuote ? <Trans>Get edit quote</Trans> : <Trans>Deploy changes</Trans>)
+    : <Trans>Queue ruleset</Trans>
   const mustStartAtOrAfterField = (
     <div className="mt-1">
       <Form.Item 
@@ -221,13 +266,13 @@ export function ReviewConfirmModal({
       <TransactionModal
         open={open}
         title={<Trans>Review & confirm</Trans>}
-        onOk={handleConfirmOmni}
+        onOk={isOmnichainProject ? handleConfirmOmni : handleConfirmSingle}
         okText={okText}
         okButtonProps={{ disabled: !formHasChanges }}
         confirmLoading={confirmLoading || txQuoteLoading || txSigning}
-        transactionPending={txSigning}
-        chainIds={projectChains}
-        relayrResponse={relayrBundle.response}
+        transactionPending={isOmnichainProject ? txSigning : txPending}
+        chainIds={isOmnichainProject ? projectChains : undefined}
+        relayrResponse={isOmnichainProject ? relayrBundle.response : undefined}
         cancelButtonProps={{ hidden: true }}
         onCancel={onClose}
       >           
@@ -293,7 +338,16 @@ export function ReviewConfirmModal({
           {mustStartAtOrAfterField}
           </div>
           ) : null}
-        {!txQuote && (
+        {!isOmnichainProject && (
+          <div className="mt-10 py-4 text-sm stroke-tertiary border-t rounded-none">
+              <Callout.Info>
+                <Trans>
+                  You'll be prompted a wallet signature to queue the updated ruleset.
+                </Trans>
+              </Callout.Info>
+          </div>
+        )}
+        {isOmnichainProject && !txQuote && (
           <div className="mt-10 py-4 text-sm stroke-tertiary border-t rounded-none">
               <Callout.Info>
               {isProjectOwnerGnosisSafe && isOmnichainProject ? (
@@ -308,7 +362,7 @@ export function ReviewConfirmModal({
               </Callout.Info>
           </div>
         )}
-        {txQuote ? (
+        {isOmnichainProject && txQuote ? (
           <div className="mb-4 mt-10">
             <div className="flex items-center justify-between">
               <span><Trans>Gas quote</Trans>:</span>
diff --git a/src/packages/v4/views/V4ProjectSettings/EditCyclePage/ReviewConfirmModal/hooks/usePayoutsSectionValues.ts b/src/packages/v4/views/V4ProjectSettings/EditCyclePage/ReviewConfirmModal/hooks/usePayoutsSectionValues.ts
@@ -1,6 +1,7 @@
 import { CurrencyName } from 'constants/currency'
 import { JBSplit } from 'juice-sdk-core'
 import { distributionLimitsEqual } from 'packages/v4/utils/distributions'
+import { isInfinitePayoutLimit } from 'packages/v4/utils/fundingCycle'
 import { MAX_PAYOUT_LIMIT } from 'packages/v4/utils/math'
 import { splitsListsHaveDiff } from 'packages/v4/utils/v4Splits'
 import { parseWad } from 'utils/format/formatNumber'
@@ -25,26 +26,27 @@ export const usePayoutsSectionValues = () => {
     'ETH'
   const currencyHasDiff = currentCurrency !== newCurrency
 
-  const newDistributionLimitForm: bigint =
-    parseWad(editCycleForm?.getFieldValue('payoutLimit')).toBigInt()
-
-  const newDistributionLimit =
-    newDistributionLimitForm === undefined
+  // Raw form field value. For "No limit" the UI leaves the field blank / undefined.
+  const rawNewDistributionLimit = editCycleForm?.getFieldValue('payoutLimit')
+  const newDistributionLimit: bigint =
+    rawNewDistributionLimit === undefined || rawNewDistributionLimit === null || rawNewDistributionLimit === ''
       ? MAX_PAYOUT_LIMIT
-      : newDistributionLimitForm
+      : parseWad(rawNewDistributionLimit).toBigInt()
 
   const currentDistributionLimitNum = initialFormData?.payoutLimit
   const currentDistributionLimit =
     currentDistributionLimitNum === undefined
       ? MAX_PAYOUT_LIMIT
       : parseWad(currentDistributionLimitNum).toBigInt()
 
+  // A distribution limit diff should only show when either:
+  // 1. The numeric (semantic) payout limit changed (taking into account that any infinite value forms are equal)
+  // 2. The currency changed
+  // NOTE: Previously we flagged a diff when both values were infinite ("No limit" -> "No limit").
   const distributionLimitHasDiff =
-    !distributionLimitsEqual(currentDistributionLimit, newDistributionLimit) ||
-    currencyHasDiff
-    // TODO: When no limit is set and doesnt change, distributionLimitHasDiff still true
-  const distributionLimitIsInfinite =
-    !newDistributionLimit || newDistributionLimit === MAX_PAYOUT_LIMIT
+    currencyHasDiff ||
+    !distributionLimitsEqual(currentDistributionLimit, newDistributionLimit)
+  const distributionLimitIsInfinite = isInfinitePayoutLimit(newDistributionLimit)
 
   const newHoldFees = Boolean(editCycleForm?.getFieldValue('holdFees'))
   const currentHoldFees = Boolean(initialFormData?.holdFees)
