feat: new notification types

decentraland · Dec 4, 2023 · dd8de6e · dd8de6e
1 parent 8af3e7f
commit dd8de6e
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 4 deletions.
diff --git a/src/components/Notifications/NotificationTypes/BidAcceptedNotification.tsx b/src/components/Notifications/NotificationTypes/BidAcceptedNotification.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { BidAcceptedNotification, NotificationLocale } from '../types'
+import NotificationItem from '../NotificationItem'
+import BidAccepted from '../../Icons/Notifications/BidAccepted'
+import { Rarity } from '@dcl/schemas'
+
+interface BidAcceptedNotificationProps {
+  notification: BidAcceptedNotification
+  locale: NotificationLocale
+}
+
+const i18N = {
+  en: {
+    description: (
+      mana: React.ReactNode,
+      nftName: React.ReactNode
+    ): React.ReactNode =>
+      `Your bid of ${mana} MANA was accepted for ${nftName}`,
+    title: 'Bid Accepted'
+  },
+  es: { description: (
+    mana: React.ReactNode,
+    nftName: React.ReactNode
+  ): React.ReactNode =>
+    `Tu oferta de ${mana} MANA fue aceptada para ${nftName}`, title: 'Oferta aceptada' },
+  zh: { description: (
+    mana: React.ReactNode,
+    nftName: React.ReactNode
+  ): React.ReactNode => `您的出价 ${mana} MANA 已被接受 ${nftName}` , title: '接受投标' }
+}
+
+const BidAcceptedNotification = ({
+  notification,
+  locale
+}: BidAcceptedNotificationProps) => {
+  return (
+    <NotificationItem
+      image={{
+        imageLink: notification.metadata.image,
+        rarity: notification.metadata.rarity,
+        icon: <BidAccepted />
+      }}
+      timestamp={notification.timestamp}
+      isNew={!notification.read}
+    >
+      <p className="dcl notification-item__content__title">
+        {i18N[locale].title}
+      </p>
+      <p className="dcl notification-item__content__description">
+        {i18N[locale].description}{' '}
+        <span>
+          <a
+            href={notification.metadata.link}
+            style={{
+              color: `${Rarity.getColor(notification.metadata.rarity)}`,
+              textDecoration: 'underline'
+            }}
+          >
+            {notification.metadata.nftName}
+          </a>
+        </span>
+      </p>
+    </NotificationItem>
+  )
+}
+
+export default BidAcceptedNotification
diff --git a/src/components/Notifications/NotificationTypes/BidReceivedNotification.tsx b/src/components/Notifications/NotificationTypes/BidReceivedNotification.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { BidReceivedNotification, NotificationLocale } from '../types'
+import NotificationItem from '../NotificationItem'
+import BidAccepted from '../../Icons/Notifications/BidAccepted'
+import { Rarity } from '@dcl/schemas'
+
+interface BidReceivedNotificationProps {
+  notification: BidReceivedNotification
+  locale: NotificationLocale
+}
+
+const i18N = {
+  en: {
+    description: (
+      mana: React.ReactNode,
+      nftName: React.ReactNode
+    ): React.ReactNode =>
+      `Your received a bid of ${mana} MANA was accepted for ${nftName}`,
+    title: 'Bid Received'
+  },
+  es: { description: (
+    mana: React.ReactNode,
+    nftName: React.ReactNode
+  ): React.ReactNode =>
+    `Recibiste una oferta de ${mana} MANA para ${nftName}`, title: 'Oferta aceptada' },
+  zh: { description: (
+    mana: React.ReactNode,
+    nftName: React.ReactNode
+  ): React.ReactNode => `您为 ${nftName} 出价 ${mana} MANA 已被接受` , title: '收到的投标' }
+}
+
+const BidReceivedNotification = ({
+  notification,
+  locale
+}: BidReceivedNotificationProps) => {
+  return (
+    <NotificationItem
+      image={{
+        imageLink: notification.metadata.image,
+        rarity: notification.metadata.rarity,
+        icon: <BidAccepted />
+      }}
+      timestamp={notification.timestamp}
+      isNew={!notification.read}
+    >
+      <p className="dcl notification-item__content__title">
+        {i18N[locale].title}
+      </p>
+      <p className="dcl notification-item__content__description">
+        {i18N[locale].description}{' '}
+        <span>
+          <a
+            href={notification.metadata.link}
+            style={{
+              color: `${Rarity.getColor(notification.metadata.rarity)}`,
+              textDecoration: 'underline'
+            }}
+          >
+            {notification.metadata.nftName}
+          </a>
+        </span>
+      </p>
+    </NotificationItem>
+  )
+}
+
+export default BidReceivedNotification
diff --git a/src/components/Notifications/NotificationTypes/RoyaltiesEarnedNotification.tsx b/src/components/Notifications/NotificationTypes/RoyaltiesEarnedNotification.tsx
@@ -66,12 +66,12 @@ const RoyaltiesEarnedNotification = ({
             </a>
           </span>{' '}
           {i18N[locale].description_2}
-          {Number(notification.metadata.royaltiesCut)} MANA 
+          {Number(notification.metadata.royaltiesCut)} MANA
         </p>
       ) : (
         <p className="dcl notification-item__content__description">
           {i18N[locale].description_1}
-          {Number(notification.metadata.royaltiesCut)} MANA {' '}
+          {Number(notification.metadata.royaltiesCut)} MANA{' '}
           {i18N[locale].description_2}
           <span>
             <a

diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts
@@ -5,6 +5,7 @@ export type ActiveTab = 'newest' | 'read'
 export type NotificationLocale = 'en' | 'es' | 'zh'
 
 type RawDecentralandNotification<T extends DecentralandNotificationType, M> = {
+  id: string
   type: T
   address: string
   timestamp: number
@@ -14,7 +15,7 @@ type RawDecentralandNotification<T extends DecentralandNotificationType, M> = {
   metadata: M
 }
 
-export type DecentralandNotificationType = 'item_sold' | 'royalties_earned'
+export type DecentralandNotificationType = 'item_sold' | 'royalties_earned' | 'bid_accepted' | 'bid_received'
 
 type CommonNFTMetadata = {
   link: string
@@ -34,6 +35,14 @@ type RoyalitesEarnedMetadata = CommonNFTMetadata & {
   royaltiesCut: string
 }
 
+type BidAcceptedMetadata = CommonNFTMetadata & {
+
+}
+
+type BidReceivedMetadata = CommonNFTMetadata & {
+
+}
+
 export type MetadataTypes = ItemSoldMetadata | RoyalitesEarnedMetadata
 
 export type ItemSoldNotification = RawDecentralandNotification<
@@ -46,4 +55,8 @@ export type RoyalitesEarnedNotification = RawDecentralandNotification<
   RoyalitesEarnedMetadata
 >
 
-export type DCLNotification = ItemSoldNotification | RoyalitesEarnedNotification
+export type BidAcceptedNotification = RawDecentralandNotification<'bid_accepted', BidAcceptedMetadata>
+
+export type BidReceivedNotification = RawDecentralandNotification<'bid_received', BidReceivedMetadata>
+
+export type DCLNotification = ItemSoldNotification | RoyalitesEarnedNotification | BidAcceptedNotification | BidReceivedNotification