V4 edit cycle: Review and Deploy modal [1/n] (#4440)

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItem.tsx → src/components/FundingCycleListItem.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from 'antd'
 import { twMerge } from 'tailwind-merge'
 import { classNames } from 'utils/classNames'
-import { DiffedItem } from '../../../shared/DiffedItem'
+import { DiffedItem } from './DiffedItem'
 
 // e.g. 'Distribution limit', 'Start', 'End', etc.
 export function FundingCycleListItem({

src/locales/messages.pot

@@ -3611,6 +3611,9 @@ msgstr ""
 msgid "Owner tools"
 msgstr ""
 
+msgid "{value} {tokenSymbol}/ETH"
+msgstr ""
+
 msgid "<0>Juicebox is a programmable crypto fundraising platform for web3. It helps people fund, operate, and scale their projects transparently using Ethereum, which is a type of programmable cryptocurrency.</0><1>Juicebox is funded and owned by its community.</1>"
 msgstr ""
 

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/DataSourceListItems/index.tsx

@@ -3,6 +3,7 @@ import { Trans, t } from '@lingui/macro'
 import { Tooltip } from 'antd'
 import EthereumAddress from 'components/EthereumAddress'
 import ExternalLink from 'components/ExternalLink'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import {
   DATASOURCE_EXPLANATION,
   NFT_DATASOURCE_EXPLANATION,
@@ -16,7 +17,6 @@ import { V2V3FundingCycleMetadata } from 'packages/v2v3/models/fundingCycle'
 import { useContext } from 'react'
 import { formatBoolean } from 'utils/format/formatBoolean'
 import { helpPagePath } from 'utils/helpPagePath'
-import { FundingCycleListItem } from '../FundingCycleListItem'
 
 function DataSourceAddressValue({ address }: { address: string | undefined }) {
   const { version } = useContext(JB721DelegateContractsContext)

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItems/DurationValue.tsx

@@ -1,3 +1,4 @@
+
 import { Trans } from '@lingui/macro'
 import FundingCycleDetailWarning from 'components/Project/FundingCycleDetailWarning'
 import { FUNDING_CYCLE_WARNING_TEXT } from 'constants/fundingWarningText'

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItems/index.tsx

@@ -1,5 +1,6 @@
 import { t } from '@lingui/macro'
 import { Tooltip } from 'antd'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import {
   DISTRIBUTION_LIMIT_EXPLANATION,
   RECONFIG_RULES_EXPLANATION,
@@ -17,7 +18,6 @@ import { V2V3CurrencyName } from 'packages/v2v3/utils/currency'
 import { getUnsafeV2V3FundingCycleProperties } from 'packages/v2v3/utils/fundingCycle'
 import { useContext } from 'react'
 import { formatDate, formatDateToUTC } from 'utils/format/formatDate'
-import { FundingCycleListItem } from '../FundingCycleListItem'
 import { BallotStrategyValue } from '../RulesListItems/BallotStrategyValue'
 import { DistributionLimitValue } from './DistributionLimitValue'
 import { DurationValue } from './DurationValue'

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/RulesListItems/index.tsx

@@ -1,4 +1,5 @@
 import { t } from '@lingui/macro'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import {
   CONTROLLER_CONFIG_EXPLANATION,
   CONTROLLER_MIGRATION_EXPLANATION,
@@ -9,7 +10,6 @@ import {
 import { V2V3ProjectContext } from 'packages/v2v3/contexts/Project/V2V3ProjectContext'
 import { V2V3FundingCycleMetadata } from 'packages/v2v3/models/fundingCycle'
 import { useContext } from 'react'
-import { FundingCycleListItem } from '../FundingCycleListItem'
 import { AllowedValue } from './AllowedValue'
 import { HoldFeesValue } from './HoldFeesValue'
 import { PausePayValue } from './PausePayValue'

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/TokenListItems/index.tsx

@@ -1,4 +1,5 @@
 import { t } from '@lingui/macro'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import {
   CONTRIBUTOR_RATE_EXPLANATION,
   DISCOUNT_RATE_EXPLANATION,
@@ -13,7 +14,6 @@ import {
   V2V3FundingCycle,
   V2V3FundingCycleMetadata,
 } from 'packages/v2v3/models/fundingCycle'
-import { FundingCycleListItem } from '../FundingCycleListItem'
 
 import { BigNumber } from 'ethers'
 import { V2V3ProjectContext } from 'packages/v2v3/contexts/Project/V2V3ProjectContext'

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/index.tsx

@@ -5,9 +5,9 @@ import {
   V2V3FundingCycleMetadata,
 } from 'packages/v2v3/models/fundingCycle'
 
+import { FundingCycleDetailsRow } from 'components/FundingCycleDetailsRow'
 import { isZeroAddress } from 'utils/address'
 import { DataSourceListItems } from './DataSourceListItems'
-import { FundingCycleDetailsRow } from './FundingCycleDetailsRow'
 import { FundingCycleListItems } from './FundingCycleListItems'
 import { RulesListItems } from './RulesListItems'
 import { TokenListItems } from './TokenListItems'

src/packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditCyclePage/ReviewConfirmModal/DetailsSectionDiff.tsx

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { FundingCycleListItem } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItem'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import { DurationValue } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItems/DurationValue'
 
 import { BallotStrategyValue } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/RulesListItems/BallotStrategyValue'

src/packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditCyclePage/ReviewConfirmModal/PayoutsSectionDiff.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { Trans, t } from '@lingui/macro'
-import { FundingCycleListItem } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItem'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import { DistributionLimitValue } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItems/DistributionLimitValue'
 import DiffedSplitList from 'packages/v2v3/components/shared/DiffedSplits/DiffedSplitList'
 import { getV2V3CurrencyOption } from 'packages/v2v3/utils/currency'

src/packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditCyclePage/ReviewConfirmModal/TokensSectionDiff.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { Trans, t } from '@lingui/macro'
-import { FundingCycleListItem } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItem'
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
 import { MintRateValue } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/TokenListItems/MintRateValue'
 import { ReservedRateValue } from 'packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/TokenListItems/ReservedRateValue'
 import DiffedSplitList from 'packages/v2v3/components/shared/DiffedSplits/DiffedSplitList'

src/packages/v2v3/components/shared/DiffedSplits/DiffedSplitFields/DiffedJBProjectBeneficiary.tsx

@@ -1,6 +1,6 @@
+import { DiffedItem } from 'components/DiffedItem'
 import EthereumAddress from 'components/EthereumAddress'
 import { Split } from 'packages/v2v3/models/splits'
-import { DiffedItem } from '../../DiffedItem'
 import { JuiceboxProjectBeneficiary } from '../../SplitItem/JuiceboxProjectBeneficiary'
 
 export function DiffedJBProjectBeneficiary({

src/packages/v2v3/components/shared/DiffedSplits/DiffedSplitFields/DiffedLockedUntil.tsx

@@ -1,5 +1,5 @@
+import { DiffedItem } from 'components/DiffedItem'
 import { formatDate } from 'utils/format/formatDate'
-import { DiffedItem } from '../../DiffedItem'
 import { LockedUntilValue } from '../../SplitItem/LockedUntilValue'
 
 export function DiffedLockedUntil({

src/packages/v2v3/components/shared/DiffedSplits/DiffedSplitFields/DiffedSplitValue.tsx

@@ -1,3 +1,4 @@
+import { DiffedItem } from 'components/DiffedItem'
 import { BigNumber } from 'ethers'
 import { Split } from 'packages/v2v3/models/splits'
 import {
@@ -6,7 +7,6 @@ import {
 } from 'packages/v2v3/utils/fundingCycle'
 import { formatSplitPercent } from 'packages/v2v3/utils/math'
 import { splitAmountsAreEqual } from 'packages/v2v3/utils/v2v3Splits'
-import { DiffedItem } from '../../DiffedItem'
 import { SplitProps } from '../../SplitItem'
 import { SplitAmountValue } from '../../SplitItem/SplitAmountValue'
 

src/packages/v2v3/components/shared/DiffedSplits/DiffedSplitItem.tsx

@@ -3,7 +3,7 @@ import {
   DIFF_OLD_BACKGROUND,
   DiffMinus,
   DiffPlus,
-} from 'packages/v2v3/components/shared/DiffedItem'
+} from 'components/DiffedItem'
 import { isJuiceboxProjectSplit } from 'packages/v2v3/utils/distributions'
 import { SplitWithDiff } from 'packages/v2v3/utils/v2v3Splits'
 import { twMerge } from 'tailwind-merge'

src/packages/v4/utils/fundingCycle.ts

@@ -1,5 +1,8 @@
 import { MAX_PAYOUT_LIMIT } from "./math"
 
+export const WEIGHT_ZERO = 1 // send `1` when we want to set the weight to `0`
+export const WEIGHT_UNCHANGED = 0 // send `0` when we don't want to change the weight.
+
 export function isInfinitePayoutLimit(
   payoutLimit: bigint | undefined,
 ) {

src/packages/v4/utils/v4Splits.ts

@@ -44,7 +44,7 @@ export const totalSplitsPercent = (splits: JBSplit[]): bigint =>
 //  - false if new (exists in new but not old)
 //  - JBSplit if exists in old and new and there is a diff in the splits
 //  - undefined if exists in old and new and there is no diff in the splits
-type OldSplit = JBSplit | boolean | undefined
+type OldSplit = (JBSplit & { totalValue?: bigint } ) | boolean | undefined
 
 export type SplitWithDiff = JBSplit & {
   oldSplit?: OldSplit
@@ -99,7 +99,7 @@ export const sortSplits = (splits: JBSplit[]) => {
 }
 
 /* Determines if two splits AMOUNTS are equal. Extracts amounts for two splits from their respective totalValues **/
-function splitAmountsAreEqual({
+export function splitAmountsAreEqual({
   split1,
   split2,
   split1TotalValue,

src/packages/v4/views/V4ProjectSettings/EditCyclePage/EditCyclePage.tsx

@@ -13,6 +13,7 @@ import { useChainId } from 'wagmi'
 import { DetailsSection } from './DetailsSection'
 import { useEditCycleFormContext } from './EditCycleFormContext'
 import { PayoutsSection } from './PayoutsSection'
+import { ReviewConfirmModal } from './ReviewConfirmModal'
 import { TokensSection } from './TokensSection'
 
 export function EditCyclePage() {
@@ -116,10 +117,10 @@ export function EditCyclePage() {
           >
             <TokensSection />
           </EditCycleFormSection>
-          {/* <ReviewConfirmModal
+          <ReviewConfirmModal
             open={confirmModalOpen}
             onClose={() => setConfirmModalOpen(false)}
-          /> */}
+          />
         </Form>
       </div>
 

src/packages/v4/views/V4ProjectSettings/EditCyclePage/ReviewConfirmModal/DetailsSectionDiff.tsx

@@ -0,0 +1,145 @@
+import { Trans, t } from '@lingui/macro'
+
+import { FundingCycleListItem } from 'components/FundingCycleListItem'
+import { DiffSection } from './DiffSection'
+import { ApprovalStrategyValue } from './FormattedRulesetValues/DetailsSection/ApprovalStrategyValue'
+import { DurationValue } from './FormattedRulesetValues/DetailsSection/DurationValue'
+import { useDetailsSectionValues } from './hooks/useDetailsSectionValues'
+
+export const emptySectionClasses = 'text-sm text-secondary pt-2 pb-3'
+
+export function DetailsSectionDiff() {
+  const {
+    advancedOptionsHasDiff,
+    sectionHasDiff,
+
+    currentDuration,
+    newDuration,
+    durationHasDiff,
+
+    currentBallot,
+    newBallot,
+    ballotHasDiff,
+
+    newPausePay,
+    currentPausePay,
+    pausePayHasDiff,
+
+    newSetTerminals,
+    currentSetTerminals,
+    allowSetTerminalsHasDiff,
+
+    newAllowTerminalMigration,
+    currentAllowTerminalMigration,
+    allowTerminalMigrationHasDiff,
+
+    newSetController,
+    currentSetController,
+    allowSetControllerHasDiff,
+  } = useDetailsSectionValues()
+
+  if (!sectionHasDiff) {
+    return (
+      <div className={emptySectionClasses}>
+        <Trans>No edits were made to cycle details for this cycle.</Trans>
+      </div>
+    )
+  }
+
+  return (
+    <DiffSection
+      content={
+        <>
+          {durationHasDiff && (
+            <FundingCycleListItem
+              name={t`Duration`}
+              value={<DurationValue duration={newDuration} />}
+              oldValue={<DurationValue duration={currentDuration} />}
+            />
+          )}
+          {ballotHasDiff && currentBallot && (
+            <FundingCycleListItem
+              name={t`Edit deadline`}
+              value={
+                <ApprovalStrategyValue
+                  approvalStrategy={newBallot}
+                  warningText={undefined}
+                />
+              }
+              oldValue={
+                <ApprovalStrategyValue
+                  approvalStrategy={currentBallot}
+                  warningText={undefined}
+                />
+              }
+            />
+          )}
+        </>
+      }
+      advancedOptions={
+        advancedOptionsHasDiff && (
+          <>
+            {pausePayHasDiff && (
+              <FundingCycleListItem
+                name={t`Payments disabled`}
+                value={
+                  <span className="capitalize">{newPausePay.toString()}</span>
+                }
+                oldValue={
+                  <span className="capitalize">
+                    {currentPausePay.toString()}
+                  </span>
+                }
+              />
+            )}
+            {allowSetTerminalsHasDiff && (
+              <FundingCycleListItem
+                name={t`Enable payment terminal config`}
+                value={
+                  <span className="capitalize">
+                    {newSetTerminals.toString()}
+                  </span>
+                }
+                oldValue={
+                  <span className="capitalize">
+                    {currentSetTerminals.toString()}
+                  </span>
+                }
+              />
+            )}
+            {allowTerminalMigrationHasDiff && (
+              <FundingCycleListItem
+                name={t`Enable payment terminal migrations`}
+                value={
+                  <span className="capitalize">
+                    {newAllowTerminalMigration.toString()}
+                  </span>
+                }
+                oldValue={
+                  <span className="capitalize">
+                    {currentAllowTerminalMigration.toString()}
+                  </span>
+                }
+              />
+            )}
+            {allowSetControllerHasDiff && (
+              <FundingCycleListItem
+                name={t`Enable controller config`}
+                value={
+                  <span className="capitalize">
+                    {newSetController.toString()}
+                  </span>
+                }
+                oldValue={
+                  <span className="capitalize">
+                    {currentSetController.toString()}
+                  </span>
+                }
+              />
+            )}
+          </>
+        )
+      }
+    />
+  )
+}

src/packages/v4/views/V4ProjectSettings/EditCyclePage/ReviewConfirmModal/DiffSection.tsx

@@ -0,0 +1,23 @@
+import { Trans } from '@lingui/macro'
+
+export function DiffSection({
+  content,
+  advancedOptions,
+}: {
+  content: React.ReactNode
+  advancedOptions?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-1 pt-1 text-sm">
+      {content}
+      {advancedOptions ? (
+        <>
+          <div className="py-3 font-semibold">
+            <Trans>Advanced options:</Trans>
+          </div>
+          {advancedOptions}
+        </>
+      ) : null}
+    </div>
+  )
+}