From 8151090233216346923d3cbf41370616cb1cefa2 Mon Sep 17 00:00:00 2001 From: lemu Date: Mon, 26 Aug 2024 11:12:42 -0300 Subject: [PATCH 1/2] feat: add governance cliff ended notifications (#557) --- package-lock.json | 14 +-- package.json | 2 +- .../Icons/Notifications/CliffEnded.tsx | 46 ++++++++++ .../GovernanceCliffEndedNotification.tsx | 91 +++++++++++++++++++ .../Notifications/NotificationTypes/index.ts | 2 + .../Notifications/Notifications.stories.tsx | 20 ++++ src/components/Notifications/types.ts | 6 ++ src/components/Notifications/utils.tsx | 2 + 8 files changed, 175 insertions(+), 8 deletions(-) create mode 100644 src/components/Icons/Notifications/CliffEnded.tsx create mode 100644 src/components/Notifications/NotificationTypes/Governance/GovernanceCliffEndedNotification.tsx diff --git a/package-lock.json b/package-lock.json index b7d1b31f..adf3d124 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0-development", "license": "MIT", "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", @@ -2076,9 +2076,9 @@ } }, "node_modules/@dcl/schemas": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.5.0.tgz", - "integrity": "sha512-uoZiRdi2hlkBauHvq9u4n7UqAiJ3sKoqiJxM5/y+JlmUBshSK6VtX11DBSv4tR1O2XBg6mFJhcx54t07mmag/g==", + "version": "13.6.2", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.6.2.tgz", + "integrity": "sha512-sps6khw7pn8hY/TRr8aH4gV+t5xVi7A32PZ4EVVJzjDAhTXAxa74wAI9cA/y/gR6rYKWu96LtHoEBf7wde8/lQ==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -49159,9 +49159,9 @@ } }, "@dcl/schemas": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.5.0.tgz", - "integrity": "sha512-uoZiRdi2hlkBauHvq9u4n7UqAiJ3sKoqiJxM5/y+JlmUBshSK6VtX11DBSv4tR1O2XBg6mFJhcx54t07mmag/g==", + "version": "13.6.2", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.6.2.tgz", + "integrity": "sha512-sps6khw7pn8hY/TRr8aH4gV+t5xVi7A32PZ4EVVJzjDAhTXAxa74wAI9cA/y/gR6rYKWu96LtHoEBf7wde8/lQ==", "requires": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", diff --git a/package.json b/package.json index 218a3217..e7f7eab7 100644 --- 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 new file mode 100644 index 00000000..c6874ef2 --- /dev/null +++ b/src/components/Icons/Notifications/CliffEnded.tsx @@ -0,0 +1,46 @@ +import React from 'react' + +function CliffEnded() { + return ( + + + + + + + + + + + + + + + + ) +} + +export default CliffEnded diff --git a/src/components/Notifications/NotificationTypes/Governance/GovernanceCliffEndedNotification.tsx b/src/components/Notifications/NotificationTypes/Governance/GovernanceCliffEndedNotification.tsx new file mode 100644 index 00000000..af6073d1 --- /dev/null +++ b/src/components/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{' '} + + contract status + {' '} + now! + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + Funds are ready to vest for your project " + + {proposalTitle} + + " + + ) + }, + es: { + description: (link: string): React.ReactNode => ( + <> + El período de espera para la adjudicación de fondos ha finalizado. + ¡Revisa el{' '} + + estado del contrato + {' '} + ahora! + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + Los fondos están listos para ser utilizados en tu proyecto " + + {proposalTitle} + + " + + ) + }, + zh: { + description: (link: string): React.ReactNode => ( + <> + 资金释放的等待期已结束。 + + 现在查看合同状态！ + + + ), + title: (proposalTitle: string): React.ReactNode => ( + <> + 您的项目“ + + {proposalTitle} + + ”的资金已准备好释放 + + ) + } +} + +const GovernanceCliffEndedNotification = ({ + 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 GovernanceCliffEndedNotification diff --git a/src/components/Notifications/NotificationTypes/index.ts b/src/components/Notifications/NotificationTypes/index.ts index 8627524b..2f524e01 100644 --- 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 index 922c1b67..9c1246ed 100644 --- 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' }} /> + ) }) diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts index 4f940a70..94524119 100644 --- 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 index cb752e6c..d18ccd08 100644 --- 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]: From bd8697c5654f9ae1159ba9fe429161d1786bc118 Mon Sep 17 00:00:00 2001 From: Kevin Szuchet <31735779+kevinszuchet@users.noreply.github.com> Date: Wed, 4 Sep 2024 17:06:35 +0100 Subject: [PATCH 2/2] feat: New rewards notifications (#558) * feat: Add new notifications related to Rewards * feat: Use a bigger version of the reward icon as the campaign notifications image * chore: Remove unused type --- package-lock.json | 36 +++---- ...GasPriceHigherThanExpectedNotification.tsx | 69 +++++++++++++ .../NotificationTypes/Reward/CampaignName.tsx | 17 ++++ .../Reward/CampaignOutOfFundsNotification.tsx | 66 +++++++++++++ .../Reward/CampaignOutOfStockNotification.tsx | 65 +++++++++++++ .../Reward/RewardDelayedNotification.tsx | 84 ++++++++++++++++ .../Reward/RewardInProgressNotification.tsx | 87 +++++++++++++++++ .../Notifications/Notifications.stories.tsx | 96 +++++++++++++++++++ src/components/Notifications/types.ts | 46 +++++++-- src/components/Notifications/utils.tsx | 14 ++- 10 files changed, 555 insertions(+), 25 deletions(-) create mode 100644 src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx create mode 100644 src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx create mode 100644 src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx create mode 100644 src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx create mode 100644 src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx create mode 100644 src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx diff --git a/package-lock.json b/package-lock.json index adf3d124..795ea427 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2076,9 +2076,9 @@ } }, "node_modules/@dcl/schemas": { - "version": "13.6.2", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.6.2.tgz", - "integrity": "sha512-sps6khw7pn8hY/TRr8aH4gV+t5xVi7A32PZ4EVVJzjDAhTXAxa74wAI9cA/y/gR6rYKWu96LtHoEBf7wde8/lQ==", + "version": "13.8.5", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.8.5.tgz", + "integrity": "sha512-SO0pHJi3xfjwMMbVVLsXm/qrt1L7VCO09MA+eefsGPmfbboiUIBM2mxJFBMxrCn/F/+SSxI3uLHo8xytCjFdkg==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -34322,7 +34322,7 @@ }, "node_modules/npm/node_modules/lodash._baseindexof": { "version": "3.1.0", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -34338,19 +34338,19 @@ }, "node_modules/npm/node_modules/lodash._bindcallback": { "version": "3.0.1", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._cacheindexof": { "version": "3.0.2", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._createcache": { "version": "3.1.2", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -34365,7 +34365,7 @@ }, "node_modules/npm/node_modules/lodash._getnative": { "version": "3.9.1", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -34383,7 +34383,7 @@ }, "node_modules/npm/node_modules/lodash.restparam": { "version": "3.6.1", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -49159,9 +49159,9 @@ } }, "@dcl/schemas": { - "version": "13.6.2", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.6.2.tgz", - "integrity": "sha512-sps6khw7pn8hY/TRr8aH4gV+t5xVi7A32PZ4EVVJzjDAhTXAxa74wAI9cA/y/gR6rYKWu96LtHoEBf7wde8/lQ==", + "version": "13.8.5", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.8.5.tgz", + "integrity": "sha512-SO0pHJi3xfjwMMbVVLsXm/qrt1L7VCO09MA+eefsGPmfbboiUIBM2mxJFBMxrCn/F/+SSxI3uLHo8xytCjFdkg==", "requires": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -73555,7 +73555,7 @@ "lodash._baseindexof": { "version": "3.1.0", "bundled": true, - "dev": true + "extraneous": true }, "lodash._baseuniq": { "version": "4.6.0", @@ -73569,17 +73569,17 @@ "lodash._bindcallback": { "version": "3.0.1", "bundled": true, - "dev": true + "extraneous": true }, "lodash._cacheindexof": { "version": "3.0.2", "bundled": true, - "dev": true + "extraneous": true }, "lodash._createcache": { "version": "3.1.2", "bundled": true, - "dev": true, + "extraneous": true, "requires": { "lodash._getnative": "^3.0.0" } @@ -73592,7 +73592,7 @@ "lodash._getnative": { "version": "3.9.1", "bundled": true, - "dev": true + "extraneous": true }, "lodash._root": { "version": "3.0.1", @@ -73607,7 +73607,7 @@ "lodash.restparam": { "version": "3.6.1", "bundled": true, - "dev": true + "extraneous": true }, "lodash.union": { "version": "4.6.0", diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx new file mode 100644 index 00000000..5de84506 --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx @@ -0,0 +1,69 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { + CommonNotificationProps, + CampaignGasPriceHigherThanExpectedNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import CampaignName from './CampaignName' + +const i18N = { + en: { + description: ( + metadata: CampaignGasPriceHigherThanExpectedNotification['metadata'] + ): React.ReactNode => ( + <> + The gas price for the campaign is + lower than expected, and the transactions may not be processed. + + ), + title: 'Gas Price Higher Than Expected' + }, + es: { + description: ( + metadata: CampaignGasPriceHigherThanExpectedNotification['metadata'] + ): React.ReactNode => ( + <> + El precio del gas para la campaña {' '} + es más alto de lo esperado, y las transacciones pueden no ser + procesadas. + + ), + title: 'Precio del Gas Más Alto de lo Esperado' + }, + zh: { + description: ( + metadata: CampaignGasPriceHigherThanExpectedNotification['metadata'] + ): React.ReactNode => ( + <> + {' '} + 活动的燃气价格高于预期，交易可能无法处理。 + + ), + title: '燃气价格高于预期' + } +} + +export default function CampaignGasPriceHigherThanExpectedNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

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

+ + ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx new file mode 100644 index 00000000..a12b0777 --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +import { CampaignOutOfStockNotification } from '../../types' + +type CampaignNameProps = { + metadata: CampaignOutOfStockNotification['metadata'] +} + +export default function CampaignName(props: CampaignNameProps) { + const { metadata } = props + + if (metadata.link) { + return {metadata.campaignName} + } + + return {metadata.campaignName} +} diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx new file mode 100644 index 00000000..4a6c5a42 --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx @@ -0,0 +1,66 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { + CommonNotificationProps, + CampaignOutOfFundsNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import CampaignName from './CampaignName' + +const i18N = { + en: { + description: ( + metadata: CampaignOutOfFundsNotification['metadata'] + ): React.ReactNode => ( + <> + The campaign has run out of funds. + + ), + title: 'Campaign Out of Funds' + }, + es: { + description: ( + metadata: CampaignOutOfFundsNotification['metadata'] + ): React.ReactNode => ( + <> + La campaña se ha quedado sin + fondos. + + ), + title: 'Campaña sin fondos' + }, + zh: { + description: ( + metadata: CampaignOutOfFundsNotification['metadata'] + ): React.ReactNode => ( + <> + 活动资金不足。 + + ), + title: '活动资金不足' + } +} + +export default function CampaignOutOfFundsNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

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

+ + ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx new file mode 100644 index 00000000..30bf3292 --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx @@ -0,0 +1,65 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { + CommonNotificationProps, + CampaignOutOfStockNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import CampaignName from './CampaignName' + +const i18N = { + en: { + description: ( + metadata: CampaignOutOfStockNotification['metadata'] + ): React.ReactNode => ( + <> + The campaign has run out of stock. + + ), + title: 'Campaign Out of Stock' + }, + es: { + description: ( + metadata: CampaignOutOfStockNotification['metadata'] + ): React.ReactNode => ( + <> + La campaña se ha quedado sin stock. + + ), + title: 'Campaña sin stock' + }, + zh: { + description: ( + metadata: CampaignOutOfStockNotification['metadata'] + ): React.ReactNode => ( + <> + 活动库存不足。 + + ), + title: '活动资金不足' + } +} + +export default function CampaignOutOfStockNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

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

+ + ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx new file mode 100644 index 00000000..0b483496 --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx @@ -0,0 +1,84 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { CommonNotificationProps, RewardDelayedNotification } from '../../types' +import NotificationItem from '../../NotificationItem' +import { getBGColorByRarity } from '../../utils' +import NotificationItemNFTLink from '../../NotificationItemNFTLink' +import { config } from '../../../../config' + +const i18N = { + en: { + description: ( + reward: RewardDelayedNotification['metadata'] + ): React.ReactNode => ( + <> + We’re working on delivering your + + as soon as possible. + + ), + title: 'Your Gift is Delayed' + }, + es: { + description: ( + reward: RewardDelayedNotification['metadata'] + ): React.ReactNode => ( + <> + Estamos trabajando en entregar tu + + lo antes posible. + + ), + title: 'Tu regalo está retrasado' + }, + zh: { + description: ( + reward: RewardDelayedNotification['metadata'] + ): React.ReactNode => ( + <> + 我们正在尽快交付您的 + + 。 + + ), + title: '您的礼物延迟了' + } +} + +export default function RewardDelayedNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

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

+ + ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx new file mode 100644 index 00000000..4ef20b9a --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx @@ -0,0 +1,87 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { + CommonNotificationProps, + RewardInProgressNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import { getBGColorByRarity } from '../../utils' +import NotificationItemNFTLink from '../../NotificationItemNFTLink' +import { config } from '../../../../config' + +const i18N = { + en: { + description: ( + reward: RewardInProgressNotification['metadata'] + ): React.ReactNode => ( + <> + You’ve received a + + for free. Try it out once it arrives! + + ), + title: 'A Gift is on its way!' + }, + es: { + description: ( + reward: RewardInProgressNotification['metadata'] + ): React.ReactNode => ( + <> + Recibiste un + + gratis. ¡Pruebalo cuando llegue! + + ), + title: '¡Un regalo está en camino!' + }, + zh: { + description: ( + reward: RewardInProgressNotification['metadata'] + ): React.ReactNode => ( + <> + 您已免费收到一个 + + 。一旦到达，立即试试吧！ + + ), + title: '一份礼物正在路上！' + } +} + +export default function RewardInProgressNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

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

+ + ) +} diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx index 9c1246ed..1262946c 100644 --- a/src/components/Notifications/Notifications.stories.tsx +++ b/src/components/Notifications/Notifications.stories.tsx @@ -28,6 +28,11 @@ import { GovernanceVotedOnBehalfNotification } from './NotificationTypes' import { shorten } from '../AddressField/utils' +import RewardInProgressNotification from './NotificationTypes/Reward/RewardInProgressNotification' +import RewardDelayedNotification from './NotificationTypes/Reward/RewardDelayedNotification' +import CampaignOutOfStockNotification from './NotificationTypes/Reward/CampaignOutOfStockNotification' +import CampaignOutOfFundsNotification from './NotificationTypes/Reward/CampaignOutOfFundsNotification' +import CampaignGasPriceHigherThanExpectedNotification from './NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification' storiesOf('Notifications Toggle', module) .add('Without new notifications', () => { @@ -682,6 +687,97 @@ storiesOf('Notifications Toggle', module) }} locale="en" /> + + + + + ) + }) + .add('Campaign Notifications', () => { + return ( +
+ + +
) }) diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts index 94524119..84a039d7 100644 --- a/src/components/Notifications/types.ts +++ b/src/components/Notifications/types.ts @@ -235,21 +235,55 @@ type LandNotifications = LandRentedNotification | LandRentalEndedNotification // Reward Notifications +type CommonRewardsMetadata = { + tokenName: string + tokenImage: string + tokenRarity: Rarity +} + +type CommonCampaignMetadata = { + link?: string + campaignName: string +} + export type RewardAssignedNotification = RawDecentralandNotification< NotificationType.REWARD_ASSIGNED, - { - tokenName: string - tokenImage: string - tokenRarity: Rarity - } + CommonRewardsMetadata > + +export type RewardInProgressNotification = RawDecentralandNotification< + NotificationType.REWARD_IN_PROGRESS, + CommonRewardsMetadata +> + +export type RewardDelayedNotification = RawDecentralandNotification< + NotificationType.REWARD_DELAYED, + CommonRewardsMetadata +> + +export type CampaignOutOfStockNotification = RawDecentralandNotification< + NotificationType.REWARD_CAMPAIGN_OUT_OF_STOCK, + CommonCampaignMetadata +> + +export type CampaignOutOfFundsNotification = RawDecentralandNotification< + NotificationType.REWARD_CAMPAIGN_OUT_OF_FUNDS, + CommonCampaignMetadata +> + +export type CampaignGasPriceHigherThanExpectedNotification = + RawDecentralandNotification< + NotificationType.REWARD_CAMPAIGN_GAS_PRICE_HIGHER_THAN_EXPECTED, + CommonCampaignMetadata + > + +// events notifications type CommonEventsMetadata = { image: string link: string name: string } -// events notifications export type EventsStartsSoonNotification = RawDecentralandNotification< NotificationType.EVENTS_STARTS_SOON, CommonEventsMetadata & { diff --git a/src/components/Notifications/utils.tsx b/src/components/Notifications/utils.tsx index d18ccd08..9a0d85d4 100644 --- a/src/components/Notifications/utils.tsx +++ b/src/components/Notifications/utils.tsx @@ -31,6 +31,11 @@ import { GovernanceVotedOnBehalfNotification } from './NotificationTypes' import { FunctionComponent } from 'react' +import RewardInProgressNotification from './NotificationTypes/Reward/RewardInProgressNotification' +import CampaignOutOfStockNotification from './NotificationTypes/Reward/CampaignOutOfStockNotification' +import CampaignGasPriceHigherThanExpectedNotification from './NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification' +import CampaignOutOfFundsNotification from './NotificationTypes/Reward/CampaignOutOfFundsNotification' +import RewardDelayedNotification from './NotificationTypes/Reward/RewardDelayedNotification' export const MAXIMUM_FRACTION_DIGITS = 2 @@ -88,7 +93,14 @@ export const NotificationComponentByType: DecentralandNotificationComponentByTyp [NotificationType.LAND_RENTED]: LandRentedNotification, [NotificationType.LAND_RENTAL_ENDED]: LandRentalEndedNotification, [NotificationType.REWARD_ASSIGNED]: RewardAssignedNotification, - [NotificationType.REWARD_IN_PROGRESS]: null, + [NotificationType.REWARD_IN_PROGRESS]: RewardInProgressNotification, + [NotificationType.REWARD_DELAYED]: RewardDelayedNotification, + [NotificationType.REWARD_CAMPAIGN_OUT_OF_FUNDS]: + CampaignOutOfFundsNotification, + [NotificationType.REWARD_CAMPAIGN_OUT_OF_STOCK]: + CampaignOutOfStockNotification, + [NotificationType.REWARD_CAMPAIGN_GAS_PRICE_HIGHER_THAN_EXPECTED]: + CampaignGasPriceHigherThanExpectedNotification, [NotificationType.BADGE_GRANTED]: null, [NotificationType.EVENTS_STARTS_SOON]: EventsStartsSoonNotification, [NotificationType.EVENTS_STARTED]: EventsStartedNotification,