feat: aggregate total supply

Author: johnnyd-eth

src/packages/v4/hooks/useSuckersTotalSupply.ts

@@ -0,0 +1,69 @@
+import {
+  SuckerPair,
+  readJbControllerTotalTokenSupplyWithReservedTokensOf,
+  readJbDirectoryControllerOf
+} from "juice-sdk-core";
+import { useJBChainId, useJBContractContext, useSuckers } from "juice-sdk-react";
+
+import { useConfig } from "wagmi";
+import { useQuery } from "wagmi/query";
+import { wagmiConfig } from "../wagmiConfig";
+
+export function useSuckersTotalSupply() {
+  const config = useConfig();
+
+  const chainId = useJBChainId();
+
+  const { projectId } = useJBContractContext();
+
+  const suckersQuery = useSuckers();
+  const pairs: SuckerPair[] = suckersQuery.data ?? [];
+
+  const totalSupplyQuery = useQuery({
+    queryKey: [
+      "suckersTotalSupply",
+      projectId?.toString() || "0",
+      chainId?.toString() || "0",
+      pairs?.map(p => p.peerChainId).join(",") || "noPairs",
+    ],
+    queryFn: async () => {
+      if (!chainId) return null;
+      if (!pairs || pairs.length === 0) return [];
+
+      return await Promise.all(
+        pairs.map(async pair => {
+          const { peerChainId, projectId: peerProjectId } = pair;
+
+          const controllerAddress = await readJbDirectoryControllerOf(wagmiConfig, {
+            chainId,
+            args: [BigInt(projectId)],
+          })
+
+          const totalSupply = await readJbControllerTotalTokenSupplyWithReservedTokensOf(config, {
+            chainId: Number(peerChainId),
+            address: controllerAddress,
+            args: [peerProjectId],
+          });
+
+          return {
+            chainId: peerChainId,
+            projectId: peerProjectId,
+            totalSupply,
+          };
+        })
+      );
+    },
+  });
+
+  return {
+    isLoading: totalSupplyQuery.isLoading || suckersQuery.isLoading,
+    isError: totalSupplyQuery.isError || suckersQuery.isError,
+    data: totalSupplyQuery.data as
+      | {
+          chainId: number;
+          projectId: bigint;
+          totalSupply: bigint;
+        }[]
+      | undefined,
+  };
+}

src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/V4TokensPanel.tsx

