diff --git a/src/components/Create/Create.tsx b/src/components/Create/Create.tsx
index 1741f23c2c..f85fb52846 100644
--- a/src/components/Create/Create.tsx
+++ b/src/components/Create/Create.tsx
@@ -7,10 +7,12 @@ import {
CYCLE_EXPLANATION,
RECONFIG_RULES_EXPLANATION,
} from 'components/strings'
+import { FEATURE_FLAGS } from 'constants/featureFlags'
import { readNetwork } from 'constants/networks'
import { NetworkName } from 'models/networkName'
import Link from 'next/link'
import { useRouter } from 'next/router'
+import { featureFlagEnabled } from 'utils/featureFlags'
import {
FundingCyclesPage,
NftRewardsPage,
@@ -21,6 +23,7 @@ import {
} from './components'
import { CreateBadge } from './components/CreateBadge'
import { PayoutsPage } from './components/pages/PayoutsPage'
+import { NewPayoutsPage } from './components/pages/PayoutsPage/NewPayoutsPage'
import { DeploySuccess } from './components/pages/ReviewDeploy/components/DeploySuccess'
import { PayoutsMigrationModal } from './components/PayoutsMigrationModal'
import { Wizard } from './components/Wizard'
@@ -40,6 +43,10 @@ export function Create() {
if (initialStateLoading) return
+ const newPayoutsTableEnabled = featureFlagEnabled(
+ FEATURE_FLAGS.PAYOUTS_TABLE_CREATE_FLOW,
+ )
+
return (
@@ -88,14 +95,14 @@ export function Create() {
title={t`Payouts`}
description={
- Pay out ETH from your project to the Ethereum wallets or
- Juicebox projects of your choice. ETH which isn't paid
- out will be available for token redemptions, or for use in
- future cycles. Payouts reset each cycle.
+ Pay out ETH from your project to any Ethereum wallet or Juicebox
+ project. ETH which isn't paid out will be available for
+ token redemptions, or for use in future cycles. Payouts reset
+ each cycle.
}
>
-
+ {newPayoutsTableEnabled ? : }
{
+ useSetCreateFurthestPageReached('payouts')
+ const { goToNextPage } = useContext(PageContext)
+
+ const [editingDistributionLimit, setDistributionLimit] =
+ useEditingDistributionLimit()
+
+ const { form, initialValues } = usePayoutsForm()
+
+ const distributionLimit = !editingDistributionLimit
+ ? 0
+ : editingDistributionLimit.amount.eq(MAX_DISTRIBUTION_LIMIT)
+ ? undefined
+ : parseFloat(fromWad(editingDistributionLimit?.amount))
+
+ const splits: Split[] =
+ form.getFieldValue('payoutsList')?.map(allocationToSplit) ?? []
+
+ const setDistributionLimitAmount = (amount: number | undefined) => {
+ setDistributionLimit({
+ amount: amount ? parseWad(amount) : MAX_DISTRIBUTION_LIMIT,
+ currency:
+ editingDistributionLimit?.currency ??
+ getV2V3CurrencyOption(DEFAULT_CURRENCY_NAME),
+ })
+ }
+
+ const setDistributionLimitCurrency = (currency: CurrencyName) => {
+ setDistributionLimit({
+ amount: editingDistributionLimit?.amount ?? DEFAULT_DISTRIBUTION_LIMIT,
+ currency: getV2V3CurrencyOption(currency),
+ })
+ }
+
+ const setSplits = (splits: Split[]) => {
+ form.setFieldsValue({ payoutsList: splits.map(splitToAllocation) })
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutSplitRow.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutSplitRow.tsx
index ceb679c4d9..3580642b87 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutSplitRow.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutSplitRow.tsx
@@ -6,7 +6,6 @@ import {
import round from 'lodash/round'
import { Split } from 'models/splits'
import { useState } from 'react'
-import { useEditCycleFormContext } from '../../EditCycleFormContext'
import { usePayoutsTable } from '../hooks/usePayoutsTable'
import { PayoutSplitRowMenu } from './PayoutSplitRowMenu'
import { PayoutTitle } from './PayoutTitle'
@@ -28,8 +27,6 @@ export function PayoutSplitRow({
setAmountPercentFieldHasEndingDecimal,
] = useState(false)
- const { editCycleForm } = useEditCycleFormContext()
-
const {
currencyOrPercentSymbol,
derivePayoutAmount,
@@ -46,8 +43,6 @@ export function PayoutSplitRow({
? formattedPayoutPercent({ payoutSplitPercent: payoutSplit.percent })
: round(amount, roundingPrecision).toString()
- if (!editCycleForm) return null
-
const onAmountPercentageInputChange = (val: string | undefined) => {
setAmountPercentFieldHasEndingDecimal(Boolean(val?.endsWith('.')))
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutsTableBody.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutsTableBody.tsx
index edbe1f5134..4f779a67cd 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutsTableBody.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/PayoutsTableBody.tsx
@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
import { Form } from 'antd'
import { Allocation } from 'components/v2v3/shared/Allocation'
import { getV2V3CurrencyOption } from 'utils/v2v3/currency'
-import { useEditCycleFormContext } from '../../EditCycleFormContext'
import { usePayoutsTable } from '../hooks/usePayoutsTable'
import { HeaderRows } from './HeaderRows'
import { PayoutSplitRow } from './PayoutSplitRow'
@@ -14,8 +13,6 @@ const Row = PayoutsTableRow
const Cell = PayoutsTableCell
export function PayoutsTableBody() {
- const { editCycleForm, initialFormData } = useEditCycleFormContext()
-
const {
payoutSplits,
currency,
@@ -24,8 +21,6 @@ export function PayoutsTableBody() {
distributionLimit,
} = usePayoutsTable()
- if (!editCycleForm || !initialFormData) return null
-
const emptyState = distributionLimit === 0
return (
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToLimitedModal.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToLimitedModal.tsx
index 89c75c956f..bddc2058ed 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToLimitedModal.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToLimitedModal.tsx
@@ -6,7 +6,6 @@ import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
import { useState } from 'react'
import { helpPagePath } from 'utils/routes'
import { V2V3_CURRENCY_ETH, V2V3_CURRENCY_USD } from 'utils/v2v3/currency'
-import { useEditCycleFormContext } from '../../../EditCycleFormContext'
import { usePayoutsTable } from '../../hooks/usePayoutsTable'
export function SwitchToLimitedModal({
@@ -18,13 +17,10 @@ export function SwitchToLimitedModal({
}) {
const [limit, setLimit] = useState('')
- const { editCycleForm } = useEditCycleFormContext()
- const { setCurrency, currency } = usePayoutsTable()
+ const { setCurrency, currency, setDistributionLimit } = usePayoutsTable()
const onOk = () => {
- editCycleForm?.setFieldsValue({
- distributionLimit: parseFloat(limit),
- })
+ setDistributionLimit(parseFloat(limit))
onClose()
}
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToUnlimitedModal.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToUnlimitedModal.tsx
index 72185c1ab0..8bdf1ef1e7 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToUnlimitedModal.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/PayoutsTable/modals/SwitchToUnlimitedModal.tsx
@@ -2,8 +2,6 @@ import { Trans } from '@lingui/macro'
import { Modal } from 'antd'
import { ExternalLinkWithIcon } from 'components/ProjectDashboard/components/ui/ExternalLinkWithIcon'
import { helpPagePath } from 'utils/routes'
-import { ensureSplitsSumTo100Percent } from 'utils/v2v3/distributions'
-import { useEditCycleFormContext } from '../../../EditCycleFormContext'
import { usePayoutsTable } from '../../hooks/usePayoutsTable'
export function SwitchToUnlimitedModal({
@@ -13,14 +11,11 @@ export function SwitchToUnlimitedModal({
open: boolean
onClose: VoidFunction
}) {
- const { editCycleForm } = useEditCycleFormContext()
- const { payoutSplits } = usePayoutsTable()
+ const { setDistributionLimit, setSplits100Percent } = usePayoutsTable()
const onOk = () => {
- editCycleForm?.setFieldsValue({
- distributionLimit: undefined,
- payoutSplits: ensureSplitsSumTo100Percent({ splits: payoutSplits }),
- })
+ setDistributionLimit(undefined)
+ setSplits100Percent()
onClose()
}
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx
index 469d022b15..0386ff7010 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx
@@ -123,6 +123,10 @@ export const usePayoutsTable = () => {
setFormHasUpdated(true)
}
+ function setSplits100Percent() {
+ setPayoutSplits(ensureSplitsSumTo100Percent({ splits: payoutSplits }))
+ }
+
function _setPayoutSplits(splits: Split[]) {
if (distributionLimitIsInfinite) {
setPayoutSplits(splits)
@@ -402,10 +406,12 @@ export const usePayoutsTable = () => {
return {
distributionLimit,
distributionLimitIsInfinite,
+ setDistributionLimit: _setDistributionLimit,
currency,
setCurrency,
currencyOrPercentSymbol,
payoutSplits,
+ setSplits100Percent,
derivePayoutAmount,
formattedPayoutPercent,
roundingPrecision,
diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts
index ec0c71a932..deb2e8dbdc 100644
--- a/src/constants/featureFlags.ts
+++ b/src/constants/featureFlags.ts
@@ -3,10 +3,12 @@ export type FeatureFlag =
| 'NEW_PROJECT_PAGE'
| 'NEW_CYCLE_CONFIG_PAGE'
| 'NEW_EDIT_NFTS'
+ | 'PAYOUTS_TABLE_CREATE_FLOW'
export const FEATURE_FLAGS: { [k in FeatureFlag]: string } = {
SIMULATE_TXS: 'simulateTxs',
NEW_PROJECT_PAGE: 'newProjectPage',
NEW_CYCLE_CONFIG_PAGE: 'newCycleConfigPage',
NEW_EDIT_NFTS: 'newEditNfts',
+ PAYOUTS_TABLE_CREATE_FLOW: 'payoutsTableCreateFlow',
}
diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index b89a0dfc0e..158cfa5f24 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -395,9 +395,6 @@ msgstr ""
msgid "Tokens receiver"
msgstr ""
-msgid "Pay out ETH from your project to the Ethereum wallets or Juicebox projects of your choice. ETH which <0>isn't0> paid out will be available for token redemptions, or for use in future cycles. Payouts reset each cycle."
-msgstr ""
-
msgid "Next:"
msgstr ""
@@ -2000,6 +1997,9 @@ msgstr ""
msgid "{0} reserved"
msgstr ""
+msgid "Pay out ETH from your project to any Ethereum wallet or Juicebox project. ETH which <0>isn't0> paid out will be available for token redemptions, or for use in future cycles. Payouts reset each cycle."
+msgstr ""
+
msgid "Built for ideas like yours"
msgstr ""