From 025990e2630adb94339822f9df42e9f35f782e1c Mon Sep 17 00:00:00 2001 From: Johnny D Date: Wed, 20 Sep 2023 02:16:53 +1000 Subject: [PATCH] New payouts table in create flow behind feature flag (#4074) Co-authored-by: Tom Quirk <12551741+tomquirk@users.noreply.github.com> --- src/components/Create/Create.tsx | 17 ++-- .../pages/PayoutsPage/NewPayoutsPage.tsx | 82 +++++++++++++++++++ .../PayoutsTable/PayoutSplitRow.tsx | 5 -- .../PayoutsTable/PayoutsTableBody.tsx | 5 -- .../modals/SwitchToLimitedModal.tsx | 8 +- .../modals/SwitchToUnlimitedModal.tsx | 11 +-- .../PayoutsSection/hooks/usePayoutsTable.tsx | 6 ++ src/constants/featureFlags.ts | 2 + src/locales/messages.pot | 6 +- 9 files changed, 110 insertions(+), 32 deletions(-) create mode 100644 src/components/Create/components/pages/PayoutsPage/NewPayoutsPage.tsx 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 ( +
{ + goToNextPage?.() + }} + > + + {/* Empty form item just to keep AntD useWatch happy */} + + + + ) +} 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't 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't 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 ""