feat: add governance cliff ended notifications (#557)

decentraland · Aug 26, 2024 · 8151090 · 8151090
1 parent 08b0020
commit 8151090
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "webpack-cli": "^3.3.2"
   },
   "dependencies": {
-    "@dcl/schemas": "^13.5.0",
+    "@dcl/schemas": "^13.6.2",
     "@dcl/ui-env": "^1.5.1",
     "balloon-css": "^0.5.0",
     "classnames": "^2.3.2",

diff --git a/src/components/Icons/Notifications/CliffEnded.tsx b/src/components/Icons/Notifications/CliffEnded.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+function CliffEnded() {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="24" cy="24" r="24" fill="url(#paint0_linear_17223_2)" />
+      <g clipPath="url(#clip0_17223_2)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M30 15.75C28.1583 15.75 26.6667 17.2883 26.6667 19.1875V21.25H28C29.4708 21.25 30.6667 22.4832 30.6667 24V32.25C30.6667 33.7668 29.4708 35 28 35H14.6667C13.1958 35 12 33.7668 12 32.25V24C12 22.4832 13.1958 21.25 14.6667 21.25H24V19.1875C24 15.7715 26.6875 13 30 13C33.3125 13 36 15.7715 36 19.1875V21.25C36 22.0105 35.4042 22.625 34.6667 22.625C33.9292 22.625 33.3333 22.0105 33.3333 21.25V19.1875C33.3333 17.2883 31.8417 15.75 30 15.75ZM21.6697 24.75V25.0781C21.8474 25.1156 22.0196 25.1625 22.1751 25.2094C22.5306 25.3156 22.7416 25.7281 22.6472 26.1281C22.5528 26.5281 22.1862 26.7656 21.8308 26.6594C21.5281 26.5688 21.2449 26.5063 20.9922 26.5031C20.7895 26.5 20.584 26.5562 20.4535 26.6406C20.3951 26.6812 20.3674 26.7156 20.3563 26.7344C20.3479 26.75 20.3368 26.7719 20.3368 26.8219V26.8406C20.3375 26.8414 20.3385 26.8426 20.3397 26.8442C20.3481 26.8551 20.3704 26.8837 20.4285 26.9219C20.5895 27.0312 20.8283 27.1156 21.1893 27.2375L21.2143 27.2469C21.5226 27.35 21.9335 27.4906 22.2668 27.725C22.6472 27.9937 22.9915 28.4406 22.9998 29.1281C23.0082 29.8312 22.6833 30.3438 22.2584 30.6437C22.0724 30.7719 21.8724 30.8625 21.6669 30.9188V31.25C21.6669 31.6656 21.3698 32 21.0005 32C20.6312 32 20.3341 31.6656 20.3341 31.25V30.8937C20.0857 30.8261 19.857 30.739 19.6595 30.6638C19.6473 30.6592 19.6352 30.6546 19.6232 30.65C19.6034 30.6426 19.584 30.6352 19.5649 30.6279C19.5276 30.6137 19.4915 30.5999 19.4566 30.5875C19.1067 30.4562 18.9178 30.0312 19.0345 29.6375C19.1511 29.2437 19.5288 29.0312 19.8786 29.1625C19.9136 29.1761 19.9472 29.189 19.9799 29.2015C20.0147 29.2148 20.0484 29.2277 20.0814 29.2406C20.459 29.3844 20.7311 29.4875 21.0227 29.5C21.2449 29.5094 21.442 29.45 21.5559 29.3719C21.6086 29.3344 21.6336 29.3031 21.6447 29.2812C21.6558 29.2625 21.6697 29.225 21.6669 29.1531V29.1469C21.6669 29.1156 21.6669 29.0812 21.5559 29.0031C21.3976 28.8906 21.1588 28.8031 20.8033 28.6812L20.7506 28.6625C20.4507 28.5625 20.0564 28.4281 19.7398 28.2125C19.3649 27.9594 19.0039 27.525 19.0012 26.8344C18.9984 26.1187 19.3594 25.6281 19.7703 25.3531C19.9481 25.2344 20.1397 25.1531 20.3313 25.0969L20.3368 24.75C20.3368 24.3344 20.634 24 21.0033 24C21.3726 24 21.6697 24.3344 21.6697 24.75Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_17223_2"
+          x1="0"
+          y1="0"
+          x2="48"
+          y2="48"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D80027" />
+          <stop offset="1" stopColor="#720015" />
+        </linearGradient>
+        <clipPath id="clip0_17223_2">
+          <rect
+            width="24"
+            height="22"
+            fill="white"
+            transform="translate(12 13)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default CliffEnded
diff --git a/...omponents/Notifications/NotificationTypes/Governance/GovernanceCliffEndedNotification.tsx b/...omponents/Notifications/NotificationTypes/Governance/GovernanceCliffEndedNotification.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import {
+  CommonNotificationProps,
+  GovernanceCliffEndedNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import CliffEnded from '../../../Icons/Notifications/CliffEnded'
+
+const i18N = {
+  en: {
+    description: (link: string): React.ReactNode => (
+      <>
+        The cliff period to vest funds has ended. Check the{' '}
+        <a href={link} className="dcl notification-link">
+          contract status
+        </a>{' '}
+        now!
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        Funds are ready to vest for your project "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        "
+      </>
+    )
+  },
+  es: {
+    description: (link: string): React.ReactNode => (
+      <>
+        El período de espera para la adjudicación de fondos ha finalizado.
+        ¡Revisa el{' '}
+        <a href={link} className="dcl notification-link">
+          estado del contrato
+        </a>{' '}
+        ahora!
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        Los fondos están listos para ser utilizados en tu proyecto "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        "
+      </>
+    )
+  },
+  zh: {
+    description: (link: string): React.ReactNode => (
+      <>
+        资金释放的等待期已结束。
+        <a href={link} className="dcl notification-link">
+          现在查看合同状态！
+        </a>
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        您的项目“
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        ”的资金已准备好释放
+      </>
+    )
+  }
+}
+
+const GovernanceCliffEndedNotification = ({
+  notification,
+  locale
+}: CommonNotificationProps<GovernanceCliffEndedNotification>) => (
+  <NotificationItem
+    image={{ image: <CliffEnded /> }}
+    timestamp={notification.timestamp}
+    isNew={!notification.read}
+    locale={locale}
+  >
+    <p className="dcl notification-item__content-title">
+      {i18N[locale].title(notification.metadata.proposalTitle)}
+    </p>
+    <p className="dcl notification-item__content-description">
+      {i18N[locale].description(notification.metadata.link)}
+    </p>
+  </NotificationItem>
+)
+
+export default GovernanceCliffEndedNotification
diff --git a/src/components/Notifications/NotificationTypes/index.ts b/src/components/Notifications/NotificationTypes/index.ts
@@ -18,6 +18,7 @@ import GovernanceTenderPassedNotification from './Governance/GovernanceTenderPas
 import GovernancePitchPassedNotification from './Governance/GovernancePitchPassedNotification'
 import GovernanceVotedOnBehalfNotification from './Governance/GovernanceVotedOnBehalfNotification'
 import GovernanceWhaleVoteNotification from './Governance/GovernanceWhaleVoteNotification'
+import GovernanceCliffEndedNotification from './Governance/GovernanceCliffEndedNotification'
 import LandRentedNotification from './Land/LandRentedNotification'
 import LandRentalEndedNotification from './Land/LandRentalEndedNotification'
 import RewardAssignedNotification from './Reward/RewardAssignedNotification'
@@ -43,6 +44,7 @@ export {
   GovernanceTenderPassedNotification,
   GovernanceVotedOnBehalfNotification,
   GovernanceWhaleVoteNotification,
+  GovernanceCliffEndedNotification,
   LandRentalEndedNotification,
   LandRentedNotification,
   RewardAssignedNotification,

diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx
@@ -9,6 +9,7 @@ import { getBGColorByRarity } from './utils'
 import GovernanceAnnouncementNotification from './NotificationTypes/Governance/GovernanceAnnouncementNotification'
 import GovernanceAuthoredProposalFinishedNotification from './NotificationTypes/Governance/GovernanceAuthoredProposalFinishedNotification'
 import GovernanceCoauthorRequestedNotification from './NotificationTypes/Governance/GovernanceCoauthorRequestedNotification'
+import GovernanceCliffEndedNotification from './NotificationTypes/Governance/GovernanceCliffEndedNotification'
 import GovernanceNewCommentOnProposalNotification from './NotificationTypes/Governance/GovernanceNewCommentOnProposalNotification'
 import GovernanceNewCommentOnProjectUpdateNotification from './NotificationTypes/Governance/GovernanceNewCommentOnProjectUpdateNotification'
 import GovernanceVotingEndedVoterNotification from './NotificationTypes/Governance/GovernanceVotingEndedVoterNotification'
@@ -581,6 +582,25 @@ storiesOf('Notifications Toggle', module)
             updated_at: '2023-11-29T12:51:00.600Z'
           }}
         />
+        <GovernanceCliffEndedNotification
+          locale="en"
+          notification={{
+            id: 'AA',
+            read: true,
+            type: NotificationType.GOVERNANCE_CLIFF_ENDED,
+            address: '0xA',
+            timestamp: new Date().getTime(),
+            metadata: {
+              link: 'https://decentraland.org/vesting/#/0xa85f9e1369031d52d14d13d346cb9bdc6ae7baec',
+              title: 'Test Governance Announcement',
+              description: 'Test description',
+              proposalId: 'AAA_PROPOSAL_111',
+              proposalTitle: 'Open Source all code using DAO funds'
+            },
+            created_at: '2023-11-29T12:51:00.600Z',
+            updated_at: '2023-11-29T12:51:00.600Z'
+          }}
+        />
       </div>
     )
   })

diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts
@@ -136,10 +136,16 @@ export type GovernanceWhaleVoteNotification = RawDecentralandNotification<
   CommonGovernanceNotificationMetadata
 >
 
+export type GovernanceCliffEndedNotification = RawDecentralandNotification<
+  NotificationType.GOVERNANCE_CLIFF_ENDED,
+  CommonGovernanceNotificationMetadata
+>
+
 type GovernanceNotifications =
   | GovernanceAnnouncementNotification
   | GovernanceProposalEnactedNotification
   | GovernanceCoauthorRequestedNotification
+  | GovernanceCliffEndedNotification
   | GovernanceAuthoredProposalFinishedNotification
   | GovernanceVotingEndedVoterNotification
   | GovernanceNewCommentOnProposalNotification

diff --git a/src/components/Notifications/utils.tsx b/src/components/Notifications/utils.tsx
@@ -8,6 +8,7 @@ import {
   GovernanceAnnouncementNotification,
   GovernanceAuthoredProposalFinishedNotification,
   GovernanceCoauthorRequestedNotification,
+  GovernanceCliffEndedNotification,
   GovernanceNewCommentOnProposalNotification,
   GovernanceNewCommentOnProjectUpdateNotification,
   GovernanceProposalEnactedNotification,
@@ -76,6 +77,7 @@ export const NotificationComponentByType: DecentralandNotificationComponentByTyp
     [NotificationType.GOVERNANCE_TENDER_PASSED]:
       GovernanceTenderPassedNotification,
     [NotificationType.GOVERNANCE_WHALE_VOTE]: GovernanceWhaleVoteNotification,
+    [NotificationType.GOVERNANCE_CLIFF_ENDED]: GovernanceCliffEndedNotification,
     [NotificationType.GOVERNANCE_VOTED_ON_BEHALF]:
       GovernanceVotedOnBehalfNotification,
     [NotificationType.WORLDS_MISSING_RESOURCES]: