feat: nfts show up pay card when none selected

jbx-protocol · Mar 4, 2025 · 91b0185 · 91b0185
1 parent 7132c31
commit 91b0185
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 29 deletions.
diff --git a/...s/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx b/...s/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayRedeemCard.tsx
@@ -8,34 +8,42 @@ import {
 } from '@heroicons/react/24/outline'
 import { Trans, t } from '@lingui/macro'
 import { Button, Tooltip } from 'antd'
+import { JuiceModal, JuiceModalProps } from 'components/modals/JuiceModal'
+import {
+  V2V3_CURRENCY_ETH,
+  V2V3_CURRENCY_USD,
+} from 'packages/v2v3/utils/currency'
+import { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { fromWad, parseWad } from 'utils/format/formatNumber'
+import {
+  useProjectDispatch,
+  useProjectSelector,
+  useProjectStore,
+} from '../../redux/hooks'
+
 import { Callout } from 'components/Callout/Callout'
 import { CartItemBadge } from 'components/CartItemBadge'
+import { EthereumIcon } from 'components/icons/Ethereum'
 import Loading from 'components/Loading'
 import { SmallNftSquare } from 'components/NftRewards/SmallNftSquare'
 import { TruncatedText } from 'components/TruncatedText'
-import { EthereumIcon } from 'components/icons/Ethereum'
-import { JuiceModal, JuiceModalProps } from 'components/modals/JuiceModal'
 import { PV_V2 } from 'constants/pv'
 import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
-import { useWallet } from 'hooks/Wallet'
 import { emitConfirmationDeletionModal } from 'hooks/emitConfirmationDeletionModal'
 import { useCurrencyConverter } from 'hooks/useCurrencyConverter'
 import { useProjectLogoSrc } from 'hooks/useProjectLogoSrc'
-import { useHasNftRewards } from 'packages/v2v3/hooks/JB721Delegate/useHasNftRewards'
+import { useWallet } from 'hooks/Wallet'
+import { NftRewardTier } from 'models/nftRewards'
+import { NftRewardsContext } from 'packages/v2v3/contexts/NftRewards/NftRewardsContext'
 import { useETHReceivedFromTokens } from 'packages/v2v3/hooks/contractReader/useETHReceivedFromTokens'
+import { useHasNftRewards } from 'packages/v2v3/hooks/JB721Delegate/useHasNftRewards'
 import { useRedeemTokensTx } from 'packages/v2v3/hooks/transactor/useRedeemTokensTx'
 import { usePayProjectDisabled } from 'packages/v2v3/hooks/usePayProjectDisabled'
-import {
-  V2V3_CURRENCY_ETH,
-  V2V3_CURRENCY_USD,
-} from 'packages/v2v3/utils/currency'
 import { formatCurrencyAmount } from 'packages/v2v3/utils/formatCurrencyAmount'
 import { isInfiniteDistributionLimit } from 'packages/v2v3/utils/fundingCycle'
 import { computeIssuanceRate } from 'packages/v2v3/utils/math'
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { formatAmount } from 'utils/format/formatAmount'
-import { fromWad, parseWad } from 'utils/format/formatNumber'
 import { emitErrorNotification } from 'utils/notifications'
 import { NftCreditsCallout } from '../../../NftCreditsCallout'
 import { useNftCartItem } from '../../hooks/useNftCartItem'
@@ -45,11 +53,6 @@ import { useProjectPageQueries } from '../../hooks/useProjectPageQueries'
 import { useTokensPanel } from '../../hooks/useTokensPanel'
 import { useTokensPerEth } from '../../hooks/useTokensPerEth'
 import { useUnclaimedTokenBalance } from '../../hooks/useUnclaimedTokenBalance'
-import {
-  useProjectDispatch,
-  useProjectSelector,
-  useProjectStore,
-} from '../../redux/hooks'
 import { payRedeemActions } from '../../redux/payRedeemSlice'
 import { projectCartActions } from '../../redux/projectCartSlice'
 import { ClaimErc20Callout } from '../ClaimErc20Callout'
@@ -263,7 +266,7 @@ const PayRedeemInput = ({
   readOnly,
   redeemUnavailable,
   token,
-  nfts,
+  cartNfts,
   value,
   onChange,
 }: {
@@ -278,10 +281,14 @@ const PayRedeemInput = ({
     image: ReactNode
     balance: string | undefined
   }
-  nfts?: ProjectCartNftReward[]
+  cartNfts?: ProjectCartNftReward[]
   value?: string | undefined
   onChange?: (value: string | undefined) => void
 }) => {
+  const {
+    nftRewards: { rewardTiers: nfts },
+  } = useContext(NftRewardsContext)
+
   token.type = token.type || 'native'
 
   const converter = useCurrencyConverter()
@@ -368,14 +375,15 @@ const PayRedeemInput = ({
           </div>
         )}
         {/* Only show spacer if redeem is available and nfts are not empty */}
-        {!redeemUnavailable && !!nfts?.length && (
+        {!redeemUnavailable && !!cartNfts?.length && (
           <div className="my-2 h-[1px] w-full border-t border-grey-200 dark:border-slate-600" />
         )}
-        {nfts && nfts?.length > 0 && (
+        {nfts && nfts?.length > 0 && readOnly && (
           <div className="mt-4 space-y-4">
-            {nfts.map((nft, i) => (
-              <NftReward key={i} nft={nft} />
-            ))}
+            {nfts?.map((nft, i) => {
+              const quantity = cartNfts?.find(cartNft => cartNft.id === nft.id)?.quantity ?? 0
+              return <NftReward key={i} nft={nft} quantity={quantity} />
+            })}
           </div>
         )}
       </div>
@@ -578,7 +586,7 @@ const PayConfiguration: React.FC<PayConfigurationProps> = ({
               ticker: tokenTicker,
               type: projectHasErc20Token ? 'erc20' : 'native',
             }}
-            nfts={chosenNftRewards}
+            cartNfts={chosenNftRewards}
             value={
               tokenReceivedAmount.receivedTickets &&
               !!parseFloat(tokenReceivedAmount.receivedTickets)
@@ -823,18 +831,22 @@ const EthereumLogo = () => {
 }
 
 const NftReward: React.FC<{
-  nft: ProjectCartNftReward
+  nft: NftRewardTier
+  quantity: number
   className?: string
-}> = ({ nft, className }) => {
+}> = ({ nft, className, quantity }) => {
   const {
     price,
     name,
-    quantity,
     fileUrl,
+    upsertNft,
     removeNft,
     increaseQuantity,
     decreaseQuantity,
-  } = useNftCartItem(nft)
+  } = useNftCartItem({
+    id: nft.id,
+    quantity
+  } as ProjectCartNftReward)
   const { setProjectPageTab } = useProjectPageQueries()
 
   const handleRemove = useCallback(() => {
@@ -845,6 +857,14 @@ const NftReward: React.FC<{
     })
   }, [removeNft])
 
+  const handleIncreaseQuantity = useCallback(() => {
+    if (quantity === 0) {
+      upsertNft()
+    } else {
+      increaseQuantity()
+    }
+  }, [increaseQuantity, quantity, upsertNft])
+
   const handleDecreaseQuantity = useCallback(() => {
     if (quantity - 1 <= 0) {
       handleRemove()
@@ -892,7 +912,7 @@ const NftReward: React.FC<{
       <div className="flex items-center gap-3">
         <QuantityControl
           quantity={quantity}
-          onIncrease={increaseQuantity}
+          onIncrease={handleIncreaseQuantity}
           onDecrease={handleDecreaseQuantity}
         />
         <RemoveIcon onClick={handleRemove} />

diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/hooks/useNftCartItem.ts b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/hooks/useNftCartItem.ts
@@ -1,6 +1,7 @@
+import { useCallback, useContext, useMemo } from 'react'
+
 import { NftRewardsContext } from 'packages/v2v3/contexts/NftRewards/NftRewardsContext'
 import { V2V3_CURRENCY_ETH } from 'packages/v2v3/utils/currency'
-import { useCallback, useContext, useMemo } from 'react'
 import { ProjectCartNftReward } from '../components/ReduxProjectCartProvider'
 import { useProjectDispatch } from '../redux/hooks'
 import { projectCartActions } from '../redux/projectCartSlice'
@@ -23,6 +24,10 @@ export const useNftCartItem = ({ id, quantity }: ProjectCartNftReward) => {
     }),
     [quantity, rewardTier?.contributionFloor],
   )
+  const upsertNft = useCallback(
+    () => dispatch(projectCartActions.upsertNftReward({ id, quantity: 1 })),
+    [dispatch, id],
+  )
   const removeNft = useCallback(
     () => dispatch(projectCartActions.removeNftReward({ id })),
     [dispatch, id],
@@ -41,6 +46,7 @@ export const useNftCartItem = ({ id, quantity }: ProjectCartNftReward) => {
     fileUrl: rewardTier?.fileUrl,
     quantity,
     price,
+    upsertNft,
     removeNft,
     increaseQuantity,
     decreaseQuantity,