feat: omnichain available payout amount, chain selector on Ruleset/Token tabs

src/components/inputs/JuiceListbox.tsx

@@ -21,6 +21,7 @@ interface JuiceListboxProps<T> {
 export function JuiceListbox<T>(props: JuiceListboxProps<T>) {
   const { value, onChange, options, buttonClassName, className, disabled } =
     props
+
   return (
     <Listbox value={value} onChange={onChange} disabled={disabled}>
       <div className={twMerge('relative', className)}>

src/locales/messages.pot

@@ -2819,6 +2819,9 @@ msgstr ""
 msgid "Transfer unclaimed {0}"
 msgstr ""
 
+msgid "Ok"
+msgstr ""
+
 msgid "Cannot set payouts because your <0>Total payouts</0> is Zero."
 msgstr ""
 
@@ -4280,9 +4283,6 @@ msgstr ""
 msgid "Manage your project's state and ownership"
 msgstr ""
 
-msgid "Ruleset cycle"
-msgstr ""
-
 msgid "The amount of reserved tokens currently available to be distributed to the recipients below."
 msgstr ""
 

src/packages/v4/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx

@@ -1,5 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { Col, Form, Row } from 'antd'
+import { JBChainId, JB_CHAINS } from 'juice-sdk-core'
 import {
   V2V3_CURRENCY_ETH,
   V2V3_CURRENCY_USD,
@@ -23,14 +24,14 @@ import { trackFathomGoal } from 'lib/fathom'
 import Link from 'next/link'
 import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
 import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
+import { ProjectChainSelect } from 'packages/v4/components/ProjectDashboard/ProjectChainSelect'
 import { useSetCreateFurthestPageReached } from 'redux/hooks/v2v3/useEditingCreateFurthestPageReached'
 import { inputIsLengthRule } from 'utils/antdRules/inputIsLengthRule'
 import { CreateCollapse } from '../../CreateCollapse/CreateCollapse'
 import { OptionalHeader } from '../../OptionalHeader'
 import { PageContext } from '../../Wizard/contexts/PageContext'
 import { Wizard } from '../../Wizard/Wizard'
 import { useProjectDetailsForm } from './hooks/useProjectDetailsForm'
-import { ProjectChainSelect } from './ProjectChainSelect'
 
 export const ProjectDetailsPage: React.FC<
   React.PropsWithChildren<unknown>
@@ -46,6 +47,12 @@ export const ProjectDetailsPage: React.FC<
 
   const projectOwnerDifferentThanWalletAddress =
     inputWalletAddress && wallet.userAddress !== inputWalletAddress
+
+  const networkOptions = 
+    Object.values(JB_CHAINS).map(chain => ({
+      label: chain.name,
+      value: chain.chain.id as JBChainId,
+    }))
 
   return (
     <Form
@@ -79,7 +86,8 @@ export const ProjectDetailsPage: React.FC<
             inputMustExistRule({ label: t`A project chain` }),
           ])}
         >
-          <ProjectChainSelect />
+          {/* v4TODO: turn into a multiselect */}
+          <ProjectChainSelect options={networkOptions} />
         </Form.Item>
 
         <Form.Item

src/packages/v4/components/PayoutsTable/TotalRows.tsx

@@ -1,11 +1,12 @@
 import { Trans, t } from '@lingui/macro'
+
 import { Tooltip } from 'antd'
 import EthereumAddress from 'components/EthereumAddress'
 import { PayoutsTableCell } from 'components/PayoutsTable/PayoutsTableCell'
 import { PayoutsTableRow } from 'components/PayoutsTable/PayoutsTableRow'
 import TooltipLabel from 'components/TooltipLabel'
 import round from 'lodash/round'
-import useProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
+import useV4ProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
 import { usePayoutsTable } from './hooks/usePayoutsTable'
 
 const Row = PayoutsTableRow
@@ -31,7 +32,7 @@ export function TotalRows() {
       ? round(distributionLimit, roundingPrecision)
       : t`Unlimited`
 
-  const { data: projectOwnerAddress } = useProjectOwnerOf()
+  const { data: projectOwnerAddress } = useV4ProjectOwnerOf()
 
   const subTotalExceedsMax = distributionLimitIsInfinite && subTotal > 100
 

src/packages/v4/components/ProjectDashboard/ProjectChainSelect.tsx

@@ -0,0 +1,42 @@
+import { DEFAULT_PROJECT_CHAIN_ID, NETWORKS } from 'constants/networks'
+import { JBChainId, useSuckers } from 'juice-sdk-react'
+
+import { JuiceListbox } from 'components/inputs/JuiceListbox'
+
+type ChainSelectOption = {
+  label: string,
+  value: JBChainId,
+}
+
+export const ProjectChainSelect: React.FC<
+  React.PropsWithChildren<{
+    value?: JBChainId
+    onChange?: (value: JBChainId) => void
+    options?: ChainSelectOption[]
+  }>
+> = ({ value, onChange, options }) => {
+  const { data: suckers } = useSuckers()
+  const projectAvailableChains = suckers?.map((suckerPair) => ({
+    label: NETWORKS[suckerPair.peerChainId].label,
+    value: suckerPair.peerChainId
+  }))
+
+  const _options = projectAvailableChains ?? options
+
+  if (!_options) return null
+
+  return (
+    <JuiceListbox
+      className="text-sm font-normal"
+      value={{
+        label: NETWORKS[value ?? DEFAULT_PROJECT_CHAIN_ID]?.label,
+        value,
+      }}
+      onChange={({ value }) => {
+        if (!value) return
+        onChange?.(value as JBChainId)
+      }}
+      options={_options}
+    />
+  )
+}

src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ChainSelectSection.tsx

@@ -79,9 +79,10 @@ export const ChainSelectSection = () => {
         }}
         options={networkOptions.map(option => ({
           ...option,
-          label: `${option.label} - Gas: ${
-            gasEstimates[option.value] || 'Loading...'
-          }`,
+          label: `${option.label}`
+          //  - Gas: ${
+          //   gasEstimates[option.value] || 'Loading...'
+          // }`,
         }))}
       />
     </div>

src/packages/v4/hooks/useJBAllRulesetsCrossChain.ts

@@ -0,0 +1,37 @@
+import { CashOutTaxRate, ReservedPercent, RulesetWeight, WeightCutPercent } from "juice-sdk-core"
+
+import { useReadJbControllerAllRulesetsOf } from "juice-sdk-react"
+
+export function useJBAllRulesetsCrossChain({
+  projectId,
+  rulesetNumber
+}: {
+  projectId: bigint
+  rulesetNumber: bigint
+}) {
+  const { data, isLoading } = useReadJbControllerAllRulesetsOf({
+    args: [
+      projectId, 
+      rulesetNumber, 
+      10n, // size (The maximum number of rulesets to return). Arbritrarily set
+    ]
+  })
+
+  if (!data) return { data: undefined, isLoading }
+
+  return {
+    data: data.map((obj) => ({
+      ruleset: {
+        ...obj.ruleset, 
+        weight: new RulesetWeight(obj.ruleset.weight), 
+        weightCutPercent: new WeightCutPercent(obj.ruleset.weightCutPercent), 
+      },
+      metadata: {
+        ...obj.metadata,
+        cashOutTaxRate: new CashOutTaxRate(obj.metadata.cashOutTaxRate),
+        reservedPercent: new ReservedPercent(obj.metadata.reservedPercent)
+      }
+    })),
+    isLoading
+  }
+}

src/packages/v4/hooks/useJBRulesetByChain.ts

@@ -0,0 +1,46 @@
+import { CashOutTaxRate, JBChainId, JBRulesetData, JBRulesetMetadata, ReservedPercent, RulesetWeight, WeightCutPercent } from "juice-sdk-core";
+import { useJBContractContext, useReadJbControllerCurrentRulesetOf } from "juice-sdk-react";
+
+import { useProjectIdOfChain } from "./useProjectIdOfChain";
+
+export function useJBRulesetByChain(chainId: JBChainId | undefined) {
+  const { contracts } = useJBContractContext();
+  const projectId = useProjectIdOfChain({ chainId }) 
+  const { data, isLoading } = useReadJbControllerCurrentRulesetOf({
+    chainId,
+    address: contracts?.controller?.data ?? undefined,
+    args: [BigInt(projectId ?? 0)],
+    query: {
+      select([ruleset, rulesetMetadata]) {
+        return [
+          {
+            ...ruleset,
+            weight: new RulesetWeight(ruleset.weight),
+            weightCutPercent: new WeightCutPercent(ruleset.weightCutPercent),
+          },
+          {
+            ...rulesetMetadata,
+            cashOutTaxRate: new CashOutTaxRate(rulesetMetadata.cashOutTaxRate),
+            reservedPercent: new ReservedPercent(
+              rulesetMetadata.reservedPercent
+            ),
+          },
+        ];
+      },
+    },
+  });
+
+  if (!chainId) {
+    return {
+      ruleset: undefined,
+      rulesetMetadata: undefined,
+      isLoading: false,
+    }
+  }
+
+  return {
+    ruleset: data?.[0] as JBRulesetData,
+    rulesetMetadata: data?.[1] as JBRulesetMetadata,
+    isLoading,
+  }
+}

src/packages/v4/hooks/useJBUpcomingRuleset.ts

@@ -7,21 +7,29 @@ import {
   WeightCutPercent,
 } from 'juice-sdk-core'
 import {
+  JBChainId,
   useJBContractContext,
-  useReadJbControllerUpcomingRulesetOf,
+  useReadJbControllerUpcomingRulesetOf
 } from 'juice-sdk-react'
 
-// @todo: add to SDK
-export function useJBUpcomingRuleset(): {
+import { useProjectIdOfChain } from './useProjectIdOfChain'
+
+// @v4todo: add to SDK
+export function useJBUpcomingRuleset(chainId?: JBChainId): {
   ruleset: JBRulesetData | undefined
   rulesetMetadata: JBRulesetMetadata | undefined
   isLoading: boolean
 } {
-  const { contracts, projectId } = useJBContractContext()
+  const { contracts, projectId: defaultProjectId } = useJBContractContext()
+
+  const projectId = useProjectIdOfChain({ chainId }) 
+
   const { data, isLoading } = useReadJbControllerUpcomingRulesetOf({
     address: contracts.controller?.data ?? undefined,
-    args: [projectId],
+    args: [BigInt(projectId ?? defaultProjectId)],
+    chainId
   })
+
   const _latestUpcomingRuleset = data?.[0]
   const _latestUpcomingRulesetMetadata = data?.[1]
   const upcomingWeight = new RulesetWeight(_latestUpcomingRuleset?.weight ?? 0n)

src/packages/v4/hooks/useProjectIdOfChain.ts

@@ -0,0 +1,14 @@
+import { JBChainId } from "juice-sdk-core";
+import { useSuckers } from "juice-sdk-react";
+
+// Gets the projectId of a project on a given chain
+//    -> (Project IDs can vary across chains)
+export function useProjectIdOfChain({
+  chainId
+}: {
+  chainId: JBChainId | undefined
+}) {  
+  const { data: suckers } = useSuckers()
+
+  return suckers?.find((suckerPair) => suckerPair.peerChainId === chainId )?.projectId
+}

src/packages/v4/hooks/useProjectRulesetsDiffAcrossChains.ts

@@ -0,0 +1,40 @@
+import { JBChainId, JBRulesetData, JBRulesetMetadata } from "juice-sdk-core";
+import { useJBContractContext, useSuckers } from "juice-sdk-react";
+
+
+export function useProjectRulesetsDiffAcrossChains(type: 'upcoming' | 'current') {
+  const { data: suckers } = useSuckers()
+  const { projectId, contracts } = useJBContractContext()
+
+  const currentRulesetsAndMetadataByChain = {
+    // 1234: {
+    //    ruleset: JBRulesetData
+    //    metadata: JBRulesetMetadata
+    // },
+    // etc.
+  } as Record<JBChainId, JBRulesetData & JBRulesetMetadata>
+  const upcomingRulesetsAndMetadataByChain = {
+    // 1234: {
+    //    ruleset: JBRulesetData
+    //    metadata: JBRulesetMetadata
+    // },
+    // etc.
+  }
+  // suckers?.forEach((suckerPair) => {
+  //   const { data: currentRuleset, isLoading: currentLoading } = useJBRuleset(suckerPair.chainId)
+  //   const { data: upcomingRuleset, isLoading: upcomingLoading } = useJBUpcomingRuleset(suckerPair.peerChainId as JBChainId)
+  //   // how to fill currentRulesetsAndMetadataByChain and upcomingRulesetsAndMetadataByChain?
+  // })
+
+  // if (type === 'upcoming') {
+  //   return { 
+  //     data: getDiffedAttrBetweenRulesets(upcomingRulesetsAndMetadataByChain), 
+  //     isLoading 
+  //   }
+  // }
+
+  // return {
+  //   data: getDiffedAttrBetweenRulesets(currentRulesetsAndMetadataByChain),
+  //   isLoading
+  // }
+}