Ensure payouts is hidden on v4 create (#4550)

src/packages/v4/components/Create/components/pages/PayoutsPage/PayoutsPage.tsx

@@ -1,16 +1,21 @@
 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'
 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 (
     <CreateFlowPayoutsTable
+      createTreasurySelection={treasurySelection}
       onFinish={() => {
         goToNextPage?.()
       }}

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 */}
       <Form.Item shouldUpdate name="payoutsList" className="mb-0" />

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<TreasurySelection>(
     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}
       />
     </>
   )

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() {
                         <Trans>Address or ID</Trans>
                       </Cell>
                       <Cell>
-                        {hasDistributionLimit ?
+                        {hasDistributionLimit ? (
                           <CurrencySwitcher />
-                        : <Trans>Percent</Trans>}
+                        ) : (
+                          <Trans>Percent</Trans>
+                        )}
                       </Cell>
                     </Row>
                   ) : null}

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<