feat: activity panel enhancements

src/components/ProtocolActivity/utils/translateEventDataToProtocolPresenter.tsx

@@ -20,7 +20,7 @@ export function translateEventDataToProtocolPresenter(event: AnyEvent) {
         header: 'Added to balance',
         subject: `${formatActivityAmount(event.amount.value)} ETH`,
       }
-    case 'mintTokensEvent':
+    case 'manualMintTokensEvent':
       return {
         event,
         header: 'Minted tokens',
@@ -74,7 +74,7 @@ export function translateEventDataToProtocolPresenter(event: AnyEvent) {
         header: 'Used allowance',
         subject: `${formatActivityAmount(event.amount.value)} ETH`,
       }
-    case 'burnEvent':
+    case 'manualBurnEvent':
       return {
         event,
         header: 'Burned',

src/locales/messages.pot

@@ -788,6 +788,9 @@ msgstr ""
 msgid "<0/>{0} distributed"
 msgstr ""
 
+msgid "Create NFT Rewards"
+msgstr ""
+
 msgid "Project ownership has been successfully transferred to {toAddress} on all chains."
 msgstr ""
 
@@ -2141,6 +2144,9 @@ msgstr ""
 msgid "Unlimited payouts"
 msgstr ""
 
+msgid "Add NFT Tier"
+msgstr ""
+
 msgid "Configuration rules"
 msgstr ""
 

src/packages/v4v5/graphql/queries/activityEvents.graphql

@@ -48,7 +48,7 @@ query ActivityEvents(
         amount
         memo
       }
-      mintTokensEvent {
+      manualMintTokensEvent {
         id
         projectId
         timestamp
@@ -158,7 +158,7 @@ query ActivityEvents(
         netAmountPaidOut
         memo
       }
-      burnEvent {
+      manualBurnEvent {
         id
         projectId
         timestamp

src/packages/v4v5/views/V4V5ProjectDashboard/V4V5ProjectDashboard.tsx

@@ -41,7 +41,7 @@ export default function V4V5ProjectDashboard() {
             <div
               className={twMerge(
                 'flex flex-col gap-8',
-                '[@media(min-width:960px)]:order-last [@media(min-width:960px)]:min-w-[340px] [@media(min-width:960px)]:max-w-md',
+                '[@media(min-width:960px)]:order-last [@media(min-width:960px)]:min-w-[320px] [@media(min-width:960px)]:max-w-[400px]',
               )}
             >
               <V4V5PayRedeemCard className="mt-10" />

src/packages/v4v5/views/V4V5ProjectDashboard/V4V5ProjectTabs/V4V5ActivityPanel/V4V5ActivityList.tsx

@@ -91,7 +91,7 @@ export function V4V5ActivityList() {
 
   return (
     <div>
-      <h2 className="mb-6 font-heading text-2xl font-medium">Activity</h2>
+      <h2 className="mb-6 font-heading text-xl font-medium">Activity</h2>
       <div className="flex flex-col gap-3">
         <JuiceListbox
           className="mb-5"
@@ -130,7 +130,7 @@ export function V4V5ActivityList() {
             )}
           </>
         ) : (
-          <span className="text-zinc-500 text-sm">No activity yet.</span>
+          <span className="text-zinc-500 text-xs">No activity yet.</span>
         )}
       </div>
     </div>
@@ -148,7 +148,7 @@ export function translateEventDataToPresenter(
         event,
         header: 'Paid',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {formatActivityAmount(event.amount.value)} ETH
           </span>
         ),
@@ -159,18 +159,18 @@ export function translateEventDataToPresenter(
         event,
         header: 'Added to balance',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {formatActivityAmount(event.amount.value)} ETH
           </span>
         ),
         extra: event.note ? <RichNote note={event.note} /> : null,
       }
-    case 'mintTokensEvent':
+    case 'manualMintTokensEvent':
       return {
         event,
         header: 'Minted tokens',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {event.amount.format()}{' '}
             {tokenSymbolText({
               capitalize: true,
@@ -186,7 +186,7 @@ export function translateEventDataToPresenter(
         event,
         header: 'Cashed out',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {formatActivityAmount(event.reclaimAmount.value)} ETH
           </span>
         ),
@@ -195,7 +195,7 @@ export function translateEventDataToPresenter(
       return {
         event,
         header: 'Deployed ERC20',
-        subject: <span className="font-heading text-lg">{event.symbol}</span>,
+        subject: <span className="font-heading text-base">{event.symbol}</span>,
         extra: <RichNote note={event.address} />,
       }
     case 'projectCreateEvent':
@@ -210,7 +210,7 @@ export function translateEventDataToPresenter(
         event,
         header: 'Send payouts',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {formatActivityAmount(event.amount.value)} ETH
           </span>
         ),
@@ -225,7 +225,7 @@ export function translateEventDataToPresenter(
         event,
         header: 'Send reserved tokens',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {fromWad(event.tokenCount)}{' '}
             {tokenSymbolText({ tokenSymbol, plural: event.tokenCount > 1 })}
           </span>
@@ -237,7 +237,7 @@ export function translateEventDataToPresenter(
         event,
         header: 'Send to reserved token split',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {fromWad(event.tokenCount)}{' '}
             {tokenSymbolText({ tokenSymbol, plural: event.tokenCount > 1 })}
           </span>
@@ -255,7 +255,7 @@ export function translateEventDataToPresenter(
         event,
         header: 'Send to payout split',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {formatActivityAmount(event.amount.value)} ETH
           </span>
         ),
@@ -272,18 +272,18 @@ export function translateEventDataToPresenter(
         event,
         header: 'Used allowance',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {formatActivityAmount(event.amount.value)} ETH
           </span>
         ),
         extra: <RichNote note={event.note} />,
       }
-    case 'burnEvent':
+    case 'manualBurnEvent':
       return {
         event,
         header: 'Burned',
         subject: (
-          <span className="font-heading text-lg">
+          <span className="font-heading text-base">
             {Number(event.amount.toFloat())}{' '}
             {tokenSymbolText({
               tokenSymbol,
@@ -402,7 +402,7 @@ const ACTIVITY_OPTIONS = [
   { label: 'All activity', value: 'all' },
   { label: 'Paid', value: 'payEvent' },
   { label: 'Added to balance', value: 'addToBalanceEvent' },
-  { label: 'Minted tokens', value: 'mintTokensEvent' },
+  { label: 'Minted tokens', value: 'manualMintTokensEvent' },
   { label: 'Cashed out', value: 'cashOutEvent' },
   { label: 'Deployed ERC20', value: 'deployedERC20Event' },
   { label: 'Project created', value: 'projectCreateEvent' },
@@ -420,7 +420,7 @@ const ACTIVITY_OPTIONS = [
     value: 'sendPayoutsToSplitEvent',
   },
   { label: 'Used allowance', value: 'useAllowanceEvent' },
-  { label: 'Burned', value: 'burnEvent' },
+  { label: 'Burned', value: 'manualBurnEvent' },
 ]
 
 const CHAIN_OPTIONS = Object.entries(NETWORKS).map(

src/packages/v4v5/views/V4V5ProjectDashboard/V4V5ProjectTabs/V4V5ActivityPanel/activityEventElems/ActivityElement.tsx

@@ -128,7 +128,7 @@ function TimestampVersion({
 }
 
 function Subject({ subject }: { subject: string | JSX.Element | null }) {
-  return <div className="text-sm">{subject}</div>
+  return <div className="text-xs">{subject}</div>
 }
 
 /**

src/packages/v4v5/views/V4V5ProjectDashboard/V4V5ProjectTabs/V4V5ActivityPanel/utils/transformEventsData.ts

@@ -6,7 +6,7 @@ import { ActivityEventsQuery } from 'packages/v4v5/graphql/client/graphql'
 export type EventType =
   | 'payEvent'
   | 'addToBalanceEvent'
-  | 'mintTokensEvent'
+  | 'manualMintTokensEvent'
   | 'cashOutEvent'
   | 'deployedERC20Event'
   | 'projectCreateEvent'
@@ -15,7 +15,7 @@ export type EventType =
   | 'distributeToReservedTokenSplitEvent'
   | 'distributeToPayoutSplitEvent'
   | 'useAllowanceEvent'
-  | 'burnEvent'
+  | 'manualBurnEvent'
 
 export interface Event {
   id: string
@@ -46,8 +46,8 @@ export interface AddToBalanceEvent extends Event {
   note: string | null
 }
 
-export interface MintTokensEvent extends Event {
-  type: 'mintTokensEvent'
+export interface ManualMintTokensEvent extends Event {
+  type: 'manualMintTokensEvent'
   amount: Ether
   beneficiary: string
   note: string
@@ -118,8 +118,8 @@ export interface UseAllowanceEvent extends Event {
   note: string
 }
 
-export interface BurnEvent extends Event {
-  type: 'burnEvent'
+export interface ManualBurnEvent extends Event {
+  type: 'manualBurnEvent'
   holder: string
   amount: Ether
   stakedAmount: Ether
@@ -136,7 +136,7 @@ export interface BurnEvent extends Event {
 export type AnyEvent =
   | PayEvent
   | AddToBalanceEvent
-  | MintTokensEvent
+  | ManualMintTokensEvent
   | CashOutEvent
   | DeployedERC20Event
   | ProjectCreateEvent
@@ -145,7 +145,7 @@ export type AnyEvent =
   | DistributeToReservedTokenSplitEvent
   | DistributeToPayoutSplitEvent
   | UseAllowanceEvent
-  | BurnEvent
+  | ManualBurnEvent
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function extractBaseEventData(event: any, projectName?: string | null, projectHandle?: string | null): AnyEvent {
@@ -204,14 +204,14 @@ export function transformEventData(
       note: data.addToBalanceEvent.memo,
     }
   }
-  if (data.mintTokensEvent) {
+  if (data.manualMintTokensEvent) {
     return {
-      ...extractBaseEventData(data.mintTokensEvent, projectName, projectHandle),
+      ...extractBaseEventData(data.manualMintTokensEvent, projectName, projectHandle),
       chainId: data.chainId,
-      type: 'mintTokensEvent',
-      amount: new Ether(BigInt(data.mintTokensEvent.tokenCount)),
-      beneficiary: data.mintTokensEvent.beneficiary,
-      note: data.mintTokensEvent.memo || '',
+      type: 'manualMintTokensEvent',
+      amount: new Ether(BigInt(data.manualMintTokensEvent.tokenCount)),
+      beneficiary: data.manualMintTokensEvent.beneficiary,
+      note: data.manualMintTokensEvent.memo || '',
     }
   }
   if (data.cashOutTokensEvent) {
@@ -309,15 +309,15 @@ export function transformEventData(
       note: data.useAllowanceEvent.memo || '',
     }
   }
-  if (data.burnEvent) {
+  if (data.manualBurnEvent) {
     return {
-      ...extractBaseEventData(data.burnEvent, projectName, projectHandle),
+      ...extractBaseEventData(data.manualBurnEvent, projectName, projectHandle),
       chainId: data.chainId,
-      type: 'burnEvent',
-      holder: data.burnEvent.from,
-      amount: new Ether(BigInt(data.burnEvent.amount)),
-      stakedAmount: new Ether(BigInt(data.burnEvent.creditAmount)),
-      erc20Amount: new Ether(BigInt(data.burnEvent.erc20Amount)),
+      type: 'manualBurnEvent',
+      holder: data.manualBurnEvent.from,
+      amount: new Ether(BigInt(data.manualBurnEvent.amount)),
+      stakedAmount: new Ether(BigInt(data.manualBurnEvent.creditAmount)),
+      erc20Amount: new Ether(BigInt(data.manualBurnEvent.erc20Amount)),
     }
   }
   console.warn('Unknown event type', data)

src/packages/v4v5/views/V4V5ProjectDashboard/V4V5ProjectTabs/V4V5NftRewardsPanel/V4V5NftRewardsPanel.tsx

@@ -2,7 +2,13 @@ import { Trans, t } from '@lingui/macro'
 import { forwardRef } from 'react'
 import { NftReward, NftRewardSkeleton } from './NftReward/NftReward'
 
+import { Button } from 'antd'
 import { EmptyScreen } from 'components/Project/ProjectTabs/EmptyScreen'
+import { useWallet } from 'hooks/Wallet/useWallet'
+import useV4V5ProjectOwnerOf from 'packages/v4v5/hooks/useV4V5ProjectOwnerOf'
+import { useV4V5ProjectHeader } from 'packages/v4v5/views/V4V5ProjectDashboard/hooks/useV4V5ProjectHeader'
+import { useSettingsPagePath } from 'packages/v4v5/views/V4V5ProjectSettings/hooks/useSettingsPagePath'
+import { useRouter } from 'next/router'
 import { RedeemNftsSection } from './RedeemNftsSection/RedeemNftsSection'
 import { useNftRewardsPanel } from './hooks/useNftRewardsPanel'
 
@@ -14,11 +20,31 @@ export const V4V5NftRewardsPanel = forwardRef<HTMLDivElement>((props, ref) => {
     loading: nftsLoading,
   } = useNftRewardsPanel()
 
+  const router = useRouter()
+  const { userAddress } = useWallet()
+  const { data: projectOwnerAddress } = useV4V5ProjectOwnerOf()
+  const { isRevnet, operatorAddress } = useV4V5ProjectHeader()
+  const nftSettingsPath = useSettingsPagePath('nfts')
+
+  // Check if user can add NFTs (project owner or revnet operator)
+  const canAddNfts =
+    userAddress &&
+    (userAddress.toLowerCase() === projectOwnerAddress?.toLowerCase() ||
+      (isRevnet &&
+        userAddress.toLowerCase() === operatorAddress?.toLowerCase()))
+
   return (
     <div ref={ref} className="flex w-full flex-col gap-5">
-      <h2 className="font-heading text-2xl font-medium">
-        <Trans>NFTs</Trans>
-      </h2>
+      <div className="flex items-center justify-between">
+        <h2 className="font-heading text-2xl font-medium">
+          <Trans>NFTs</Trans>
+        </h2>
+        {canAddNfts && rewardTiers?.length && nftSettingsPath ? (
+          <Button type="primary" onClick={() => router.push(nftSettingsPath)}>
+            <Trans>Add NFT Tier</Trans>
+          </Button>
+        ) : null}
+      </div>
       <RedeemNftsSection />
 
       {!nftsLoading && rewardTiers?.length ? (
@@ -41,6 +67,17 @@ export const V4V5NftRewardsPanel = forwardRef<HTMLDivElement>((props, ref) => {
             <NftRewardSkeleton key={i} />
           ))}
         </div>
+      ) : canAddNfts && nftSettingsPath ? (
+        <div className="flex flex-col items-center gap-4">
+          <EmptyScreen subtitle={t`This project has no NFTs`} />
+          <Button
+            type="primary"
+            size="large"
+            onClick={() => router.push(nftSettingsPath)}
+          >
+            <Trans>Create NFT Rewards</Trans>
+          </Button>
+        </div>
       ) : (
         <EmptyScreen subtitle={t`This project has no NFTs`} />
       )}