fix: new tpypes

decentraland · Dec 4, 2023 · d6e35fa · d6e35fa
1 parent 9bd082e
commit d6e35fa
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 58 deletions.
diff --git a/src/components/Notifications/NotificationTypes/BidAcceptedNotification.tsx b/src/components/Notifications/NotificationTypes/BidAcceptedNotification.tsx
@@ -4,6 +4,7 @@ import { BidAcceptedNotification, NotificationLocale } from '../types'
 import NotificationItem from '../NotificationItem'
 import BidAccepted from '../../Icons/Notifications/BidAccepted'
 import { Rarity } from '@dcl/schemas'
+import { formatMana } from '../utils'
 
 interface BidAcceptedNotificationProps {
   notification: BidAcceptedNotification
@@ -19,15 +20,21 @@ const i18N = {
       `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: '接受投标' }
+  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 = ({
@@ -48,18 +55,20 @@ const BidAcceptedNotification = ({
         {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>
+        {i18N[locale].description(
+          formatMana(notification.metadata.price),
+          <span>
+            <a
+              href={notification.metadata.link}
+              style={{
+                color: `${Rarity.getColor(notification.metadata.rarity)}`,
+                textDecoration: 'underline'
+              }}
+            >
+              {notification.metadata.nftName}
+            </a>
+          </span>
+        )}
       </p>
     </NotificationItem>
   )

diff --git a/src/components/Notifications/NotificationTypes/BidReceivedNotification.tsx b/src/components/Notifications/NotificationTypes/BidReceivedNotification.tsx
@@ -4,6 +4,7 @@ import { BidReceivedNotification, NotificationLocale } from '../types'
 import NotificationItem from '../NotificationItem'
 import BidAccepted from '../../Icons/Notifications/BidAccepted'
 import { Rarity } from '@dcl/schemas'
+import { formatMana } from '../utils'
 
 interface BidReceivedNotificationProps {
   notification: BidReceivedNotification
@@ -19,15 +20,21 @@ const i18N = {
       `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: '收到的投标' }
+  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 = ({
@@ -48,18 +55,20 @@ const BidReceivedNotification = ({
         {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>
+        {i18N[locale].description(
+          formatMana(notification.metadata.price),
+          <span>
+            <a
+              href={notification.metadata.link}
+              style={{
+                color: `${Rarity.getColor(notification.metadata.rarity)}`,
+                textDecoration: 'underline'
+              }}
+            >
+              {notification.metadata.nftName}
+            </a>
+          </span>
+        )}
       </p>
     </NotificationItem>
   )

diff --git a/src/components/Notifications/NotificationTypes/RoyaltiesEarnedNotification.tsx b/src/components/Notifications/NotificationTypes/RoyaltiesEarnedNotification.tsx
@@ -5,6 +5,7 @@ import NotificationItem from '../NotificationItem'
 import ManaMainnet from '../../Icons/Notifications/ManaMainnet'
 import ManaPolygon from '../../Icons/Notifications/ManaPoly'
 import { Rarity } from '@dcl/schemas'
+import { formatMana } from '../utils'
 
 interface RoyaltiesEarnedNotificationProps {
   notification: RoyalitesEarnedNotification
@@ -66,12 +67,12 @@ const RoyaltiesEarnedNotification = ({
             </a>
           </span>{' '}
           {i18N[locale].description_2}
-          {Number(notification.metadata.royaltiesCut)} MANA
+          {formatMana(notification.metadata.royaltiesCut)} MANA
         </p>
       ) : (
         <p className="dcl notification-item__content__description">
           {i18N[locale].description_1}
-          {Number(notification.metadata.royaltiesCut)} MANA{' '}
+          {formatMana(notification.metadata.royaltiesCut)} MANA{' '}
           {i18N[locale].description_2}
           <span>
             <a

diff --git a/src/components/Notifications/NotificationsFeed.tsx b/src/components/Notifications/NotificationsFeed.tsx
@@ -108,17 +108,11 @@ const NotificationHandler = ({
       )
     case 'bid_accepted':
       return (
-        <BidAcceptedNotification 
-          notification={notification}
-          locale={locale}
-        />
+        <BidAcceptedNotification notification={notification} locale={locale} />
       )
     case 'bid_received':
       return (
-        <BidReceivedNotification 
-          notification={notification}
-          locale={locale}
-        />
+        <BidReceivedNotification notification={notification} locale={locale} />
       )
     default:
       return null

diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts
@@ -15,7 +15,11 @@ type RawDecentralandNotification<T extends DecentralandNotificationType, M> = {
   metadata: M
 }
 
-export type DecentralandNotificationType = 'item_sold' | 'royalties_earned' | 'bid_accepted' | 'bid_received'
+export type DecentralandNotificationType =
+  | 'item_sold'
+  | 'royalties_earned'
+  | 'bid_accepted'
+  | 'bid_received'
 
 type CommonNFTMetadata = {
   link: string
@@ -36,11 +40,11 @@ type RoyalitesEarnedMetadata = CommonNFTMetadata & {
 }
 
 type BidAcceptedMetadata = CommonNFTMetadata & {
-
+  price: string
 }
 
 type BidReceivedMetadata = CommonNFTMetadata & {
-
+  price: string
 }
 
 export type MetadataTypes = ItemSoldMetadata | RoyalitesEarnedMetadata
@@ -55,8 +59,18 @@ export type RoyalitesEarnedNotification = RawDecentralandNotification<
   RoyalitesEarnedMetadata
 >
 
-export type BidAcceptedNotification = RawDecentralandNotification<'bid_accepted', BidAcceptedMetadata>
+export type BidAcceptedNotification = RawDecentralandNotification<
+  'bid_accepted',
+  BidAcceptedMetadata
+>
 
-export type BidReceivedNotification = RawDecentralandNotification<'bid_received', BidReceivedMetadata>
+export type BidReceivedNotification = RawDecentralandNotification<
+  'bid_received',
+  BidReceivedMetadata
+>
 
-export type DCLNotification = ItemSoldNotification | RoyalitesEarnedNotification | BidAcceptedNotification | BidReceivedNotification
+export type DCLNotification =
+  | ItemSoldNotification
+  | RoyalitesEarnedNotification
+  | BidAcceptedNotification
+  | BidReceivedNotification
diff --git a/src/components/Notifications/utils.ts b/src/components/Notifications/utils.ts
@@ -0,0 +1,10 @@
+export const MAXIMUM_FRACTION_DIGITS = 2
+
+export function formatMana(
+  mana: string,
+  maximumFractionDigits = MAXIMUM_FRACTION_DIGITS
+): string {
+  return (Number(mana || '0') / 1e18)
+    .toFixed(maximumFractionDigits)
+    .toLocaleString()
+}