feat: chain selector in send payouts modal

johnnyd-eth · johnnyd-eth · commit 2069a17ffdbc · 2025-02-09T01:16:22.000+08:00
diff --git a/src/packages/v4/components/ChainSelect.tsx b/src/packages/v4/components/ChainSelect.tsx
@@ -1,6 +1,7 @@
+import { JBChainId, SuckerPair } from 'juice-sdk-core'
+
 import { JuiceListbox } from 'components/inputs/JuiceListbox'
 import { NETWORKS } from 'constants/networks'
-import { JBChainId, SuckerPair } from 'juice-sdk-core'
 import { ChainLogo } from './ChainLogo'
 
 function ChainSelectOption({
@@ -22,10 +23,12 @@ export const ChainSelect = ({
   value,
   onChange,
   suckers,
+  showSelectedName
 }: {
   value: JBChainId | undefined
   onChange: (chainId: JBChainId) => void
   suckers: SuckerPair[]
+  showSelectedName?: boolean // Otherwise just shows logo of selected chain
 }) => {
   const allowedChainIds = new Set(suckers?.map(sucker => sucker.peerChainId))
   const networkOptions = Object.entries(NETWORKS)
@@ -40,16 +43,30 @@ export const ChainSelect = ({
       value: parseInt(chainId) as JBChainId,
     }))
 
+
+  let _valueLabel = <></>
+  
+  if (value) {
+    _valueLabel = showSelectedName ? (
+      <div className="flex justify-center items-center gap-2">
+        <ChainLogo chainId={value} />
+        {NETWORKS[value]?.label}
+      </div>
+    ) : <ChainLogo chainId={value} />
+  }
+
   const _value = {
     value,
-    label: value ? <ChainLogo chainId={value} /> : 'Select chain',
+    label: value ? _valueLabel : 'Select chain',
   }
 
   return (
     <JuiceListbox
       value={_value}
       onChange={({ value: selectedChainId }) => {
-        onChange(selectedChainId as JBChainId)
+        if (selectedChainId) {
+          onChange(selectedChainId)
+        }
       }}
       options={networkOptions}
       buttonClassName="w-18"
diff --git a/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts b/src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts
@@ -161,7 +161,12 @@ export const usePayProjectTx = ({
       try {
         const hash = await writePay({
           chainId,
-          address: contracts.primaryNativeTerminal.data,
+          address: contracts.primaryNativeTerminal.data, 
+          // v4TODO Q: shouldnt above be:
+          // useReadJbDirectoryPrimaryTerminalOf({
+          //   chainId: selectedChainId,
+          //   args: [projectId, NATIVE_TOKEN],
+          // })   ???
           args,
           value: weiAmount,
         })
diff --git a/src/packages/v4/hooks/usePayoutLimitOfChain.ts b/src/packages/v4/hooks/usePayoutLimitOfChain.ts
@@ -0,0 +1,58 @@
+import * as constants from '@ethersproject/constants'
+
+import {
+  JBChainId,
+  useJBContractContext,
+  useJBRuleset,
+  useReadJbFundAccessLimitsPayoutLimitsOf,
+} from 'juice-sdk-react'
+
+import { NATIVE_TOKEN } from 'juice-sdk-core'
+import { V4CurrencyOption } from '../models/v4CurrencyOption'
+import { V4_CURRENCY_ETH } from '../utils/currency'
+
+/**
+ * V4todo: add to SDK
+ */
+export function usePayoutLimitOfChain({
+  chainId,
+  projectId,
+}: {
+  chainId: JBChainId | undefined,
+  projectId: bigint | undefined
+}) {
+  const {
+    contracts: { primaryNativeTerminal, fundAccessLimits },
+  } = useJBContractContext()
+  const { data: ruleset } = useJBRuleset()
+  const { data: payoutLimits, isLoading } =
+    useReadJbFundAccessLimitsPayoutLimitsOf({
+      address: fundAccessLimits.data ?? undefined,
+      chainId,
+      args: [
+        projectId ?? 0n,
+        BigInt(ruleset?.id ?? 0),
+        primaryNativeTerminal.data ?? constants.AddressZero, // v4TODO: should be below?
+        // useReadJbDirectoryPrimaryTerminalOf({
+          //   chainId,
+          //   args: [projectId, NATIVE_TOKEN],
+          // })  
+        NATIVE_TOKEN,
+      ],
+    })
+
+  const payoutLimit = payoutLimits?.[0]
+
+  return {
+    data: payoutLimit
+      ? {
+          ...payoutLimit,
+          currency: Number(payoutLimit.currency) as V4CurrencyOption,
+        }
+      : {
+          amount: 0n,
+          currency: V4_CURRENCY_ETH,
+        },
+    isLoading,
+  }
+}
diff --git a/src/packages/v4/hooks/useUsedPayoutLimitOf.ts b/src/packages/v4/hooks/useUsedPayoutLimitOf.ts
@@ -1,23 +1,36 @@
 import { NATIVE_CURRENCY_ID, NATIVE_TOKEN } from 'juice-sdk-core'
 import {
+  JBChainId,
   useJBContractContext,
   useJBRulesetContext,
   useJBTerminalContext,
   useReadJbTerminalStoreUsedPayoutLimitOf,
 } from 'juice-sdk-react'
+
 import { zeroAddress } from 'viem'
 
-export const useUsedPayoutLimitOf = () => {
+export const useUsedPayoutLimitOf = ({
+  chainId,
+  projectId,
+}: {
+  chainId: JBChainId | undefined,
+  projectId: bigint | undefined
+}) => {
   const { store } = useJBTerminalContext()
-  const { projectId, contracts } = useJBContractContext()
+  const { contracts } = useJBContractContext()
   const { ruleset } = useJBRulesetContext()
 
   const { data: usedPayoutLimit, isLoading } =
     useReadJbTerminalStoreUsedPayoutLimitOf({
       address: store.data ?? undefined,
+      chainId,
       args: [
-        contracts.primaryNativeTerminal.data ?? zeroAddress,
-        projectId,
+        contracts.primaryNativeTerminal.data ?? zeroAddress, // v4TODO: should be below?
+        // useReadJbDirectoryPrimaryTerminalOf({
+          //   chainId: selectedChainId,
+          //   args: [projectId, NATIVE_TOKEN],
+          // })  
+        projectId ?? 0n,
         NATIVE_TOKEN,
         BigInt(ruleset.data?.cycleNumber ?? 0),
         BigInt(NATIVE_CURRENCY_ID),
diff --git a/src/packages/v4/hooks/useV4BalanceOfNativeTerminal.ts b/src/packages/v4/hooks/useV4BalanceOfNativeTerminal.ts
@@ -1,20 +1,27 @@
-import { NATIVE_TOKEN } from 'juice-sdk-core';
 import {
+  JBChainId,
   useJBContractContext,
   useJBTerminalContext,
   useReadJbTerminalStoreBalanceOf,
 } from 'juice-sdk-react';
+
+import { NATIVE_TOKEN } from 'juice-sdk-core';
 import { zeroAddress } from 'viem';
 
-export const useV4BalanceOfNativeTerminal = () => {
+export const useV4BalanceOfNativeTerminal = ({ chainId, projectId }: { chainId: JBChainId | undefined, projectId: bigint | undefined }) => {
   const { store } = useJBTerminalContext();
-  const { projectId, contracts } = useJBContractContext();
+  const { contracts } = useJBContractContext();
 
   const { data: treasuryBalance, isLoading } = useReadJbTerminalStoreBalanceOf({
     address: store.data ?? undefined,
+    chainId,
     args: [
-      contracts.primaryNativeTerminal.data ?? zeroAddress,
-      projectId,
+      contracts.primaryNativeTerminal.data ?? zeroAddress, // is this right, or should be below?
+      // useReadJbDirectoryPrimaryTerminalOf({
+          //   chainId,
+          //   args: [projectId, NATIVE_TOKEN],
+          // }) 
+      projectId ?? 0n,
       NATIVE_TOKEN,
     ],
   });
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/V4CurrentUpcomingSubPanel.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/V4CurrentUpcomingSubPanel.tsx
@@ -4,7 +4,8 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { currentCycleRemainingLengthTooltip } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CyclesPanelTooltips'
 import { UpcomingCycleChangesCallout } from 'components/Project/ProjectTabs/CyclesPayoutsTab/UpcomingCycleChangesCallout'
 import { TitleDescriptionDisplayCard } from 'components/Project/ProjectTabs/TitleDescriptionDisplayCard'
-import { ProjectChainSelect } from 'packages/v4/components/ProjectDashboard/ProjectChainSelect'
+import { useSuckers } from 'juice-sdk-react'
+import { ChainSelect } from 'packages/v4/components/ChainSelect'
 import { RulesetCountdownProvider } from 'packages/v4/contexts/RulesetCountdownProvider'
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -38,6 +39,8 @@ export const V4CurrentUpcomingSubPanel = ({
   const { selectedChainId, setSelectedChainId } = useCyclesPanelSelectedChain()
   // const { data: rulesetsDiffAcrossChains } = useProjectRulesetsDiffAcrossChains({ rulesetNumber: info.rulesetNumber} )
 
+  const { data: suckers} = useSuckers()
+  
   const rulesetLengthTooltip =
     info.type === 'current' ? currentCycleRemainingLengthTooltip : undefined
 
@@ -95,10 +98,14 @@ export const V4CurrentUpcomingSubPanel = ({
         <div className="absolute left-44 top-[-6px]">
           { selectedChainId ?
             <div className="flex items-center gap-1">
-              <ProjectChainSelect 
-                value={selectedChainId} 
-                onChange={(chainId) => setSelectedChainId(chainId)} 
-              />
+              {suckers && suckers.length > 1 ? (
+                <ChainSelect 
+                  value={selectedChainId} 
+                  onChange={(chainId) => setSelectedChainId(chainId)} 
+                  suckers={suckers}
+                  showSelectedName
+                />
+              ): null}
               {/* { rulesetsDiffAcrossChains?.length ? 
                 <Tooltip
                   title={
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/V4DistributePayoutsModal.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/V4DistributePayoutsModal.tsx
@@ -1,7 +1,10 @@
 import { Trans, t } from '@lingui/macro'
 import { NATIVE_TOKEN, NATIVE_TOKEN_DECIMALS } from 'juice-sdk-core'
 import {
+  JBChainId,
   useJBContractContext,
+  useReadJbDirectoryPrimaryTerminalOf,
+  useSuckers,
   useWriteJbMultiTerminalSendPayoutsOf,
 } from 'juice-sdk-react'
 import { V4CurrencyName, V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
@@ -14,7 +17,9 @@ import { Callout } from 'components/Callout/Callout'
 import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
 import TransactionModal from 'components/modals/TransactionModal'
 import { FEES_EXPLANATION } from 'components/strings'
+import { NETWORKS } from 'constants/networks'
 import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
+import { ChainSelect } from 'packages/v4/components/ChainSelect'
 import { PayoutsTable } from 'packages/v4/components/PayoutsTable/PayoutsTable'
 import { usePayoutLimit } from 'packages/v4/hooks/usePayoutLimit'
 import { useV4CurrentPayoutSplits } from 'packages/v4/hooks/useV4CurrentPayoutSplits'
@@ -34,24 +39,39 @@ export default function V4DistributePayoutsModal({
 }) {
   const { data: payoutSplits } = useV4CurrentPayoutSplits()
   const { data: payoutLimit } = usePayoutLimit()
-  const { distributableAmount: distributable } = useV4DistributableAmount()
-  const { contracts, projectId } = useJBContractContext()
+  const { projectId } = useJBContractContext()
   const { addTransaction } = useContext(TxHistoryContext)
 
+  const { data: suckers } = useSuckers()
+
   const payoutLimitAmountCurrency = payoutLimit?.currency ?? V4_CURRENCY_ETH
 
   const [transactionPending, setTransactionPending] = useState<boolean>()
   const [loading, setLoading] = useState<boolean>()
   const [distributionAmount, setDistributionAmount] = useState<string>()
+  const [selectedChainId, setSelectedChainId] = useState<JBChainId>()
 
   const { writeContractAsync: writeSendPayouts } =
     useWriteJbMultiTerminalSendPayoutsOf()
-
+  
+  const { data: terminalAddress } = useReadJbDirectoryPrimaryTerminalOf({
+    chainId: selectedChainId,
+    args: [projectId, NATIVE_TOKEN],
+  })
+
+  const selectedChainProjectId = suckers?.find((sucker) => sucker.peerChainId === selectedChainId)?.projectId
+
+  const { distributableAmount: distributable } = useV4DistributableAmount({
+    chainId: selectedChainId,
+    projectId: selectedChainProjectId
+  })
+  
   async function executeDistributePayoutsTx() {
     if (
       !payoutLimitAmountCurrency ||
       !distributionAmount ||
-      !contracts.primaryNativeTerminal.data ||
+      !selectedChainId ||
+      !terminalAddress ||
       !projectId
     )
       return
@@ -63,17 +83,18 @@ export default function V4DistributePayoutsModal({
       NATIVE_TOKEN,
       parseUnits(distributionAmount, NATIVE_TOKEN_DECIMALS),
       BigInt(payoutLimitAmountCurrency),
-      0n, // TODO?
+      0n, // minTokensPaidOut
     ] as const
 
     try {
       const hash = await writeSendPayouts({
-        address: contracts.primaryNativeTerminal.data,
+        address: terminalAddress, // TODOv4 Q: or should this just be contracts.primaryNativeTerminal.address?
+        chainId: selectedChainId,
         args,
       })
       setTransactionPending(true)
 
-      addTransaction?.('Send payouts', { hash })
+      addTransaction?.(`Send payouts on ${NETWORKS[selectedChainId]?.label}`, { hash })
       await waitForTransactionReceipt(wagmiConfig, {
         hash,
       })
@@ -111,6 +132,19 @@ export default function V4DistributePayoutsModal({
     >
       <div className="flex flex-col gap-6">
         <Form layout="vertical">
+          {suckers && suckers.length > 1 ?
+            <Form.Item
+              className="mb-0"
+              label={<Trans>Chain</Trans>}
+            >
+              <ChainSelect
+                value={selectedChainId}
+                onChange={setSelectedChainId}
+                suckers={suckers}
+                showSelectedName
+              />
+            </Form.Item>
+          : null }
           <Form.Item
             className="mb-0"
             label={<Trans>Amount to pay out</Trans>}
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/V4SendPayoutsButton.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/V4SendPayoutsButton.tsx
@@ -1,9 +1,9 @@
+import { Button, Tooltip } from 'antd'
+import { useCallback, useState } from 'react'
+
 import { ArrowUpCircleIcon } from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
-import { Button, Tooltip } from 'antd'
-import { useCallback, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { useV4DistributableAmount } from './hooks/useV4DistributableAmount'
 import V4DistributePayoutsModal from './V4DistributePayoutsModal'
 
 export const V4SendPayoutsButton = ({
@@ -13,26 +13,27 @@ export const V4SendPayoutsButton = ({
   className?: string
   containerClassName?: string
 }) => {
-  const { distributableAmount } = useV4DistributableAmount()
+  // const { distributableAmount } = useV4DistributableAmount()
   const [open, setOpen] = useState(false)
   const openModal = useCallback(() => setOpen(true), [])
   const closeModal = useCallback(() => setOpen(false), [])
 
-  const distributeButtonDisabled = useMemo(() => {
-    return distributableAmount.value === 0n
-  }, [distributableAmount])
+  // v4TODO: aggregate distributable amount 
+  // const distributeButtonDisabled = useMemo(() => {
+  //   return distributableAmount.value === 0n
+  // }, [distributableAmount])
 
   return (
     <Tooltip
       title={<Trans>No payouts remaining for this cycle.</Trans>}
-      open={distributeButtonDisabled ? undefined : false}
+      // open={distributeButtonDisabled ? undefined : false}
       className={containerClassName}
     >
       <Button
         type="primary"
         className={twMerge('flex w-fit items-center gap-3', className)}
         onClick={openModal}
-        disabled={distributeButtonDisabled}
+        // disabled={distributeButtonDisabled}
       >
         <Trans>Send payouts</Trans>
         <ArrowUpCircleIcon className="h-5 w-5" />
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4DistributableAmount.ts b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4DistributableAmount.ts
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4PayoutsSubPanel.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4PayoutsSubPanel.tsx
diff --git a/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/V4ReservedTokensSubPanel.tsx b/src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/V4ReservedTokensSubPanel.tsx
diff --git a/src/packages/v4/views/V4ProjectSettings/ProjectSettingsDashboard.tsx b/src/packages/v4/views/V4ProjectSettings/ProjectSettingsDashboard.tsx
