+ {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+ {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+ {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 ++ {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 ++ {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" /> +