Merge branch 'dev' into wraeth/hide-payouts-create-zero-amount

src/locales/messages.pot

@@ -1229,9 +1229,6 @@ msgstr ""
 msgid "Issue as ERC-20"
 msgstr ""
 
-msgid "Pay {primaryAmount}"
-msgstr ""
-
 msgid "Active"
 msgstr ""
 

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

@@ -1,8 +1,9 @@
-import { useWallet } from 'hooks/Wallet'
+import { useV4NftRewards } from 'packages/v4/contexts/V4NftRewards/V4NftRewardsProvider'
+import { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
 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 +21,22 @@ export const ReduxProjectCartProvider = ({
 }: {
   children: React.ReactNode
 }) => {
-  // const { rewardTiers } = useContext(NftRewardsContext).nftRewards
-
-  const { userAddress } = useWallet()
-  // const userNftCredits = useNftCredits(userAddress)
-
+  const {
+    nftRewards: { rewardTiers },
+  } = useV4NftRewards()
+  const nftCredits = useV4UserNftCredits()
   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(() => {
+    if (nftCredits.isLoading) return
+    dispatch(projectCartActions.setUserNftCredits(nftCredits.data ?? 0n))
+  }, [dispatch, nftCredits.isLoading, nftCredits.data])
 
   return <>{children}</>
 }

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

@@ -3,11 +3,13 @@ import EtherscanLink from 'components/EtherscanLink'
 import ExternalLink from 'components/ExternalLink'
 import { JuiceModal } from 'components/modals/JuiceModal'
 import { Formik } from 'formik'
-import Image from "next/legacy/image"
+import Image from 'next/legacy/image'
+import { useV4UserNftCredits } from 'packages/v4/contexts/V4UserNftCreditsProvider'
 import { twMerge } from 'tailwind-merge'
 import { helpPagePath } from 'utils/helpPagePath'
 import { MessageSection } from './components/MessageSection'
 import { ReceiveSection } from './components/ReceiveSection'
+import { usePayAmounts } from './hooks/usePayAmounts'
 import {
   PayProjectModalFormValues,
   usePayProjectModal,
@@ -16,8 +18,6 @@ import {
 export const PayProjectModal: React.FC = () => {
   const {
     open,
-    primaryAmount,
-    secondaryAmount,
     validationSchema,
     isTransactionPending,
     isTransactionConfirmed,
@@ -27,6 +27,7 @@ export const PayProjectModal: React.FC = () => {
     setOpen,
     onPaySubmit,
   } = usePayProjectModal()
+  const { formattedTotalAmount } = usePayAmounts()
 
   return (
     <Formik<PayProjectModalFormValues>
@@ -50,7 +51,7 @@ export const PayProjectModal: React.FC = () => {
             position="top"
             okLoading={props.isSubmitting || isTransactionPending}
             okButtonForm="PayProjectModalForm"
-            okText={t`Pay ${primaryAmount}`}
+            okText={t`Pay ${formattedTotalAmount.primaryAmount}`}
             cancelText={
               isTransactionPending || isTransactionConfirmed
                 ? t`Close`
@@ -97,19 +98,7 @@ export const PayProjectModal: React.FC = () => {
             ) : (
               <>
                 <div className="flex flex-col divide-y divide-grey-200 dark:divide-slate-500">
-                  <div className="flex justify-between gap-3 py-3">
-                    <span className="font-medium">
-                      <Trans>Total amount</Trans>
-                    </span>
-                    <div>
-                      <span>{primaryAmount}</span>{' '}
-                      {secondaryAmount && (
-                        <span className="text-grey-500 dark:text-slate-200">
-                          ({secondaryAmount})
-                        </span>
-                      )}
-                    </div>
-                  </div>
+                  <AmountSection />
 
                   <ReceiveSection className="py-6" />
 
@@ -172,3 +161,60 @@ export const PayProjectModal: React.FC = () => {
     </Formik>
   )
 }
+
+const AmountSection = () => {
+  const { data: nftCredits } = useV4UserNftCredits()
+  const { formattedAmount, formattedNftCredits, formattedTotalAmount } =
+    usePayAmounts()
+
+  const RowData = ({
+    label,
+    primaryAmount,
+    secondaryAmount,
+  }: {
+    label: React.ReactNode
+    primaryAmount: React.ReactNode
+    secondaryAmount: React.ReactNode
+  }) => (
+    <div className="flex justify-between gap-3 py-3">
+      <span className="font-medium">{label}</span>
+      <div>
+        <span>{primaryAmount}</span>{' '}
+        {secondaryAmount && (
+          <span className="text-grey-500 dark:text-slate-200">
+            ({secondaryAmount})
+          </span>
+        )}
+      </div>
+    </div>
+  )
+
+  if (!nftCredits || nftCredits <= 0n || !formattedNftCredits)
+    return (
+      <RowData
+        label={t`Total amount`}
+        primaryAmount={formattedTotalAmount?.primaryAmount}
+        secondaryAmount={formattedTotalAmount?.secondaryAmount}
+      />
+    )
+
+  return (
+    <div>
+      <RowData
+        label={t`Amount`}
+        primaryAmount={formattedAmount.primaryAmount}
+        secondaryAmount={formattedAmount.secondaryAmount}
+      />
+      <RowData
+        label={t`NFT Credits`}
+        primaryAmount={`-${formattedNftCredits.primaryAmount}`}
+        secondaryAmount={`-${formattedNftCredits.secondaryAmount}`}
+      />
+      <RowData
+        label={t`Total amount`}
+        primaryAmount={formattedTotalAmount?.primaryAmount}
+        secondaryAmount={formattedTotalAmount?.secondaryAmount}
+      />
+    </div>
+  )
+}

src/packages/v4/components/ProjectDashboard/V4PayRedeemCard/PayProjectModal/components/ReceiveNftItem.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/ReceiveSection.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/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>