Add remaining project has erc20 token where missing (#4546)

Author: wraeth-eth

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

@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
 import { CartItemBadge } from 'components/CartItemBadge'
 import { ProjectHeaderLogo } from 'components/Project/ProjectHeader/ProjectHeaderLogo'
 import { twMerge } from 'tailwind-merge'
-// import { useProjectHasErc20Token } from 'packages/v2v3/components/V2V3Project/ProjectDashboard/hooks/useProjectHasErc20Token'
 // import { BUYBACK_DELEGATE_ENABLED_PROJECT_IDS } from 'packages/v2v3/constants/buybackDelegateEnabledProjectIds'
 import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
 import { useProjectPaymentTokens } from '../hooks/useProjectPaymentTokens'
@@ -11,7 +10,6 @@ export const ReceiveTokensItem = ({ className }: { className?: string }) => {
   const { receivedTickets, receivedTokenSymbolText } = useProjectPaymentTokens()
   const projectHasErc20Token = useProjectHasErc20Token()
 
-
   if (receivedTickets === '0') {
     return null
   }
@@ -24,11 +22,11 @@ export const ReceiveTokensItem = ({ className }: { className?: string }) => {
           <span className="ml-3">
             <Trans>{receivedTokenSymbolText}</Trans>
           </span>
-          { projectHasErc20Token ?
+          {projectHasErc20Token ? (
             <CartItemBadge className="ml-2">
               <Trans>ERC-20</Trans>
             </CartItemBadge>
-          : null}
+          ) : null}
         </div>
         <div>{receivedTickets}</div>
       </div>

src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts

@@ -12,6 +12,7 @@ import {
 } from 'juice-sdk-react'
 import { useProjectSelector } from 'packages/v4/components/ProjectDashboard/redux/hooks'
 import { useV4NftRewards } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
+import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
 import { V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
 import { ProjectPayReceipt } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
@@ -47,8 +48,8 @@ export const usePayProjectTx = ({
   } = useV4NftRewards()
   const converter = useCurrencyConverter()
   const { receivedTickets } = useProjectPaymentTokens()
-  // TODO: implement
-  // const projectHasErc20 = useProjectHasErc20()
+  // TODO: is this needed for preferClaimedTokens?
+  const projectHasErc20 = useProjectHasErc20Token()
 
   const buildPayReceipt = useCallback(
     (txHash: Hash): ProjectPayReceipt => {

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

@@ -5,7 +5,9 @@ import { Callout } from 'components/Callout/Callout'
 import { useJBRulesetContext } from 'juice-sdk-react'
 import { useV4NftRewards } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
 import { usePayoutLimit } from 'packages/v4/hooks/usePayoutLimit'
+import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
 import { MAX_PAYOUT_LIMIT } from 'packages/v4/utils/math'
+import { useV4TokensPanel } from 'packages/v4/views/V4ProjectDashboard/V4ProjectTabs/V4TokensPanel/hooks/useV4TokensPanel'
 import React, { ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useProjectDispatch, useProjectSelector } from '../redux/hooks'
@@ -28,14 +30,14 @@ export const V4PayRedeemCard: React.FC<PayRedeemCardProps> = ({
   const { data: payoutLimit } = usePayoutLimit()
   const dispatch = useProjectDispatch()
 
-  const projectHasErc20Token = false // TODO
+  const projectHasErc20Token = useProjectHasErc20Token()
 
   // TODO: We should probably break out tokens panel hook into reusable module
-  // const { userTokenBalance: panelBalance } = useTokensPanel()
-  // const tokenBalance = panelBalance
-  //   ? parseFloat(panelBalance.replaceAll(',', ''))
-  //   : undefined
-  const tokenBalance = 0 // TODO
+  const { userTokenBalance: panelBalance } = useV4TokensPanel()
+  const tokenBalance = React.useMemo(() => {
+    if (!panelBalance) return undefined
+    return panelBalance.toFloat()
+  }, [panelBalance])
   const redeems = {
     loading: ruleset.isLoading,
     enabled:

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

@@ -13,6 +13,7 @@ import { AddTokenToMetamaskButton } from 'components/buttons/AddTokenToMetamaskB
 import { ISSUE_ERC20_EXPLANATION } from 'components/strings'
 import { useJBContractContext } from 'juice-sdk-react'
 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, useState } from 'react'
 import { reloadWindow } from 'utils/windowUtils'
@@ -34,6 +35,7 @@ export const V4TokensPanel = () => {
     projectToken,
     totalSupply,
   } = useV4TokensPanel()
+  const projectHasErc20Token = useProjectHasErc20Token()
 
   const { canMintTokens } = useV4BalanceMenuItemsUserFlags()
 
@@ -76,7 +78,7 @@ export const V4TokensPanel = () => {
                 <span className="flex flex-col justify-between gap-5 md:flex-row md:items-center">
                   <Trans>{userTokenBalance.format(8)} tokens</Trans>
                   <div className="flex flex-col justify-between gap-5 md:flex-row md:items-center md:gap-4">
-                    {/* {projectHasErc20Token && (
+                    {projectHasErc20Token && (
                       <Button
                         className="p-0 text-start md:text-end"
                         type="link"
@@ -87,7 +89,7 @@ export const V4TokensPanel = () => {
                       >
                         <Trans>Claim ERC-20 token</Trans>
                       </Button>
-                    )} */}
+                    )}
                     {/* <RedeemTokensButton
                       containerClassName="w-full md:w-fit"
                       className="h-12 w-full md:h-10"
@@ -179,7 +181,7 @@ const ProjectTokenCard = () => {
   const chainId = useChainId()
   const { projectId: projectIdBig } = useJBContractContext()
   const projectId = Number(projectIdBig)
-  
+
   const {
     projectToken,
     projectTokenAddress,
@@ -203,25 +205,26 @@ const ProjectTokenCard = () => {
           </div>
           {projectTokenAddress && projectHasErc20Token && (
             <AddTokenToMetamaskButton
-              className="mt-2" 
+              className="mt-2"
               tokenAddress={projectTokenAddress}
             />
           )}
           {canCreateErc20Token ? (
             <Tooltip title={ISSUE_ERC20_EXPLANATION}>
-              <a href={`${v4ProjectRoute({ chainId, projectId })}/settings/createerc20`}>
-                <Button
-                  size="small"
-                  icon={<SettingOutlined />}
-                  type='link'
-                >
+              <a
+                href={`${v4ProjectRoute({
+                  chainId,
+                  projectId,
+                })}/settings/createerc20`}
+              >
+                <Button size="small" icon={<SettingOutlined />} type="link">
                   <span>
                     <Trans>Create ERC-20 Token</Trans>
                   </span>
                 </Button>
               </a>
             </Tooltip>
-          ): null}
+          ) : null}
         </>
       }
     />

src/packages/v4/views/V4ProjectSettings/ProjectSettingsDashboard.tsx

@@ -2,8 +2,13 @@ import { Trans } from '@lingui/macro'
 import { Button } from 'antd'
 import EthereumAddress from 'components/EthereumAddress'
 import Loading from 'components/Loading'
-import { NativeTokenValue, useJBContractContext, useJBProjectMetadataContext } from 'juice-sdk-react'
+import {
+  NativeTokenValue,
+  useJBContractContext,
+  useJBProjectMetadataContext,
+} from 'juice-sdk-react'
 import Link from 'next/link'
+import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
 import { useV4BalanceOfNativeTerminal } from 'packages/v4/hooks/useV4BalanceOfNativeTerminal'
 import useProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
 import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
@@ -58,7 +63,7 @@ export function ProjectSettingsDashboard() {
   const { metadata } = useJBProjectMetadataContext()
 
   const { distributableAmount } = useV4DistributableAmount()
-  const projectHasErc20Token = false // @v4TODO
+  const projectHasErc20Token = useProjectHasErc20Token()
   const hasIssueTicketsPermission = useV4WalletHasPermission(
     V4OperatorPermission.MINT_TOKENS,
   )
@@ -113,9 +118,7 @@ export function ProjectSettingsDashboard() {
               </div>
               <div className="text-xl">
                 {!loading ? (
-                  <NativeTokenValue
-                    wei={distributableAmount.value}
-                  />
+                  <NativeTokenValue wei={distributableAmount.value} />
                 ) : (
                   <Loading />
                 )}