From 034c4fe4417c58aa0a1ad89022bca5a47c768969 Mon Sep 17 00:00:00 2001 From: Wraeth Date: Mon, 25 Nov 2024 11:08:46 +1000 Subject: [PATCH 1/2] Hide payouts on create when set to zero amount --- .../pages/PayoutsPage/PayoutsPage.tsx | 6 ++++++ .../components/CreateFlowPayoutsTable.tsx | 6 ++++++ .../components/TreasuryOptionsRadio.tsx | 18 +++++++++--------- .../shared/PayoutsTable/PayoutsTableBody.tsx | 16 ++++++++++++---- .../context/PayoutsTableContext.tsx | 3 +++ .../slices/shared/v2ProjectDefaultState.ts | 2 +- 6 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx index 8cba9c606d..6134864242 100644 --- a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx +++ b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx @@ -1,4 +1,5 @@ import { useContext } from 'react' +import { useAppSelector } from 'redux/hooks/useAppSelector' import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached' import { Wizard } from '../../Wizard/Wizard' import { PageContext } from '../../Wizard/contexts/PageContext' @@ -6,11 +7,16 @@ import { CreateFlowPayoutsTable } from './components/CreateFlowPayoutsTable' import { TreasuryOptionsRadio } from './components/TreasuryOptionsRadio' export const PayoutsPage = () => { + const treasurySelection = useAppSelector( + state => state.creatingV2Project.treasurySelection, + ) + useSetCreateFurthestPageReached('payouts') const { goToNextPage } = useContext(PageContext) return ( { goToNextPage?.() }} diff --git a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx index 9139ad9b9b..fb887c0db8 100644 --- a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx +++ b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx @@ -1,5 +1,6 @@ import { Form } from 'antd' import { CURRENCY_METADATA, CurrencyName } from 'constants/currency' +import { TreasurySelection } from 'models/treasurySelection' import { PayoutsTable } from 'packages/v2v3/components/shared/PayoutsTable/PayoutsTable' import { Split } from 'packages/v2v3/models/splits' import { @@ -23,11 +24,15 @@ export function CreateFlowPayoutsTable({ topAccessory, okButton, addPayoutsDisabled, + createTreasurySelection, }: { onFinish?: VoidFunction okButton?: ReactNode topAccessory?: ReactNode addPayoutsDisabled?: boolean + // TODO: Hack to allow payout recipients to be shown on review but not on create page + // When zero, hides the recipients, but undefined still shows them + createTreasurySelection?: TreasurySelection }) { const [ editingDistributionLimit, @@ -75,6 +80,7 @@ export function CreateFlowPayoutsTable({ hideExplaination hideSettings addPayoutsDisabled={addPayoutsDisabled} + createTreasurySelection={createTreasurySelection} /> {/* Empty form item just to keep AntD useWatch happy */} diff --git a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx index 0499a8dd47..e6a51d6e20 100644 --- a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx +++ b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx @@ -8,13 +8,11 @@ import { useModal } from 'hooks/useModal' import { TreasurySelection } from 'models/treasurySelection' import { ConvertAmountsModal } from 'packages/v2v3/components/shared/PayoutsTable/ConvertAmountsModal' import { usePayoutsTable } from 'packages/v2v3/components/shared/PayoutsTable/hooks/usePayoutsTable' -import { - V2V3_CURRENCY_ETH, - V2V3_CURRENCY_USD, -} from 'packages/v2v3/utils/currency' import { useCallback, useEffect, useMemo, useState } from 'react' +import { useAppDispatch } from 'redux/hooks/useAppDispatch' import { useAppSelector } from 'redux/hooks/useAppSelector' -import { ReduxDistributionLimit } from 'redux/hooks/v2v3/shared' +import { ReduxDistributionLimit } from 'redux/hooks/useEditingDistributionLimit' +import { creatingV2ProjectActions } from 'redux/slices/creatingV2Project' import { fromWad } from 'utils/format/formatNumber' import { Icons } from '../../../Icons' import { RadioCard } from './RadioCard' @@ -29,13 +27,14 @@ export function TreasuryOptionsRadio() { const initialTreasurySelection = useAppSelector( state => state.creatingV2Project.treasurySelection, ) + const dispatch = useAppDispatch() + const [treasuryOption, setTreasuryOption] = useState( initialTreasurySelection ?? 'zero', ) const { distributionLimit, - currency, setDistributionLimit, payoutSplits, setCurrency, @@ -106,17 +105,19 @@ export function TreasuryOptionsRadio() { switchToZeroPayoutSelection() } + dispatch(creatingV2ProjectActions.setTreasurySelection(option)) setTreasuryOption(option) }, [ treasuryOption, payoutSplits.length, + dispatch, switchingToAmountsModal, - switchingToUnlimitedModal, setDistributionLimit, + switchingToUnlimitedModal, + switchToUnlimitedPayouts, switchingToZeroAmountsModal, switchToZeroPayoutSelection, - switchToUnlimitedPayouts, ], ) @@ -172,7 +173,6 @@ export function TreasuryOptionsRadio() { onOk={switchToAmountsPayoutSelection} onCancel={switchingToAmountsModal.close} splits={payoutSplits} - currency={currency === 'ETH' ? V2V3_CURRENCY_ETH : V2V3_CURRENCY_USD} /> ) diff --git a/src/packages/v2v3/components/shared/PayoutsTable/PayoutsTableBody.tsx b/src/packages/v2v3/components/shared/PayoutsTable/PayoutsTableBody.tsx index 367c92ad48..2e6037aa14 100644 --- a/src/packages/v2v3/components/shared/PayoutsTable/PayoutsTableBody.tsx +++ b/src/packages/v2v3/components/shared/PayoutsTable/PayoutsTableBody.tsx @@ -16,7 +16,8 @@ const Row = PayoutsTableRow const Cell = PayoutsTableCell export function PayoutsTableBody() { - const { topAccessory, hideHeader } = usePayoutsTableContext() + const { topAccessory, hideHeader, createTreasurySelection } = + usePayoutsTableContext() const { payoutSplits, currency, @@ -28,6 +29,11 @@ export function PayoutsTableBody() { const hasDistributionLimit = distributionLimit && distributionLimit > 0 + if (createTreasurySelection === 'zero') { + // TODO: This feels like a hack, this should not be coupled here. + return <>{topAccessory} + } + return ( <> {topAccessory} @@ -59,9 +65,11 @@ export function PayoutsTableBody() { Address or ID - {hasDistributionLimit ? - - : Percent} + {hasDistributionLimit ? ( + + ) : ( + Percent + )} ) : null} {payoutSplits.map((payoutSplit, index) => ( diff --git a/src/packages/v2v3/components/shared/PayoutsTable/context/PayoutsTableContext.tsx b/src/packages/v2v3/components/shared/PayoutsTable/context/PayoutsTableContext.tsx index 7f5a04622c..5453075780 100644 --- a/src/packages/v2v3/components/shared/PayoutsTable/context/PayoutsTableContext.tsx +++ b/src/packages/v2v3/components/shared/PayoutsTable/context/PayoutsTableContext.tsx @@ -1,4 +1,5 @@ import { CurrencyName } from 'constants/currency' +import { TreasurySelection } from 'models/treasurySelection' import { Split } from 'packages/v2v3/models/splits' import { ReactNode, createContext, useContext } from 'react' @@ -16,6 +17,8 @@ export interface PayoutsTableContextProps { topAccessory?: ReactNode hideSettings?: boolean addPayoutsDisabled?: boolean + // TODO: Hack to allow the create payouts table to hide data if set to none. + createTreasurySelection?: TreasurySelection } export const PayoutsTableContext = createContext< diff --git a/src/redux/slices/shared/v2ProjectDefaultState.ts b/src/redux/slices/shared/v2ProjectDefaultState.ts index 92637a20f1..aec047faca 100644 --- a/src/redux/slices/shared/v2ProjectDefaultState.ts +++ b/src/redux/slices/shared/v2ProjectDefaultState.ts @@ -120,7 +120,7 @@ const DEFAULT_PROJECT_METADATA_STATE: ProjectMetadata = { } const DEFAULT_CREATE_STATE: CreateState = { - treasurySelection: undefined, + treasurySelection: 'zero', reconfigurationRuleSelection: undefined, fundingCyclesPageSelection: undefined, createFurthestPageReached: 'projectDetails', From 48534c499fc797c0dc989a46ad61c0c775ca1178 Mon Sep 17 00:00:00 2001 From: Wraeth Date: Fri, 29 Nov 2024 17:47:59 +1000 Subject: [PATCH 2/2] fix error --- .../pages/PayoutsPage/components/TreasuryOptionsRadio.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx index e6a51d6e20..6327320d90 100644 --- a/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx +++ b/src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx @@ -8,10 +8,11 @@ import { useModal } from 'hooks/useModal' import { TreasurySelection } from 'models/treasurySelection' import { ConvertAmountsModal } from 'packages/v2v3/components/shared/PayoutsTable/ConvertAmountsModal' import { usePayoutsTable } from 'packages/v2v3/components/shared/PayoutsTable/hooks/usePayoutsTable' +import { V4_CURRENCY_ETH, V4_CURRENCY_USD } from 'packages/v4/utils/currency' import { useCallback, useEffect, useMemo, useState } from 'react' import { useAppDispatch } from 'redux/hooks/useAppDispatch' import { useAppSelector } from 'redux/hooks/useAppSelector' -import { ReduxDistributionLimit } from 'redux/hooks/useEditingDistributionLimit' +import { ReduxDistributionLimit } from 'redux/hooks/v2v3/shared' import { creatingV2ProjectActions } from 'redux/slices/creatingV2Project' import { fromWad } from 'utils/format/formatNumber' import { Icons } from '../../../Icons' @@ -35,6 +36,7 @@ export function TreasuryOptionsRadio() { const { distributionLimit, + currency, setDistributionLimit, payoutSplits, setCurrency, @@ -169,6 +171,7 @@ export function TreasuryOptionsRadio() { onClose={switchingToUnlimitedModal.close} />