From 8f657a0b373a8143b922422ad5c85db4547e0b5d Mon Sep 17 00:00:00 2001
From: Johnny D <johnnyD.eth@protonmail.com>
Date: Sun, 14 Jul 2024 22:58:48 +1000
Subject: [PATCH] NFT credits checkout (#4385)

---
 src/locales/messages.pot                      |  3 ++
 .../V2V3Project/NftCreditsCallout.tsx         | 37 +++++++++++++++++++
 .../components/PayRedeemCard.tsx              |  3 ++
 3 files changed, 43 insertions(+)
 create mode 100644 src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx

diff --git a/src/locales/messages.pot b/src/locales/messages.pot
index 32692ab2af..f89068ae21 100644
--- a/src/locales/messages.pot
+++ b/src/locales/messages.pot
@@ -1406,6 +1406,9 @@ msgstr ""
 msgid "File"
 msgstr ""
 
+msgid "You have <0>{0} ETH</0> of unclaimed NFT credits"
+msgstr ""
+
 msgid "<0>Juicebox is a <1>governance-minimal</1> protocol. There are only a few levers that can be tuned, none of which impose changes for users without their consent. The Juicebox governance smart contract can adjust these levers.</0><2>The Juicebox protocol is governed by a community of JBX token holders who vote on proposals fortnightly.</2><3>Juicebox is on-chain and non-custodial. Project creators actually own their projects, and JuiceboxDAO has no way to access project's ETH or change their rules.</3>"
 msgstr ""
 
diff --git a/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx b/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx
new file mode 100644
index 0000000000..51e9998fa4
--- /dev/null
+++ b/src/packages/v2v3/components/V2V3Project/NftCreditsCallout.tsx
@@ -0,0 +1,37 @@
+import { CubeIcon } from "@heroicons/react/24/outline"
+import { Trans } from "@lingui/macro"
+import { Button } from "antd"
+import { useWallet } from "hooks/Wallet"
+import { useNftCredits } from "packages/v2v3/hooks/JB721Delegate/useNftCredits"
+import { fromWad } from "utils/format/formatNumber"
+import { useProjectPageQueries } from "./ProjectDashboard/hooks/useProjectPageQueries"
+
+export function NftCreditsCallout() {
+  const { setProjectPageTab } = useProjectPageQueries()
+  const { userAddress } = useWallet()
+  const { data: nftCredits } = useNftCredits(userAddress)
+  if (nftCredits && nftCredits.gt(0)) {
+    return (
+      <div
+        className={'flex flex-col gap-5 rounded-lg border border-grey-200 bg-white p-5 pb-6 shadow-[0_6px_16px_0_rgba(0,_0,_0,_0.04)] dark:border-slate-600 dark:bg-slate-700'}
+      >
+        <div className='flex flex-start gap-1.5 items-center'>
+          <div className='bg-bluebs-50 dark:bg-bluebs-500 rounded-full flex items-center justify-center p-1'>
+            <CubeIcon className="h-5 w-5 text-gray-500 text-bluebs-600 dark:text-black stroke-2" />
+          </div>
+          <Trans>
+            You have <strong className="font-bold">{fromWad(nftCredits)} ETH</strong> of unclaimed NFT credits
+          </Trans>
+        </div>
+        <Button 
+          type="default" 
+          className="bg-bluebs-50 dark:bg-bluebs-500 border-none font-medium dark:text-black"
+          onClick={() => setProjectPageTab('nft_rewards')}
+        >
+          Browse NFTs
+        </Button>
+      </div>
+    )
+  }
+  return null
+}
diff --git a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard.tsx b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard.tsx
index ac58537174..9bd17bed11 100644
--- a/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard.tsx
+++ b/src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard.tsx
@@ -33,6 +33,7 @@ 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'
 import { useProjectContext } from '../hooks/useProjectContext'
 import { useProjectHasErc20Token } from '../hooks/useProjectHasErc20Token'
@@ -185,6 +186,8 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
         </Callout.Info>
       )}
 
+      <NftCreditsCallout />
+
       {projectHasErc20Token && unclaimedTokenBalance?.gt(0) && (
         <ClaimErc20Callout className="mt-4" unclaimed={unclaimedTokenBalance} />
       )}