feat: add rent land notifications (#516)

decentraland · Mar 25, 2024 · 3c1b122 · 3c1b122
1 parent 17ecf86
commit 3c1b122
Show file tree

Hide file tree

Showing 14 changed files with 470 additions and 2 deletions.
diff --git a/src/components/IconBadge/IconBadge.css b/src/components/IconBadge/IconBadge.css
@@ -145,3 +145,8 @@
   background-image: url(../../images/sparkles.svg);
   background-size: cover;
 }
+
+.dui-icon-badge .places {
+  background-image: url(../../images/places.svg);
+  background-size: contain;
+}
diff --git a/src/components/IconBadge/IconBadge.types.ts b/src/components/IconBadge/IconBadge.types.ts
@@ -30,6 +30,7 @@ export type Props = {
     | 'sound'
     | 'props'
     | 'sparkles'
+    | 'places'
   text: string
   onClick?: () => void
   children?: React.ReactNode

diff --git a/src/components/Icons/Notifications/Reward.tsx b/src/components/Icons/Notifications/Reward.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+const Reward = (props: React.SVGAttributes<SVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="12"
+        transform="rotate(90 12 12)"
+        fill="url(#paint0_linear_602_10515)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.5 14.9345C14.3691 14.9778 14.2314 15 14.0898 15C13.4065 15 13 14 12 14C11.0938 14 10.4547 14.9979 9.72437 14.9979C9.5856 14.9979 9.45019 14.9762 9.32094 14.9345L7.99985 17.7834C7.97803 17.8753 8.01048 17.972 8.0849 18.0354C8.15988 18.0988 8.26451 18.12 8.3602 18.0909L9.45523 17.7538C9.63038 17.9091 9.96889 18.2072 10.3057 18.4941C10.3578 18.5385 10.4249 18.5623 10.4938 18.5623C10.5223 18.5623 10.5508 18.5581 10.5788 18.5502C10.6739 18.5216 10.7456 18.4471 10.7674 18.3557L12 15L12.8976 18.3557C12.9194 18.4471 12.991 18.5216 13.0861 18.5502C13.1141 18.5581 13.1427 18.5623 13.1712 18.5623C13.2395 18.5623 13.3066 18.5385 13.3592 18.4941C13.696 18.2072 14.0346 17.9091 14.2091 17.7538L15.3047 18.0909C15.3999 18.12 15.5051 18.0988 15.5795 18.0354C15.6539 17.972 15.6869 17.8753 15.6651 17.7834L14.5 14.9345Z"
+        fill="white"
+      />
+      <path
+        d="M15.9803 9.02436C15.9331 8.87194 15.8071 8.7593 15.6353 8.71473L13.7975 8.23975C13.6586 8.2038 13.4634 8.05522 13.3878 7.9282L12.3883 6.24732C12.2948 6.09011 12.1531 6 12.0001 6C11.847 6 11.7054 6.09011 11.6119 6.24732L10.6124 7.9282C10.5367 8.05522 10.3415 8.20379 10.2026 8.23975L8.3649 8.71426C8.19304 8.75883 8.06746 8.87146 8.0198 9.02388C7.9726 9.1763 8.01064 9.34501 8.12475 9.4864L9.34468 11C9.4368 11.1146 9.5115 11.3547 9.50141 11.5043L9.36529 13.4785C9.35475 13.6305 9.39646 13.7671 9.48216 13.8634C9.60361 14 9.80159 14.0374 9.99362 13.9559L11.747 13.2101C11.8708 13.1574 12.1301 13.1574 12.2539 13.2101L14.0073 13.9559C14.0756 13.9851 14.1443 14 14.2112 14C14.3313 14 14.4404 13.9516 14.5187 13.8639C14.6044 13.7675 14.6461 13.6309 14.6356 13.479L14.4995 11.5047C14.4894 11.3552 14.5636 11.1151 14.6562 11.001L15.8761 9.48735C15.9893 9.345 16.0274 9.17628 15.9802 9.02435L15.9803 9.02436Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_602_10515"
+          x1="19.8561"
+          y1="-17.0142"
+          x2="-8.95663"
+          y2="-2.93744"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FF2D55" />
+          <stop offset="1" stop-color="#FFBC5B" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default Reward
diff --git a/src/components/Notifications/NotificationItem.css b/src/components/Notifications/NotificationItem.css
@@ -24,8 +24,16 @@
 }
 
 .dcl.notification-item__content-description {
+  display: flex;
   color: #a09ba8;
   margin: 4px 0;
+  gap: 5px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.dcl.notification-item__content-description .ui.header.mana.inline {
+  margin-bottom: 0;
 }
 
 .dcl.notification-item__content-description a {

diff --git a/src/components/Notifications/NotificationTypes/Land/LandRentalEndedNotification.tsx b/src/components/Notifications/NotificationTypes/Land/LandRentalEndedNotification.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+
+import {
+  CommonNotificationProps,
+  LandRentalEndedNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import RentPeriodEnding from '../../../Icons/Notifications/RentPeriodEnding'
+import { IconBadge } from '../../../IconBadge'
+
+const i18N = {
+  en: {
+    description: (coords: string): React.ReactNode => (
+      <>
+        The rent on your LAND at <IconBadge icon="places" text={coords} /> has
+        ended
+      </>
+    ),
+    title: 'Rent Period Ended'
+  },
+  es: {
+    description: (coords: string): React.ReactNode => (
+      <>
+        El alquiler de su LAND en <IconBadge icon="places" text={coords} /> ha
+        terminado
+      </>
+    ),
+    title: 'Período de alquiler finalizado'
+  },
+  zh: {
+    description: (coords: string): React.ReactNode => (
+      <>
+        土地上的租金 <IconBadge icon="places" text={coords} /> 结束了
+      </>
+    ),
+    title: '租金期结束'
+  }
+}
+
+export default function LandRentalEndedNotificationCmp({
+  notification,
+  locale
+}: CommonNotificationProps<LandRentalEndedNotification>) {
+  return (
+    <NotificationItem
+      image={{ image: <RentPeriodEnding width="48" height="48" /> }}
+      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(notification.metadata.land)}
+      </p>
+    </NotificationItem>
+  )
+}
diff --git a/src/components/Notifications/NotificationTypes/Land/LandRentedNotification.tsx b/src/components/Notifications/NotificationTypes/Land/LandRentedNotification.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { CommonNotificationProps, LandRentedNotification } from '../../types'
+import NotificationItem from '../../NotificationItem'
+import LandRentedIcon from '../../../Icons/Notifications/LandRented'
+import { IconBadge } from '../../../IconBadge'
+
+const i18N = {
+  en: {
+    description: (
+      coords: string,
+      tenant: JSX.Element | string
+    ): React.ReactNode => (
+      <>
+        Your LAND at
+        <IconBadge icon="places" text={coords} />
+        was rented by {tenant}
+      </>
+    ),
+    title: 'LAND Rented'
+  },
+  es: {
+    description: (
+      coords: string,
+      tenant: JSX.Element | string
+    ): React.ReactNode => (
+      <>
+        Tu LAND en
+        <IconBadge icon="places" text={coords} />
+        fue alquilada por {tenant}
+      </>
+    ),
+    title: 'LAND alquilada'
+  },
+  zh: {
+    description: (
+      coords: string,
+      tenant: JSX.Element | string
+    ): React.ReactNode => (
+      <>
+        你的土地
+        <IconBadge icon="places" text={coords} />
+        租了 {tenant}
+      </>
+    ),
+    title: '租用的土地'
+  }
+}
+
+export default function LandRentedNotificationCmp({
+  notification,
+  locale,
+  renderProfile
+}: CommonNotificationProps<LandRentedNotification>) {
+  return (
+    <NotificationItem
+      image={{ image: <LandRentedIcon width="48" height="48" /> }}
+      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(
+          notification.metadata.land,
+          renderProfile
+            ? renderProfile(notification.metadata.tenant)
+            : notification.metadata.tenant
+        )}
+      </p>
+    </NotificationItem>
+  )
+}
diff --git a/src/components/Notifications/NotificationTypes/Reward/RewardAssignedNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/RewardAssignedNotification.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+
+import Reward from '../../../Icons/Notifications/Reward'
+import {
+  CommonNotificationProps,
+  RewardAssignedNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import { getBGColorByRarity } from '../../utils'
+import NotificationItemNFTLink from '../../NotificationItemNFTLink'
+import { config } from '../../../../config'
+
+const i18N = {
+  en: {
+    description: (
+      reward: RewardAssignedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        This
+        <NotificationItemNFTLink
+          rarity={reward.tokenRarity}
+          name={reward.tokenName}
+          link={config.get('EXPLORER_URL')}
+        />
+        is already in your backpack
+      </>
+    ),
+    title: 'New Item Received'
+  },
+  es: {
+    description: (
+      reward: RewardAssignedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        El item
+        <NotificationItemNFTLink
+          rarity={reward.tokenRarity}
+          name={reward.tokenName}
+          link={config.get('EXPLORER_URL')}
+        />
+        ya esta disponible en tu backpack
+      </>
+    ),
+    title: 'Nuevo artículo recibido'
+  },
+  zh: {
+    description: (
+      reward: RewardAssignedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        这
+        <NotificationItemNFTLink
+          rarity={reward.tokenRarity}
+          name={reward.tokenName}
+          link={config.get('EXPLORER_URL')}
+        />
+        已经在您的背包里
+      </>
+    ),
+    title: '收到的新项目'
+  }
+}
+
+export default function RewardAssignedNotification({
+  notification,
+  locale
+}: CommonNotificationProps<RewardAssignedNotification>) {
+  return (
+    <NotificationItem
+      image={{
+        image: notification.metadata.tokenImage,
+        backgroundColor: getBGColorByRarity(notification.metadata.tokenRarity),
+        icon: <Reward />
+      }}
+      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(notification.metadata)}
+      </p>
+    </NotificationItem>
+  )
+}
diff --git a/src/components/Notifications/NotificationTypes/index.ts b/src/components/Notifications/NotificationTypes/index.ts
@@ -11,6 +11,9 @@ import GovernanceCoauthorRequestedNotification from './Governance/GovernanceCoau
 import GovernanceNewCommentOnProposalNotification from './Governance/GovernanceNewCommentOnProposalNotification'
 import GovernanceProposalEnactedNotification from './Governance/GovernanceProposalEnactedNotification'
 import GovernanceVotingEndedVoterNotification from './Governance/GovernanceVotingEndedVoterNotification'
+import LandRentedNotification from './Land/LandRentedNotification'
+import LandRentalEndedNotification from './Land/LandRentalEndedNotification'
+import RewardAssignedNotification from './Reward/RewardAssignedNotification'
 import EventsStartsSoonNotification from './Events/EventStartsSoonNotification'
 import EventsStartedNotification from './Events/EventStartedNotification'
 
@@ -28,6 +31,9 @@ export {
   GovernanceNewCommentOnProposalNotification,
   GovernanceProposalEnactedNotification,
   GovernanceVotingEndedVoterNotification,
+  LandRentalEndedNotification,
+  LandRentedNotification,
+  RewardAssignedNotification,
   EventsStartsSoonNotification,
   EventsStartedNotification
 }