diff --git a/src/components/Project/ProjectTabs/utils/pairToDatum.ts b/src/components/Project/ProjectTabs/utils/pairToDatum.ts
index ad0aa0429d..23be161fa8 100644
--- a/src/components/Project/ProjectTabs/utils/pairToDatum.ts
+++ b/src/components/Project/ProjectTabs/utils/pairToDatum.ts
@@ -2,8 +2,8 @@ import { ConfigurationPanelDatum } from 'components/Project/ProjectTabs/CyclesPa
export const pairToDatum = (
name: string,
- current: string | undefined,
- upcoming: string | undefined | null,
+ current: string | JSX.Element | undefined,
+ upcoming: string | JSX.Element | undefined | null,
link?: string,
easyCopy?: boolean,
): ConfigurationPanelDatum => {
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/HistorySubPanel.test.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/HistorySubPanel.test.tsx
deleted file mode 100644
index 49e3116fd3..0000000000
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/HistorySubPanel.test.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { render, screen } from '@testing-library/react'
-import { BigNumber } from 'ethers'
-import { FundingCyclesQuery } from 'generated/graphql'
-import { usePastFundingCycles } from '../hooks/usePastFundingCycles'
-import { HistorySubPanel } from './HistorySubPanel'
-
-jest.mock('../hooks/usePastFundingCycles')
-jest.mock('@headlessui/react', () => {
- return {
- __esModule: true,
- Disclosure: jest.requireActual('@headlessui/react').Disclosure,
- Transition: jest
- .fn()
- .mockImplementation(({ children, show }) => (
-
{show && children}
- )),
- }
-})
-jest.mock('./HistoricalConfigurationPanel', () => {
- return {
- __esModule: true,
- HistoricalConfigurationPanel: jest
- .fn()
- .mockImplementation(({ fundingCycle, metadata }) => (
- {JSON.stringify(metadata)}
- )),
- }
-})
-
-describe('HistorySubPanel', () => {
- const mockFundingCycles: FundingCyclesQuery['fundingCycles'] = [
- {
- ballot: '0x4b9f876c7fc5f6def8991fde639b2c812a85fb12',
- ballotRedemptionRate: 6000,
- basedOn: 1685615915,
- burnPaused: false,
- configuration: BigNumber.from('1686266495'),
- controllerMigrationAllowed: true,
- dataSource: '0x0000000000000000000000000000000000000000',
- discountRate: BigNumber.from('15000000'),
- distributionsPaused: false,
- duration: 604800,
- id: '2-397-37',
- metadata: BigNumber.from('453635417129768049443073'),
- metametadata: 0,
- mintingAllowed: false,
- mustStartAtOrAfter: null,
- number: 37,
- pausePay: false,
- preferClaimedTokenOverride: false,
- projectId: 397,
- redeemPaused: false,
- redemptionRate: 6000,
- reservedRate: 5000,
- setControllerAllowed: false,
- setTerminalsAllowed: true,
- shouldHoldFees: false,
- startTimestamp: 1694997023,
- terminalMigrationAllowed: true,
- transfersPaused: false,
- useDataSourceForPay: false,
- useDataSourceForRedeem: false,
- useTotalOverflowForRedemptions: false,
- weight: BigNumber.from('341957057837004498728584'),
- withdrawnAmount: BigNumber.from('30779487181046138000000'),
- },
- ]
-
- beforeEach(() => {
- ;(usePastFundingCycles as jest.Mock).mockReturnValue({
- loading: false,
- data: {
- fundingCycles: mockFundingCycles,
- },
- error: null,
- })
- })
-
- it('renders without crashing', () => {
- render()
- })
-
- it('displays correct cycle data', () => {
- render()
- expect(
- screen.getByText(`#${mockFundingCycles[0].number}`),
- ).toBeInTheDocument()
- })
-})
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx
index 329294c3b2..52880d268e 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectDashboard.tsx
@@ -1,3 +1,4 @@
+import { Footer } from 'components/Footer/Footer'
import { CoverPhoto } from 'components/Project/ProjectHeader/CoverPhoto'
import { SuccessPayView } from 'packages/v4/components/ProjectDashboard/components/SuccessPayView/SuccessPayView'
import { useProjectDispatch } from 'packages/v4/components/ProjectDashboard/redux/hooks'
@@ -27,7 +28,7 @@ export function V4ProjectDashboard() {
-
+
+
>
)
}
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4FormatConfigurationCycleSection.ts b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4FormatConfigurationCycleSection.tsx
similarity index 97%
rename from src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4FormatConfigurationCycleSection.ts
rename to src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4FormatConfigurationCycleSection.tsx
index 5bbaf06828..d3574c11f7 100644
--- a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4FormatConfigurationCycleSection.ts
+++ b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4FormatConfigurationCycleSection.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro'
import { ConfigurationPanelDatum } from 'components/Project/ProjectTabs/CyclesPayoutsTab/ConfigurationPanel'
import { pairToDatum } from 'components/Project/ProjectTabs/utils/pairToDatum'
import { JBRulesetData } from 'juice-sdk-core'
+import { NativeTokenValue } from 'juice-sdk-react'
import { V4CurrencyOption } from 'packages/v4/models/v4CurrencyOption'
import { getApprovalStrategyByAddress } from 'packages/v4/utils/approvalHooks'
import { formatCurrencyAmount } from 'packages/v4/utils/formatCurrencyAmount'
@@ -83,7 +84,7 @@ export const useV4FormatConfigurationCycleSection = ({
const payoutsDatum: ConfigurationPanelDatum = useMemo(() => {
const { amount, currency } = payoutLimitAmountCurrency ?? {}
- const currentPayout = formatPayoutAmount(amount, currency)
+ const currentPayout =
if (
upcomingPayoutLimitAmountCurrency === null ||