diff --git a/src/packages/v4/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx b/src/packages/v4/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx index 8cba9c606d..c2e2563baf 100644 --- a/src/packages/v4/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx +++ b/src/packages/v4/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,15 @@ 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/v4/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx b/src/packages/v4/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx index e66403b8f7..204b0260ef 100644 --- a/src/packages/v4/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx +++ b/src/packages/v4/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx @@ -1,6 +1,7 @@ import { Form } from 'antd' import { CURRENCY_METADATA, CurrencyName } from 'constants/currency' import { BigNumber } from 'ethers' +import { TreasurySelection } from 'models/treasurySelection' import { PayoutsTable } from 'packages/v2v3/components/shared/PayoutsTable/PayoutsTable' import { Split } from 'packages/v2v3/models/splits' import { @@ -24,11 +25,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 [ creatingDistributionLimit, @@ -78,6 +83,7 @@ export function CreateFlowPayoutsTable({ hideExplaination hideSettings addPayoutsDisabled={addPayoutsDisabled} + createTreasurySelection={createTreasurySelection} /> {/* Empty form item just to keep AntD useWatch happy */} diff --git a/src/packages/v4/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx b/src/packages/v4/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx index 4026d92094..d4c2fffb25 100644 --- a/src/packages/v4/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx +++ b/src/packages/v4/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx @@ -8,13 +8,12 @@ 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 { 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/v2v3/shared' +import { creatingV2ProjectActions } from 'redux/slices/creatingV2Project' import { fromWad } from 'utils/format/formatNumber' import { Icons } from '../../../Icons' import { RadioCard } from './RadioCard' @@ -29,6 +28,7 @@ export function TreasuryOptionsRadio() { const initialTreasurySelection = useAppSelector( state => state.creatingV2Project.treasurySelection, ) + const dispatch = useAppDispatch() const [treasuryOption, setTreasuryOption] = useState( initialTreasurySelection ?? 'zero', @@ -65,14 +65,14 @@ export function TreasuryOptionsRadio() { setTreasuryOption('amount') switchingToAmountsModal.close() }, - [setDistributionLimit, switchingToAmountsModal, setCurrency], + [setDistributionLimit, setCurrency, switchingToAmountsModal], ) const switchToUnlimitedPayouts = useCallback(() => { setDistributionLimit(undefined) setTreasuryOption('unlimited') switchingToUnlimitedModal.close() - }, [switchingToUnlimitedModal, setDistributionLimit]) + }, [setDistributionLimit, switchingToUnlimitedModal]) const switchToZeroPayoutSelection = useCallback(() => { setPayoutSplits([]) @@ -107,17 +107,19 @@ export function TreasuryOptionsRadio() { switchToZeroPayoutSelection() } + dispatch(creatingV2ProjectActions.setTreasurySelection(option)) setTreasuryOption(option) }, [ treasuryOption, payoutSplits.length, + dispatch, switchingToAmountsModal, - switchingToUnlimitedModal, setDistributionLimit, + switchingToUnlimitedModal, + switchToUnlimitedPayouts, switchingToZeroAmountsModal, switchToZeroPayoutSelection, - switchToUnlimitedPayouts, ], ) @@ -173,7 +175,7 @@ export function TreasuryOptionsRadio() { onOk={switchToAmountsPayoutSelection} onCancel={switchingToAmountsModal.close} splits={payoutSplits} - currency={currency === 'ETH' ? V2V3_CURRENCY_ETH : V2V3_CURRENCY_USD} + currency={currency === 'ETH' ? V4_CURRENCY_ETH : V4_CURRENCY_USD} /> ) diff --git a/src/packages/v4/components/PayoutsTable/PayoutsTableBody.tsx b/src/packages/v4/components/PayoutsTable/PayoutsTableBody.tsx index f61c05ef61..b21e359499 100644 --- a/src/packages/v4/components/PayoutsTable/PayoutsTableBody.tsx +++ b/src/packages/v4/components/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} @@ -60,9 +66,11 @@ export function PayoutsTableBody() { Address or ID - {hasDistributionLimit ? + {hasDistributionLimit ? ( - : Percent} + ) : ( + Percent + )} ) : null} diff --git a/src/packages/v4/components/PayoutsTable/context/PayoutsTableContext.tsx b/src/packages/v4/components/PayoutsTable/context/PayoutsTableContext.tsx index 401730b83f..243633a352 100644 --- a/src/packages/v4/components/PayoutsTable/context/PayoutsTableContext.tsx +++ b/src/packages/v4/components/PayoutsTable/context/PayoutsTableContext.tsx @@ -1,5 +1,6 @@ import { CurrencyName } from 'constants/currency' import { JBSplit as Split } from 'juice-sdk-core' +import { TreasurySelection } from 'models/treasurySelection' import { ReactNode, createContext, useContext } from 'react' export interface PayoutsTableContextProps { @@ -15,6 +16,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<