Wraeth/v4 project nft (#4521)

Author: wraeth-eth

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

@@ -1,8 +1,10 @@
 import { useWallet } from 'hooks/Wallet'
+import { useReadJb721TiersHookPayCreditsOf } from 'juice-sdk-react'
+import { useV4NftRewards } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
 import { V4CurrencyOption } from 'packages/v4/models/v4CurrencyOption'
 import React from 'react'
 import { useProjectDispatch } from './redux/hooks'
-// import { projectCartActions } from './redux/projectCartSlice'
+import { projectCartActions } from './redux/projectCartSlice'
 
 export type ProjectCartCurrencyAmount = {
   amount: number
@@ -20,26 +22,26 @@ export const ReduxProjectCartProvider = ({
 }: {
   children: React.ReactNode
 }) => {
-  // const { rewardTiers } = useContext(NftRewardsContext).nftRewards
+  const {
+    nftRewards: { rewardTiers },
+  } = useV4NftRewards()
 
   const { userAddress } = useWallet()
-  // const userNftCredits = useNftCredits(userAddress)
+  const { data: nftCredits } = useReadJb721TiersHookPayCreditsOf({
+    address: userAddress,
+  })
 
   const dispatch = useProjectDispatch()
 
   // Set the nfts on load
-  // useEffect(() => {
-  //   dispatch(projectCartActions.setAllNftRewards(rewardTiers ?? []))
-  // }, [dispatch, rewardTiers])
+  React.useEffect(() => {
+    dispatch(projectCartActions.setAllNftRewards(rewardTiers ?? []))
+  }, [dispatch, rewardTiers])
 
   // Set the user's NFT credits on load
-  // useEffect(() => {
-  //   dispatch(
-  //     projectCartActions.setUserNftCredits(
-  //       userNftCredits.data?.toBigInt() ?? 0n,
-  //     ),
-  //   )
-  // }, [dispatch, userNftCredits.data])
+  React.useEffect(() => {
+    dispatch(projectCartActions.setUserNftCredits(nftCredits ?? 0n))
+  }, [dispatch, nftCredits])
 
   return <>{children}</>
 }

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

@@ -0,0 +1,37 @@
+import { Trans } from '@lingui/macro'
+import { CartItemBadge } from 'components/CartItemBadge'
+import { SmallNftSquare } from 'components/NftRewards/SmallNftSquare'
+import { useNftCartItem } from 'packages/v4/hooks/useNftCartItem'
+import { twMerge } from 'tailwind-merge'
+import { ProjectCartNftReward } from '../../../ReduxProjectCartProvider'
+
+export const ReceiveNftItem = ({
+  className,
+  nftReward,
+}: {
+  className?: string
+  nftReward: ProjectCartNftReward
+}) => {
+  const { fileUrl, name, quantity } = useNftCartItem(nftReward)
+
+  return (
+    <div className={twMerge('flex flex-col gap-4', className)}>
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center">
+          <SmallNftSquare
+            className="h-12 w-12"
+            nftReward={{
+              fileUrl: fileUrl ?? '',
+              name: name ?? '',
+            }}
+          />
+          <span className="ml-3">{name}</span>
+          <CartItemBadge className="ml-2">
+            <Trans>NFT</Trans>
+          </CartItemBadge>
+        </div>
+        <div>{quantity}</div>
+      </div>
+    </div>
+  )
+}

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

@@ -6,6 +6,7 @@ import {
 } from '../hooks/usePayProjectModal/usePayProjectModal'
 import { useProjectPaymentTokens } from '../hooks/useProjectPaymentTokens'
 import { EditRewardBeneficiary } from './EditRewardBeneficiary'
+import { ReceiveNftItem } from './ReceiveNftItem'
 import { ReceiveTokensItem } from './ReceiveTokensItem'
 
 export const ReceiveSection = ({ className }: { className?: string }) => {
@@ -36,6 +37,13 @@ export const ReceiveSection = ({ className }: { className?: string }) => {
         </span>
       </div>
       <ReceiveTokensItem className="mt-5" />
+      {nftRewards.map(nftReward => (
+        <ReceiveNftItem
+          key={nftReward.id}
+          nftReward={nftReward}
+          className="mt-5"
+        />
+      ))}
     </div>
   )
 }

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

@@ -1,19 +1,19 @@
+import { waitForTransactionReceipt } from '@wagmi/core'
+import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
 import { FormikHelpers } from 'formik'
 import { useWallet } from 'hooks/Wallet'
 import { useCurrencyConverter } from 'hooks/useCurrencyConverter'
-import { useProjectSelector } from 'packages/v4/components/ProjectDashboard/redux/hooks'
-import { ProjectPayReceipt } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
-// import { NftRewardsContext } from 'packages/v4/contexts/NftRewards/NftRewardsContext'
-// import { useProjectHasErc20 } from 'packages/v4/hooks/useProjectHasErc20'
-import { waitForTransactionReceipt } from '@wagmi/core'
-import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
-import { NATIVE_TOKEN } from 'juice-sdk-core'
+import { DEFAULT_METADATA, NATIVE_TOKEN } from 'juice-sdk-core'
 import {
   useJBContractContext,
+  useJBRulesetContext,
+  usePreparePayMetadata,
   useWriteJbMultiTerminalPay,
 } from 'juice-sdk-react'
-// import { useProjectHasErc20 } from 'packages/v2v3/hooks/useProjectHasErc20'
+import { useProjectSelector } from 'packages/v4/components/ProjectDashboard/redux/hooks'
+import { useV4NftRewards } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
 import { V4_CURRENCY_ETH } from 'packages/v4/utils/currency'
+import { ProjectPayReceipt } from 'packages/v4/views/V4ProjectDashboard/hooks/useProjectPageQueries'
 import { wagmiConfig } from 'packages/v4/wagmiConfig'
 import { useCallback, useContext, useMemo } from 'react'
 import { buildPaymentMemo } from 'utils/buildPaymentMemo'
@@ -42,11 +42,12 @@ export const usePayProjectTx = ({
   const { payAmount, chosenNftRewards } = useProjectSelector(
     state => state.projectCart,
   )
-  // const {
-  //   nftRewards: { rewardTiers },
-  // } = useContext(NftRewardsContext)
+  const {
+    nftRewards: { rewardTiers },
+  } = useV4NftRewards()
   const converter = useCurrencyConverter()
   const { receivedTickets } = useProjectPaymentTokens()
+  // TODO: implement
   // const projectHasErc20 = useProjectHasErc20()
 
   const buildPayReceipt = useCallback(
@@ -76,10 +77,21 @@ export const usePayProjectTx = ({
     }
   }, [payAmount, converter])
 
-  // const prepareDelegateMetadata = usePrepareDelegatePayMetadata(weiAmount, {
-  //   nftRewards: chosenNftRewards,
-  //   receivedTickets,
-  // })
+  const {
+    rulesetMetadata: { data: rulesetMetadata },
+  } = useJBRulesetContext()
+  const metadata = usePreparePayMetadata(
+    rulesetMetadata?.dataHook
+      ? {
+          jb721Hook: {
+            dataHookAddress: rulesetMetadata.dataHook,
+            tierIdsToMint: chosenNftRewards
+              .map(({ id, quantity }) => Array(quantity).fill(BigInt(id)))
+              .flat(),
+          },
+        }
+      : undefined,
+  )
 
   const { writeContractAsync: writePay } = useWriteJbMultiTerminalPay()
   const { contracts, projectId } = useJBContractContext()
@@ -103,13 +115,13 @@ export const usePayProjectTx = ({
       const memo = buildPaymentMemo({
         text: messageString,
         imageUrl: attachedUrl,
-        // nftUrls: chosenNftRewards
-        //   .map(
-        //     ({ id }) =>
-        //       (rewardTiers ?? []).find(({ id: tierId }) => tierId === id)
-        //         ?.fileUrl,
-        //   )
-        //   .filter((url): url is string => !!url),
+        nftUrls: chosenNftRewards
+          .map(
+            ({ id }) =>
+              (rewardTiers ?? []).find(({ id: tierId }) => tierId === id)
+                ?.fileUrl,
+          )
+          .filter((url): url is string => !!url),
       })
       const beneficiary = (values.beneficiaryAddress ?? userAddress) as Address
       const args = [
@@ -119,9 +131,15 @@ export const usePayProjectTx = ({
         beneficiary,
         0n,
         memo,
-        '0x0',
+        metadata ?? DEFAULT_METADATA,
       ] as const
 
+      // SIMULATE TRANSACTION:
+      // const encodedData = encodeFunctionData({
+      //   abi: jbMultiTerminalAbi, // ABI of the contract
+      //   functionName: 'pay',
+      //   args,
+      // })
       try {
         const hash = await writePay({
           address: contracts.primaryNativeTerminal.data,
@@ -147,21 +165,19 @@ export const usePayProjectTx = ({
       }
     },
     [
-      // projectHasErc20,
-      buildPayReceipt,
-      // chosenNftRewards,
-      onTransactionConfirmedCallback,
-      onTransactionErrorCallback,
-      onTransactionPendingCallback,
-      // payProjectTx,
-      // rewardTiers,
       weiAmount,
+      contracts.primaryNativeTerminal.data,
       userAddress,
-      // prepareDelegateMetadata,
+      chosenNftRewards,
       projectId,
+      metadata,
+      rewardTiers,
       writePay,
-      contracts.primaryNativeTerminal.data,
+      onTransactionPendingCallback,
       addTransaction,
+      onTransactionConfirmedCallback,
+      buildPayReceipt,
+      onTransactionErrorCallback,
     ],
   )
 }