Settings page: Fix "Available payout" loading bug and update "Edit pa…

…yout" link (#4048)

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)

src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsDashboard.tsx

@@ -111,7 +111,7 @@ export function ProjectSettingsDashboard() {
                 <Trans>Available payout</Trans>
               </div>
               <div className="text-xl">
-                {currency && !distributionLimitLoading ? (
+                {!distributionLimitLoading ? (
                   <AmountInCurrency
                     amount={distributableAmount}
                     currency={V2V3CurrencyName(currency as V2V3CurrencyOption)}
@@ -121,7 +121,7 @@ export function ProjectSettingsDashboard() {
                 )}
               </div>
             </div>
-            <Link href={useSettingsPagePath('payouts')}>
+            <Link href={`${useSettingsPagePath('cycle')}?section=payouts`}>
               <Button type="primary">
                 <Trans>Edit payout</Trans>
               </Button>

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCycleFormSection.tsx

@@ -1,22 +1,28 @@
+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<HTMLDivElement>,
+) {
   return (
     <section
+      ref={ref}
       className={`grid gap-8 border-b border-b-grey-300 pt-6 pb-16 dark:border-b-grey-600 md:grid-cols-[280px_1fr] ${className}`}
     >
       <EditCycleHeader title={title} description={description} />
       <div className="flex flex-col gap-8">{children}</div>
     </section>
   )
 }
+
+export default forwardRef<HTMLDivElement, EditCycleFormSectionProps>(
+  EditCycleFormSection,
+)

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/EditCyclePage.tsx

@@ -5,18 +5,20 @@ 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'
 import { useEditCycleFormHasError } from './hooks/useEditCycleFormHasError'
 
 export function EditCyclePage() {
   const [confirmModalOpen, setConfirmModalOpen] = useState<boolean>(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<HTMLDivElement>(null)
+  const payoutsRef = useRef<HTMLDivElement>(null)
+  const tokensRef = useRef<HTMLDivElement>(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 <Loading className="h-70" />
 
   return (
@@ -56,6 +85,7 @@ export function EditCyclePage() {
           onValuesChange={handleFormValuesChange}
         >
           <EditCycleFormSection
+            ref={detailsRef}
             title={<Trans>Details</Trans>}
             description={
               <Trans>
@@ -67,6 +97,7 @@ export function EditCyclePage() {
           </EditCycleFormSection>
 
           <EditCycleFormSection
+            ref={payoutsRef}
             title={<Trans>Payouts</Trans>}
             description={
               <Trans>How your project will be paid and pay out in ETH.</Trans>
@@ -76,6 +107,7 @@ export function EditCyclePage() {
           </EditCycleFormSection>
 
           <EditCycleFormSection
+            ref={tokensRef}
             title={<Trans>Tokens</Trans>}
             description={
               <Trans>Manage how your projects tokens should work.</Trans>

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 {