From 08b0020442f365eb9aca2d718435b5a60d05a84a Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Tue, 13 Aug 2024 15:28:26 -0300 Subject: [PATCH] feat: add new governance notifications (#556) * feat: add new governance notifications * fix: typescript error --- package-lock.json | 14 +-- package.json | 2 +- .../Icons/Notifications/VotedOnBehalf.tsx | 48 ++++++++++ .../Icons/Notifications/WhaleVote.tsx | 61 +++++++++++++ .../GovernanceVotedOnBehalfNotification.tsx | 89 ++++++++++++++++++ .../GovernanceWhaleVoteNotification.tsx | 91 +++++++++++++++++++ .../Notifications/NotificationTypes/index.ts | 4 + .../Notifications/Notifications.stories.tsx | 42 ++++++++- src/components/Notifications/types.ts | 12 +++ src/components/Notifications/utils.tsx | 9 +- 10 files changed, 362 insertions(+), 10 deletions(-) create mode 100644 src/components/Icons/Notifications/VotedOnBehalf.tsx create mode 100644 src/components/Icons/Notifications/WhaleVote.tsx create mode 100644 src/components/Notifications/NotificationTypes/Governance/GovernanceVotedOnBehalfNotification.tsx create mode 100644 src/components/Notifications/NotificationTypes/Governance/GovernanceWhaleVoteNotification.tsx diff --git a/package-lock.json b/package-lock.json index 32c87c03..b7d1b31f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0-development", "license": "MIT", "dependencies": { - "@dcl/schemas": "^11.9.0", + "@dcl/schemas": "^13.5.0", "@dcl/ui-env": "^1.5.1", "balloon-css": "^0.5.0", "classnames": "^2.3.2", @@ -2076,9 +2076,9 @@ } }, "node_modules/@dcl/schemas": { - "version": "11.9.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-11.9.0.tgz", - "integrity": "sha512-IIKsy45VhiB9rD6v1d3UedyApBE8EmtAiIWevXIvam1w9Nsh+w8lWAWtD/HX3fXivBwLDZGrn1IRUK4dI4WlHA==", + "version": "13.5.0", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.5.0.tgz", + "integrity": "sha512-uoZiRdi2hlkBauHvq9u4n7UqAiJ3sKoqiJxM5/y+JlmUBshSK6VtX11DBSv4tR1O2XBg6mFJhcx54t07mmag/g==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -49159,9 +49159,9 @@ } }, "@dcl/schemas": { - "version": "11.9.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-11.9.0.tgz", - "integrity": "sha512-IIKsy45VhiB9rD6v1d3UedyApBE8EmtAiIWevXIvam1w9Nsh+w8lWAWtD/HX3fXivBwLDZGrn1IRUK4dI4WlHA==", + "version": "13.5.0", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.5.0.tgz", + "integrity": "sha512-uoZiRdi2hlkBauHvq9u4n7UqAiJ3sKoqiJxM5/y+JlmUBshSK6VtX11DBSv4tR1O2XBg6mFJhcx54t07mmag/g==", "requires": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", diff --git a/package.json b/package.json index 3b61fba8..218a3217 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "webpack-cli": "^3.3.2" }, "dependencies": { - "@dcl/schemas": "^11.9.0", + "@dcl/schemas": "^13.5.0", "@dcl/ui-env": "^1.5.1", "balloon-css": "^0.5.0", "classnames": "^2.3.2", diff --git a/src/components/Icons/Notifications/VotedOnBehalf.tsx b/src/components/Icons/Notifications/VotedOnBehalf.tsx new file mode 100644 index 00000000..7ec625d1 --- /dev/null +++ b/src/components/Icons/Notifications/VotedOnBehalf.tsx @@ -0,0 +1,48 @@ +import React from 'react' + +function VotedOnBehalf() { + return ( + + + + + + + + + + + + + + + + ) +} + +export default VotedOnBehalf diff --git a/src/components/Icons/Notifications/WhaleVote.tsx b/src/components/Icons/Notifications/WhaleVote.tsx new file mode 100644 index 00000000..ba21c5bc --- /dev/null +++ b/src/components/Icons/Notifications/WhaleVote.tsx @@ -0,0 +1,61 @@ +import React from 'react' + +function WhaleVote() { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} + +export default WhaleVote diff --git a/src/components/Notifications/NotificationTypes/Governance/GovernanceVotedOnBehalfNotification.tsx b/src/components/Notifications/NotificationTypes/Governance/GovernanceVotedOnBehalfNotification.tsx new file mode 100644 index 00000000..c70821cd --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Governance/GovernanceVotedOnBehalfNotification.tsx @@ -0,0 +1,89 @@ +import React from 'react' +import { + CommonNotificationProps, + GovernanceVotedOnBehalfNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import VotedOnBehalf from '../../../Icons/Notifications/VotedOnBehalf' + +const i18N = { + en: { + description: (link: string): React.ReactNode => ( + <> + + See if their vote is aligned + + with your vision. You can always override their decision by voting on + your own. + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + Your delegate voted on the proposal " + + {proposalTitle} + + " + + ) + }, + es: { + description: (link: string): React.ReactNode => ( + <> + + Verifica si su voto está alineado + + con tu visión. Siempre puedes anular su decisión votando por tu cuenta. + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + Tu delegado votó en la propuesta " + + {proposalTitle} + + " + + ) + }, + zh: { + description: (link: string): React.ReactNode => ( + <> + + 查看他们的投票是否符合您的愿景。 + + 您始终可以通过自己投票来推翻他们的决定。 + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + 您的委托人在提案" + + {proposalTitle} + + "上投了票 + + ) + } +} + +const GovernanceVotedOnBehalfNotification = ({ + notification, + locale +}: CommonNotificationProps) => ( + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title(notification.metadata.proposalTitle)} +

+

+ {i18N[locale].description(notification.metadata.link)} +

+ +) + +export default GovernanceVotedOnBehalfNotification diff --git a/src/components/Notifications/NotificationTypes/Governance/GovernanceWhaleVoteNotification.tsx b/src/components/Notifications/NotificationTypes/Governance/GovernanceWhaleVoteNotification.tsx new file mode 100644 index 00000000..97ef26ca --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Governance/GovernanceWhaleVoteNotification.tsx @@ -0,0 +1,91 @@ +import React from 'react' +import { + CommonNotificationProps, + GovernanceWhaleVoteNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import WhaleVote from '../../../Icons/Notifications/WhaleVote' + +const i18N = { + en: { + description: (link: string): React.ReactNode => ( + <> + A wallet holding over 250k VP has just{' '} + + cast a vote + + . Stay informed and see how this significant vote impacts the outcome. + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + A whale voted on your proposal " + + {proposalTitle} + + " + + ) + }, + es: { + description: (link: string): React.ReactNode => ( + <> + Una billetera con más de 250k VP acaba de{' '} + + emitir un voto + + . Mantente informado y revisa cómo este voto significativo impacta el + resultado. + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + Una ballena votó en tu propuesta " + + {proposalTitle} + + " + + ) + }, + zh: { + description: (link: string): React.ReactNode => ( + <> + + 一个持有超过25万VP的钱包刚刚投票。 + + 保持关注，看看这一重要投票如何影响最终结果。 + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + 一位鲸鱼对您的提案“ + + {proposalTitle} + + ”进行了投票 + + ) + } +} + +const GovernanceWhaleVoteNotification = ({ + notification, + locale +}: CommonNotificationProps) => ( + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title(notification.metadata.proposalTitle)} +

+

+ {i18N[locale].description(notification.metadata.link)} +

+ +) + +export default GovernanceWhaleVoteNotification diff --git a/src/components/Notifications/NotificationTypes/index.ts b/src/components/Notifications/NotificationTypes/index.ts index 73140c50..8627524b 100644 --- a/src/components/Notifications/NotificationTypes/index.ts +++ b/src/components/Notifications/NotificationTypes/index.ts @@ -16,6 +16,8 @@ import GovernanceProposalEnactedNotification from './Governance/GovernancePropos import GovernanceVotingEndedVoterNotification from './Governance/GovernanceVotingEndedVoterNotification' import GovernanceTenderPassedNotification from './Governance/GovernanceTenderPassedNotification' import GovernancePitchPassedNotification from './Governance/GovernancePitchPassedNotification' +import GovernanceVotedOnBehalfNotification from './Governance/GovernanceVotedOnBehalfNotification' +import GovernanceWhaleVoteNotification from './Governance/GovernanceWhaleVoteNotification' import LandRentedNotification from './Land/LandRentedNotification' import LandRentalEndedNotification from './Land/LandRentalEndedNotification' import RewardAssignedNotification from './Reward/RewardAssignedNotification' @@ -39,6 +41,8 @@ export { GovernanceVotingEndedVoterNotification, GovernancePitchPassedNotification, GovernanceTenderPassedNotification, + GovernanceVotedOnBehalfNotification, + GovernanceWhaleVoteNotification, LandRentalEndedNotification, LandRentedNotification, RewardAssignedNotification, diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx index 3462a3c3..922c1b67 100644 --- a/src/components/Notifications/Notifications.stories.tsx +++ b/src/components/Notifications/Notifications.stories.tsx @@ -22,7 +22,9 @@ import { GovernancePitchPassedNotification, GovernanceTenderPassedNotification, WorldsPermissionGrantedNotification, - WorldsPermissionRevokedNotification + WorldsPermissionRevokedNotification, + GovernanceWhaleVoteNotification, + GovernanceVotedOnBehalfNotification } from './NotificationTypes' import { shorten } from '../AddressField/utils' @@ -541,6 +543,44 @@ storiesOf('Notifications Toggle', module) updated_at: '2023-11-29T12:51:00.600Z' }} /> + + ) }) diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts index f46a34c5..4f940a70 100644 --- a/src/components/Notifications/types.ts +++ b/src/components/Notifications/types.ts @@ -126,6 +126,16 @@ export type GovernanceTenderPassedNotification = RawDecentralandNotification< CommonGovernanceNotificationMetadata > +export type GovernanceVotedOnBehalfNotification = RawDecentralandNotification< + NotificationType.GOVERNANCE_VOTED_ON_BEHALF, + CommonGovernanceNotificationMetadata +> + +export type GovernanceWhaleVoteNotification = RawDecentralandNotification< + NotificationType.GOVERNANCE_WHALE_VOTE, + CommonGovernanceNotificationMetadata +> + type GovernanceNotifications = | GovernanceAnnouncementNotification | GovernanceProposalEnactedNotification @@ -136,6 +146,8 @@ type GovernanceNotifications = | GovernanceNewCommentOnProjectUpdateNotification | GovernancePitchPassedNotification | GovernanceTenderPassedNotification + | GovernanceVotedOnBehalfNotification + | GovernanceWhaleVoteNotification // Worlds Notifications diff --git a/src/components/Notifications/utils.tsx b/src/components/Notifications/utils.tsx index a113f546..cb752e6c 100644 --- a/src/components/Notifications/utils.tsx +++ b/src/components/Notifications/utils.tsx @@ -25,7 +25,9 @@ import { EventsStartsSoonNotification, RewardAssignedNotification, WorldsPermissionGrantedNotification, - WorldsPermissionRevokedNotification + WorldsPermissionRevokedNotification, + GovernanceWhaleVoteNotification, + GovernanceVotedOnBehalfNotification } from './NotificationTypes' import { FunctionComponent } from 'react' @@ -73,6 +75,9 @@ export const NotificationComponentByType: DecentralandNotificationComponentByTyp GovernancePitchPassedNotification, [NotificationType.GOVERNANCE_TENDER_PASSED]: GovernanceTenderPassedNotification, + [NotificationType.GOVERNANCE_WHALE_VOTE]: GovernanceWhaleVoteNotification, + [NotificationType.GOVERNANCE_VOTED_ON_BEHALF]: + GovernanceVotedOnBehalfNotification, [NotificationType.WORLDS_MISSING_RESOURCES]: WorldsMissingResourcesNotification, [NotificationType.WORLDS_ACCESS_RESTORED]: WorldsAccessRestoredNotification, @@ -81,6 +86,8 @@ export const NotificationComponentByType: DecentralandNotificationComponentByTyp [NotificationType.LAND_RENTED]: LandRentedNotification, [NotificationType.LAND_RENTAL_ENDED]: LandRentalEndedNotification, [NotificationType.REWARD_ASSIGNED]: RewardAssignedNotification, + [NotificationType.REWARD_IN_PROGRESS]: null, + [NotificationType.BADGE_GRANTED]: null, [NotificationType.EVENTS_STARTS_SOON]: EventsStartsSoonNotification, [NotificationType.EVENTS_STARTED]: EventsStartedNotification, [NotificationType.WORLDS_PERMISSION_GRANTED]: