hide payouts create zero amount (#4517)

Author: wraeth-eth

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

@@ -1,16 +1,22 @@
 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/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 */}
       <Form.Item shouldUpdate name="payoutsList" className="mb-0" />

src/packages/v2v3/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,8 @@ export function TreasuryOptionsRadio() {
   const initialTreasurySelection = useAppSelector(
     state => state.creatingV2Project.treasurySelection,
   )
+  const dispatch = useAppDispatch()
+
   const [treasuryOption, setTreasuryOption] = useState<TreasurySelection>(
     initialTreasurySelection ?? 'zero',
   )
@@ -106,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,
     ],
   )
 
@@ -168,11 +171,11 @@ export function TreasuryOptionsRadio() {
         onClose={switchingToUnlimitedModal.close}
       />
       <ConvertAmountsModal
+        currency={currency === 'ETH' ? V4_CURRENCY_ETH : V4_CURRENCY_USD}
         open={switchingToAmountsModal.visible}
         onOk={switchToAmountsPayoutSelection}
         onCancel={switchingToAmountsModal.close}
         splits={payoutSplits}
-        currency={currency === 'ETH' ? V2V3_CURRENCY_ETH : V2V3_CURRENCY_USD}
       />
     </>
   )

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() {
                       <Cell>
                         <Trans>Address or ID</Trans>
                       </Cell>
-                      {hasDistributionLimit ?
-                          <CurrencySwitcher />
-                      : <Trans>Percent</Trans>}
+                      {hasDistributionLimit ? (
+                        <CurrencySwitcher />
+                      ) : (
+                        <Trans>Percent</Trans>
+                      )}
                     </Row>
                   ) : null}
                   {payoutSplits.map((payoutSplit, index) => (

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<

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',