@@ -1,22 +1,23 @@
-import { SettingOutlined } from '@ant-design/icons'
-import { t, Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { Button, Tooltip } from 'antd'
-import { AddTokenToMetamaskButton } from 'components/buttons/AddTokenToMetamaskButton'
-import EthereumAddress from 'components/EthereumAddress'
-import { TitleDescriptionDisplayCard } from 'components/Project/ProjectTabs/TitleDescriptionDisplayCard'
-import { ISSUE_ERC20_EXPLANATION } from 'components/strings'
-import { NETWORKS } from 'constants/networks'
-import { formatUnits, JB_TOKEN_DECIMALS, JBChainId } from 'juice-sdk-core'
+import { JBChainId, JB_TOKEN_DECIMALS, formatUnits } from 'juice-sdk-core'
 import {
   useJBChainId,
   useJBContractContext,
   useSuckersUserTokenBalance
 } from 'juice-sdk-react'
+import { useCallback, useMemo, useState } from 'react'
+
+import { SettingOutlined } from '@ant-design/icons'
+import { AddTokenToMetamaskButton } from 'components/buttons/AddTokenToMetamaskButton'
+import EthereumAddress from 'components/EthereumAddress'
+import { TitleDescriptionDisplayCard } from 'components/Project/ProjectTabs/TitleDescriptionDisplayCard'
+import { ISSUE_ERC20_EXPLANATION } from 'components/strings'
+import { NETWORKS } from 'constants/networks'
 import { ChainLogo } from 'packages/v4/components/ChainLogo'
 import { V4TokenHoldersModal } from 'packages/v4/components/modals/V4TokenHoldersModal/V4TokenHoldersModal'
 import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
 import { v4ProjectRoute } from 'packages/v4/utils/routes'
-import { useCallback, useMemo, useState } from 'react'
 import { reloadWindow } from 'utils/windowUtils'
 import { useV4BalanceMenuItemsUserFlags } from './hooks/useV4BalanceMenuItemsUserFlags'
 import { useV4TokensPanel } from './hooks/useV4TokensPanel'
@@ -27,7 +28,7 @@ import { V4ReservedTokensSubPanel } from './V4ReservedTokensSubPanel'
 import { V4TokenRedemptionCallout } from './V4TokenRedemptionCallout'
 
 export const V4TokensPanel = () => {
-  const { userTokenBalanceLoading, projectToken, totalSupply } =
+  const { userTokenBalanceLoading, projectToken, totalTokenSupplyElement } =
     useV4TokensPanel()
   const projectHasErc20Token = useProjectHasErc20Token()
   const { data: suckersBalance } = useSuckersUserTokenBalance()
@@ -149,11 +150,7 @@ export const V4TokensPanel = () => {
               <TitleDescriptionDisplayCard
                 className="w-full"
                 title={t`Total supply`}
-                description={
-                  <span>
-                    {totalSupply.format(8)} {projectToken}
-                  </span>
-                }
+                description={totalTokenSupplyElement}
               />
             </div>
             <a

src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/hooks/useV4TokensPanel.ts src/packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/hooks/useV4TokensPanel.tsx

@@ -1,7 +1,12 @@
-import { JBProjectToken } from 'juice-sdk-core'
+import { JBChainId, JBProjectToken } from 'juice-sdk-core'
+
+import { Tooltip } from 'antd'
+import { NETWORKS } from 'constants/networks'
 import { useJBTokenContext } from 'juice-sdk-react'
+import { ChainLogo } from 'packages/v4/components/ChainLogo'
 import { useV4UserTotalTokensBalance } from 'packages/v4/contexts/V4UserTotalTokensBalanceProvider'
 import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
+import { useSuckersTotalSupply } from 'packages/v4/hooks/useSuckersTotalSupply'
 import { useV4TotalTokenSupply } from 'packages/v4/hooks/useV4TotalTokenSupply'
 import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
 import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
@@ -35,6 +40,49 @@ export const useV4TokensPanel = () => {
   // const { totalLegacyTokenBalance, v1ClaimedBalance } =
   //   useTotalLegacyTokenBalance({ projectId })
 
+  const { data: suckersTotalSupply } = useSuckersTotalSupply()
+  const aggregatedTotalSupply = 
+      suckersTotalSupply?.reduce(
+        (acc, curr) => acc + curr.totalSupply,
+        0n,
+      ) ?? 0n
+
+  const _aggregatedTotalSupply = new JBProjectToken(aggregatedTotalSupply)
+
+  const totalTokenSupplyElement = (
+    <Tooltip
+        title={
+          suckersTotalSupply?.length &&
+          suckersTotalSupply.length > 0 ? (
+            <div className="flex flex-col gap-2">
+              {suckersTotalSupply.map(({ chainId, totalSupply }) => {
+                const _totalSupply = new JBProjectToken(totalSupply)
+                return (
+                  <div
+                    className="flex items-center justify-between gap-4"
+                    key={chainId}
+                  >
+                    <div className="flex items-center gap-2">
+                      <ChainLogo chainId={chainId as JBChainId} />
+                      <span>{NETWORKS[chainId].label}</span>
+                    </div>
+                    <span className="whitespace-nowrap font-medium">
+                      {_totalSupply.format(8)}{' '}
+                      {projectToken}
+                    </span>
+                  </div>
+                )
+            })}
+            </div>
+          ) : undefined
+        }
+      >
+        <span>
+          {_aggregatedTotalSupply.format(8)}
+        </span>
+      </Tooltip>
+  )
+
   const totalTokenSupply = new JBProjectToken(_totalTokenSupply ?? 0n)
 
   const canCreateErc20Token = !projectHasErc20Token && hasDeployErc20Permission
@@ -48,6 +96,7 @@ export const useV4TokensPanel = () => {
     projectToken,
     projectTokenAddress: tokenAddress,
     totalSupply: totalTokenSupply,
+    totalTokenSupplyElement,
     projectHasErc20Token,
     canCreateErc20Token,
   }