diff --git a/src/components/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useDistributableAmount.ts b/src/components/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useDistributableAmount.ts
index 43953228b4..5cceb51a3b 100644
--- a/src/components/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useDistributableAmount.ts
+++ b/src/components/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useDistributableAmount.ts
@@ -12,9 +12,8 @@ export const useDistributableAmount = () => {
distributionLimitCurrency,
} = useContext(V2V3ProjectContext)
- const currency =
- distributionLimitCurrency?.toNumber() ??
- (V2V3_CURRENCY_ETH as V2V3CurrencyOption)
+ const currency = (distributionLimitCurrency?.toNumber() ||
+ V2V3_CURRENCY_ETH) as V2V3CurrencyOption
const effectiveDistributionLimit = distributionLimit ?? BigNumber.from(0)
const distributedAmount = usedDistributionLimit ?? BigNumber.from(0)
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsDashboard.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsDashboard.tsx
index 45e472763c..b9bc1973f9 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsDashboard.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsDashboard.tsx
@@ -111,7 +111,7 @@ export function ProjectSettingsDashboard() {
Available payout
- {currency && !distributionLimitLoading ? (
+ {!distributionLimitLoading ? (
-
+
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCycleFormSection.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCycleFormSection.tsx
index 41fb0f71a1..369cfb10e6 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCycleFormSection.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCycleFormSection.tsx
@@ -1,18 +1,20 @@
+import React, { forwardRef, ReactNode } from 'react'
import { EditCycleHeader } from './EditCycleHeader'
-export function EditCycleFormSection({
- title,
- description,
- children,
- className,
-}: {
+interface EditCycleFormSectionProps {
title: JSX.Element
description: JSX.Element
- children: React.ReactNode
+ children: ReactNode
className?: string
-}) {
+}
+
+function EditCycleFormSection(
+ { title, description, children, className }: EditCycleFormSectionProps,
+ ref: React.Ref,
+) {
return (
@@ -20,3 +22,7 @@ export function EditCycleFormSection({
)
}
+
+export default forwardRef(
+ EditCycleFormSection,
+)
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCyclePage.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCyclePage.tsx
index e30317a80d..5e6e8d7cf9 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCyclePage.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCyclePage.tsx
@@ -5,11 +5,12 @@ import { ExternalLinkWithIcon } from 'components/ProjectDashboard/components/ui/
import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
import { V2V3ProjectContext } from 'contexts/v2v3/Project/V2V3ProjectContext'
import Link from 'next/link'
-import { useContext, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useContext, useEffect, useRef, useState } from 'react'
import { helpPagePath, settingsPagePath } from 'utils/routes'
import { DetailsSection } from './DetailsSection'
import { useEditCycleFormContext } from './EditCycleFormContext'
-import { EditCycleFormSection } from './EditCycleFormSection'
+import EditCycleFormSection from './EditCycleFormSection'
import { PayoutsSection } from './PayoutsSection'
import { ReviewConfirmModal } from './ReviewConfirmModal'
import { TokensSection } from './TokensSection'
@@ -17,6 +18,7 @@ import { useEditCycleFormHasError } from './hooks/useEditCycleFormHasError'
export function EditCyclePage() {
const [confirmModalOpen, setConfirmModalOpen] = useState(false)
+ const [firstRender, setFirstRender] = useState(true)
const { projectId } = useContext(ProjectMetadataContext)
const { handle } = useContext(V2V3ProjectContext)
@@ -26,11 +28,38 @@ export function EditCyclePage() {
const { error } = useEditCycleFormHasError()
+ const router = useRouter()
+ const { section } = router.query
+
+ const detailsRef = useRef(null)
+ const payoutsRef = useRef(null)
+ const tokensRef = useRef(null)
+
+ useEffect(() => {
+ if (initialFormData && firstRender) {
+ switch (section) {
+ case 'details':
+ detailsRef.current?.scrollIntoView({ behavior: 'smooth' })
+ break
+ case 'payouts':
+ payoutsRef.current?.scrollIntoView({ behavior: 'smooth' })
+ break
+ case 'tokens':
+ tokensRef.current?.scrollIntoView({ behavior: 'smooth' })
+ break
+ default:
+ break
+ }
+ setFirstRender(false)
+ }
+ }, [section, firstRender, initialFormData])
+
const handleFormValuesChange = () => {
if (!formHasUpdated) {
setFormHasUpdated(true)
}
}
+
if (!initialFormData) return
return (
@@ -56,6 +85,7 @@ export function EditCyclePage() {
onValuesChange={handleFormValuesChange}
>
Details}
description={
@@ -67,6 +97,7 @@ export function EditCyclePage() {
Payouts}
description={
How your project will be paid and pay out in ETH.
@@ -76,6 +107,7 @@ export function EditCyclePage() {
Tokens}
description={
Manage how your projects tokens should work.
diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx
index 6444cb57f6..2e1dfecdcb 100644
--- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx
+++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/PayoutsSection/hooks/usePayoutsTable.tsx
@@ -394,7 +394,7 @@ export const usePayoutsTable = () => {
function handleDeleteAllPayoutSplits() {
setDistributionLimit(0)
- setPayoutSplits([])
+ _setPayoutSplits([])
}
return {