fix: notifications ui (#468)

* fix: add react key * fix: proper prop naming * preetify notifications * smaller dot * fix mana format * delete css file * improvements * notifications in userinfo * fixes * fix: prettier * suggestions * prettier * fix * change union for enum * prettier * fix * fix
decentraland · Dec 7, 2023 · 8384bdb · 8384bdb
1 parent cb32cb3
commit 8384bdb
Show file tree

Hide file tree

Showing 24 changed files with 595 additions and 155 deletions.
diff --git a/src/components/Icons/Notifications/BidAccepted.tsx b/src/components/Icons/Notifications/BidAccepted.tsx
@@ -17,8 +17,8 @@ const BidAccepted = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#438FFF" />
-          <stop offset="1" stop-color="#2969C7" />
+          <stop stopColor="#438FFF" />
+          <stop offset="1" stopColor="#2969C7" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/BidReceived.tsx b/src/components/Icons/Notifications/BidReceived.tsx
@@ -26,8 +26,8 @@ const BidReceived = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#A14BF3" />
-          <stop offset="1" stop-color="#6C30A6" />
+          <stop stopColor="#A14BF3" />
+          <stop offset="1" stopColor="#6C30A6" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/History.tsx b/src/components/Icons/Notifications/History.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+const History = (props: React.SVGAttributes<SVGElement>) => {
+  return (
+    <svg width="115" height="115" viewBox="0 0 115 115" fill="none" {...props}>
+      <circle cx="57.5" cy="57.5" r="57.5" fill="#322D36" />
+      <path
+        d="M50.0208 64.807H63.9792C66.1095 64.807 67.8333 63.1474 67.8333 61.0965C67.8333 59.0456 66.1095 57.386 63.9792 57.386H50.0208C47.8905 57.386 46.1667 59.0456 46.1667 61.0965C46.1667 63.1474 47.8905 64.807 50.0208 64.807Z"
+        fill="white"
+      />
+      <path
+        d="M45.8542 51.614H67.3125C69.4428 51.614 71.1667 49.9544 71.1667 47.9035C71.1667 45.8526 69.4428 44.193 67.3125 44.193H45.8542C43.7239 44.193 42 45.8526 42 47.9035C42 49.9544 43.7239 51.614 45.8542 51.614Z"
+        fill="white"
+      />
+      <path
+        d="M43.3542 38.4211H71.0625C73.1928 38.4211 74.9167 36.7614 74.9167 34.7105C74.9167 32.6596 73.1928 31 71.0625 31H43.3542C41.2239 31 39.5 32.6596 39.5 34.7105C39.5 36.7614 41.2239 38.4211 43.3542 38.4211Z"
+        fill="white"
+      />
+      <path
+        d="M86.1508 71.156L86.9734 64.6008H86.9698C87.2317 62.5486 85.7635 60.6757 83.6939 60.416C81.6243 60.1562 79.7319 61.6121 79.4736 63.6643L78.651 70.2195C78.4112 72.1034 76.788 73.5154 74.8734 73.4971H39.1266C37.212 73.5154 35.5888 72.1034 35.349 70.2195L34.5264 63.6643H34.5301C34.2682 61.6122 32.3794 60.1563 30.3061 60.416C28.2366 60.6757 26.7684 62.5485 27.0302 64.6008L27.8529 71.156C28.5612 76.7929 33.4011 81.014 39.127 81H74.9031C80.6174 81 85.4387 76.7823 86.1508 71.156Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
+
+export default History
diff --git a/src/components/Icons/Notifications/ItemAirdropped.tsx b/src/components/Icons/Notifications/ItemAirdropped.tsx
@@ -17,8 +17,8 @@ const ItemAirdropped = (props: React.SVGAttributes<SVGElement>) => {
           y2="24.6316"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#FF4BED" />
-          <stop offset="1" stop-color="#AF2BA2" />
+          <stop stopColor="#FF4BED" />
+          <stop offset="1" stopColor="#AF2BA2" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/ItemSold.tsx b/src/components/Icons/Notifications/ItemSold.tsx
@@ -17,8 +17,8 @@ const ItemSold = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#438FFF" />
-          <stop offset="1" stop-color="#2969C7" />
+          <stop stopColor="#438FFF" />
+          <stop offset="1" stopColor="#2969C7" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/LandRented.tsx b/src/components/Icons/Notifications/LandRented.tsx
@@ -32,8 +32,8 @@ const LandRented = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#34CE76" />
-          <stop offset="1" stop-color="#229754" />
+          <stop stopColor="#34CE76" />
+          <stop offset="1" stopColor="#229754" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/ManaMainnet.tsx b/src/components/Icons/Notifications/ManaMainnet.tsx
@@ -19,8 +19,8 @@ const ManaMainnet = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#34CE76" />
-          <stop offset="1" stop-color="#229754" />
+          <stop stopColor="#34CE76" />
+          <stop offset="1" stopColor="#229754" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/ManaPoly.tsx b/src/components/Icons/Notifications/ManaPoly.tsx
@@ -13,8 +13,8 @@ const ManaPoly = (props: React.SVGAttributes<SVGElement>) => {
         fill="#FCFCFC"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M12 5L12.4989 5.30292L17.5036 8.22282L18 8.52428V15.4757L17.5019 15.7782L12.4988 18.6971L12 19L11.5011 18.6971L6.49641 15.7772L6 15.4757V8.49062L6.49974 8.22087L11.5011 5.30292L12 5ZM11.5586 5.40152L6.55471 8.32092L6.11319 8.55924V15.4109L6.55471 15.679L11.5586 18.5984L12.0001 18.8665L12.4416 18.5984L17.4455 15.679L17.887 15.4109V8.58903L17.4455 8.32092L12.4416 5.40152L12.0001 5.13341L11.5586 5.40152ZM14.7056 12.0148C14.7056 10.4992 13.4905 9.26946 11.9929 9.26946C10.4954 9.26946 9.28029 10.4992 9.28029 12.0148C9.28029 13.5305 10.4954 14.7602 11.9929 14.7602C13.4905 14.7602 14.7056 13.5305 14.7056 12.0148ZM8.1711 12.0148C8.1711 9.86576 9.90008 8.14688 11.9929 8.14688C14.0875 8.14688 15.7853 9.89732 15.7853 12.0148C15.7853 14.1335 14.0864 15.853 11.9929 15.853C9.90126 15.853 8.1711 14.1651 8.1711 12.0148ZM12.0001 6.17605L6.99623 9.09545V14.9342L12.0001 17.8536L17.004 14.9342V9.09545L12.0001 6.17605ZM16.8908 9.16162L12 6.3082L7.10919 9.16162V14.8682L12 17.7216L16.8908 14.8682V9.16162ZM14.8188 12.0148C14.8188 10.4359 13.5531 9.15497 11.993 9.15497C10.433 9.15497 9.16732 10.4359 9.16732 12.0148C9.16732 13.5936 10.433 14.8746 11.993 14.8746C13.5531 14.8746 14.8188 13.5936 14.8188 12.0148ZM8.28428 12.0148C8.28428 9.9295 9.96206 8.26128 11.993 8.26128C14.024 8.26128 15.6724 9.95929 15.6724 12.0148C15.6724 14.0703 14.024 15.7385 11.993 15.7385C9.96206 15.7385 8.28428 14.1001 8.28428 12.0148Z"
         fill="#FCFCFC"
       />
@@ -27,8 +27,8 @@ const ManaPoly = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#34CE76" />
-          <stop offset="1" stop-color="#229754" />
+          <stop stopColor="#34CE76" />
+          <stop offset="1" stopColor="#229754" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Icons/Notifications/RentPeriodEnding.tsx b/src/components/Icons/Notifications/RentPeriodEnding.tsx
@@ -21,8 +21,8 @@ const RentPeriodEnding = (props: React.SVGAttributes<SVGElement>) => {
           y2="24"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#FF7439" />
-          <stop offset="1" stop-color="#BF5122" />
+          <stop stopColor="#FF7439" />
+          <stop offset="1" stopColor="#BF5122" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Notifications/NotificationItem.tsx b/src/components/Notifications/NotificationItem.tsx
@@ -7,18 +7,21 @@ import Time from '../../lib/time'
 
 import './NotificationItem.css'
 import NewNotification from '../Icons/Notifications/NewNotification'
+import { NotificationLocale } from './types'
 
 interface NotificationItemProps {
   image: NotificationItemImageProps
   timestamp: number
   isNew: boolean
+  locale: NotificationLocale
 }
 
 export default function NotificationItem({
   image,
   timestamp,
   isNew,
-  children
+  children,
+  locale
 }: React.PropsWithChildren<NotificationItemProps>) {
   return (
     <div className="dcl notification-item">
@@ -28,10 +31,10 @@ export default function NotificationItem({
       <div className="dcl notification-item__content">
         {children}
         <p className="dcl notification-item__content-timestamp">
-          {Time(timestamp).fromNow()}
+          {Time(timestamp).locale(locale).fromNow()}
         </p>
       </div>
-      {isNew && <NewNotification />}
+      {isNew && <NewNotification width="8px" height="8px" />}
     </div>
   )
 }
diff --git a/src/components/Notifications/NotificationTypes/BidAcceptedNotification.tsx b/src/components/Notifications/NotificationTypes/BidAcceptedNotification.tsx
@@ -3,8 +3,9 @@ import React from 'react'
 import { BidAcceptedNotification, NotificationLocale } from '../types'
 import NotificationItem from '../NotificationItem'
 import BidAccepted from '../../Icons/Notifications/BidAccepted'
-import { Rarity } from '@dcl/schemas'
+import { Network, Rarity } from '@dcl/schemas'
 import { formatMana } from '../utils'
+import { Mana } from '../../Mana/Mana'
 
 interface BidAcceptedNotificationProps {
   notification: BidAcceptedNotification
@@ -18,7 +19,7 @@ const i18N = {
       nftName: React.ReactNode
     ): React.ReactNode => (
       <>
-        Your bid of {mana} MANA was accepted for {nftName}
+        Your bid of {mana} was accepted for {nftName}
       </>
     ),
     title: 'Bid Accepted'
@@ -29,7 +30,7 @@ const i18N = {
       nftName: React.ReactNode
     ): React.ReactNode => (
       <>
-        Tu oferta de {mana} MANA fue aceptada para {nftName}
+        Tu oferta de {mana} fue aceptada para {nftName}
       </>
     ),
     title: 'Oferta aceptada'
@@ -40,7 +41,7 @@ const i18N = {
       nftName: React.ReactNode
     ): React.ReactNode => (
       <>
-        您的出价 {mana} MANA 已被接受 {nftName}
+        您的出价 {mana} 已被接受 {nftName}
       </>
     ),
     title: '接受投标'
@@ -60,13 +61,23 @@ const BidAcceptedNotification = ({
       }}
       timestamp={notification.timestamp}
       isNew={!notification.read}
+      locale={locale}
     >
       <p className="dcl notification-item__content-title">
         {i18N[locale].title}
       </p>
       <p className="dcl notification-item__content-description">
         {i18N[locale].description(
-          formatMana(notification.metadata.price),
+          <Mana
+            inline
+            network={
+              notification.metadata.network === 'polygon'
+                ? Network.MATIC
+                : Network.ETHEREUM
+            }
+          >
+            {formatMana(notification.metadata.price)}
+          </Mana>,
           <span>
             <a
               href={notification.metadata.link}

diff --git a/src/components/Notifications/NotificationTypes/BidReceivedNotification.tsx b/src/components/Notifications/NotificationTypes/BidReceivedNotification.tsx
@@ -3,8 +3,9 @@ import React from 'react'
 import { BidReceivedNotification, NotificationLocale } from '../types'
 import NotificationItem from '../NotificationItem'
 import BidAccepted from '../../Icons/Notifications/BidAccepted'
-import { Rarity } from '@dcl/schemas'
+import { Network, Rarity } from '@dcl/schemas'
 import { formatMana } from '../utils'
+import { Mana } from '../../Mana/Mana'
 
 interface BidReceivedNotificationProps {
   notification: BidReceivedNotification
@@ -18,7 +19,7 @@ const i18N = {
       nftName: React.ReactNode
     ): React.ReactNode => (
       <>
-        Your received a bid of {mana} MANA was accepted for {nftName}
+        Your received a bid of {mana} for {nftName}
       </>
     ),
     title: 'Bid Received'
@@ -29,7 +30,7 @@ const i18N = {
       nftName: React.ReactNode
     ): React.ReactNode => (
       <>
-        Recibiste una oferta de {mana} MANA para {nftName}
+        Recibiste una oferta de {mana} para {nftName}
       </>
     ),
     title: 'Oferta aceptada'
@@ -40,7 +41,7 @@ const i18N = {
       nftName: React.ReactNode
     ): React.ReactNode => (
       <>
-        您为 {nftName} 出价 {mana} MANA 已被接受
+        您为 {nftName} 出价 {mana} 已被接受
       </>
     ),
     title: '收到的投标'
@@ -60,13 +61,23 @@ const BidReceivedNotification = ({
       }}
       timestamp={notification.timestamp}
       isNew={!notification.read}
+      locale={locale}
     >
       <p className="dcl notification-item__content-title">
         {i18N[locale].title}
       </p>
       <p className="dcl notification-item__content-description">
         {i18N[locale].description(
-          formatMana(notification.metadata.price),
+          <Mana
+            inline
+            network={
+              notification.metadata.network === 'polygon'
+                ? Network.MATIC
+                : Network.ETHEREUM
+            }
+          >
+            {formatMana(notification.metadata.price)}
+          </Mana>,
           <span>
             <a
               href={notification.metadata.link}

diff --git a/src/components/Notifications/NotificationTypes/ItemSoldNotification.tsx b/src/components/Notifications/NotificationTypes/ItemSoldNotification.tsx
@@ -29,6 +29,7 @@ const ItemSoldNotification = ({
       }}
       timestamp={notification.timestamp}
       isNew={!notification.read}
+      locale={locale}
     >
       <p className="dcl notification-item__content-title">
         {i18N[locale].title}

diff --git a/src/components/Notifications/NotificationTypes/RoyaltiesEarnedNotification.tsx b/src/components/Notifications/NotificationTypes/RoyaltiesEarnedNotification.tsx
@@ -4,8 +4,9 @@ import { NotificationLocale, RoyalitesEarnedNotification } from '../types'
 import NotificationItem from '../NotificationItem'
 import ManaMainnet from '../../Icons/Notifications/ManaMainnet'
 import ManaPolygon from '../../Icons/Notifications/ManaPoly'
-import { Rarity } from '@dcl/schemas'
+import { Network, Rarity } from '@dcl/schemas'
 import { formatMana } from '../utils'
+import { Mana } from '../../Mana/Mana'
 
 interface RoyaltiesEarnedNotificationProps {
   notification: RoyalitesEarnedNotification
@@ -48,6 +49,7 @@ const RoyaltiesEarnedNotification = ({
       }}
       timestamp={notification.timestamp}
       isNew={!notification.read}
+      locale={locale}
     >
       <p className="dcl notification-item__content-title">
         {i18N[locale].title}
@@ -67,12 +69,30 @@ const RoyaltiesEarnedNotification = ({
             </a>
           </span>{' '}
           {i18N[locale].description_2}
-          {formatMana(notification.metadata.royaltiesCut)} MANA
+          <Mana
+            inline
+            network={
+              notification.metadata.network === 'polygon'
+                ? Network.MATIC
+                : Network.ETHEREUM
+            }
+          >
+            {formatMana(notification.metadata.royaltiesCut)}
+          </Mana>
         </p>
       ) : (
         <p className="dcl notification-item__content-description">
           {i18N[locale].description_1}
-          {formatMana(notification.metadata.royaltiesCut)} MANA{' '}
+          <Mana
+            inline
+            network={
+              notification.metadata.network === 'polygon'
+                ? Network.MATIC
+                : Network.ETHEREUM
+            }
+          >
+            {formatMana(notification.metadata.royaltiesCut)}
+          </Mana>{' '}
           {i18N[locale].description_2}
           <span>
             <a

diff --git a/src/components/Notifications/Notifications.stories.css b/src/components/Notifications/Notifications.stories.css