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 {