Skip to content

Commit

Permalink
feat: add new governance notifications (#556)
Browse files Browse the repository at this point in the history 
* feat: add new governance notifications

* fix: typescript error
  • Loading branch information
@andyesp
andyesp authored Aug 13, 2024
1 parent bad4bfb commit 08b0020
Show file tree
Hide file tree
Showing 10 changed files with 362 additions and 10 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
48 changes: 48 additions & 0 deletions src/components/Icons/Notifications/VotedOnBehalf.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react'

function VotedOnBehalf() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="none"
viewBox="0 0 48 48"
>
<circle
cx="24"
cy="24"
r="24"
fill="url(#paint0_linear_17208_1928)"
></circle>
<g clipPath="url(#clip0_17208_1928)">
<path
fill="#fff"
d="M17.5 18a6 6 0 1012 0 6 6 0 00-12 0zm4.43 9.384l.872 1.453-1.561 5.808-1.688-6.886c-.094-.38-.46-.628-.839-.53A7.56 7.56 0 0013 34.562c0 .797.647 1.439 1.44 1.439H32.56A1.44 1.44 0 0034 34.56a7.56 7.56 0 00-5.714-7.33c-.38-.094-.745.154-.84.53l-1.687 6.885-1.56-5.808.871-1.453a.749.749 0 00-.642-1.134h-1.851a.75.75 0 00-.643 1.134h-.004z"
></path>
</g>
<defs>
<linearGradient
id="paint0_linear_17208_1928"
x1="0"
x2="48"
y1="0"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D80027"></stop>
<stop offset="1" stopColor="#720015"></stop>
</linearGradient>
<clipPath id="clip0_17208_1928">
<path
fill="#fff"
d="M0 0H21V24H0z"
transform="translate(13 12)"
></path>
</clipPath>
</defs>
</svg>
)
}

export default VotedOnBehalf
61 changes: 61 additions & 0 deletions src/components/Icons/Notifications/WhaleVote.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React from 'react'

function WhaleVote() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="none"
viewBox="0 0 48 48"
>
<circle
cx="24"
cy="24"
r="24"
fill="url(#paint0_linear_17208_1929)"
></circle>
<g clipPath="url(#clip0_17208_1929)">
<mask
id="mask0_17208_1929"
style={{ maskType: 'luminance' }}
width="25"
height="25"
x="11"
y="12"
maskUnits="userSpaceOnUse"
>
<path fill="#fff" d="M36 12H11v25h25V12z"></path>
</mask>
<g mask="url(#mask0_17208_1929)">
<path
fill="#fff"
d="M28.505 12.195c-.31.13-.545.277-.708.44a2.111 2.111 0 00-.415.61c-.114.244-.18.505-.195.781-.017.277.024.48.122.61.097.13.26.212.488.245.228.032.407 0 .537-.098.13-.098.22-.268.269-.512.049-.245.122-.424.22-.538a.668.668 0 01.39-.22.78.78 0 01.39 0c.098.033.188.09.27.172.08.08.137.17.17.268.032.098.049 1.196.049 3.296 0 2.1.049 3.215.146 3.345.098.13.26.211.489.244a.657.657 0 00.586-.195c.162-.163.244-1.05.244-2.662 0-1.61.016-2.465.049-2.563a.679.679 0 01.17-.269.682.682 0 01.27-.17.78.78 0 01.39 0 .67.67 0 01.39.22c.098.113.171.292.22.536.049.245.138.415.269.513.13.098.276.146.44.146.162 0 .308-.048.439-.146.13-.098.211-.179.244-.244.032-.065.048-.204.048-.415 0-.212-.065-.472-.195-.781a2.147 2.147 0 00-.512-.757 2.215 2.215 0 00-1.49-.586c-.26 0-.464.024-.61.073-.147.049-.277-.057-.39-.317a1.902 1.902 0 00-.513-.684 2.205 2.205 0 00-.684-.415A2.163 2.163 0 0029.36 12c-.261 0-.546.065-.855.195zm-17.26 3.076c-.164.163-.245.61-.245 1.343s.016 1.18.049 1.343c.032.163.114.399.244.708.13.31.317.61.562.903a3.6 3.6 0 00.878.757c.342.212.627.35.855.415.228.065.342.432.342 1.099s.04 1.318.122 1.953c.081.635.179 1.18.293 1.636.114.456.276.968.488 1.538.212.57.447 1.107.708 1.611.26.505.545.985.855 1.44.309.457.691.936 1.147 1.44.456.506.846.888 1.172 1.148.325.261.39.619.195 1.075a6.574 6.574 0 00-.415 1.294 5.557 5.557 0 00-.122 1.074c0 .31.05.529.147.659.097.13.178.212.244.244.065.033.252.049.561.049.31 0 .74-.065 1.294-.196a6.498 6.498 0 001.416-.488c.391-.195.74-.423 1.05-.683.31-.26.675-.342 1.099-.245a9.01 9.01 0 001.514.196 9.673 9.673 0 001.806-.073 9.673 9.673 0 001.563-.318c.422-.13.854-.3 1.293-.512.44-.212.822-.423 1.148-.635.325-.212.724-.53 1.196-.952.472-.423.846-.806 1.123-1.148a9.867 9.867 0 001.367-2.246c.18-.407.326-.806.44-1.196A9.397 9.397 0 0036 25.916c0-.456-.032-.806-.097-1.05a3.195 3.195 0 00-.342-.781 3.53 3.53 0 00-.537-.708 3.523 3.523 0 00-.708-.537 3.471 3.471 0 00-.88-.366c-.309-.082-2.563-.122-6.762-.122-4.2 0-6.389-.017-6.567-.05a2.168 2.168 0 01-1.123-.61c-.18-.179-.31-.374-.391-.586a89.451 89.451 0 01-.122-.317l.464-.17c.309-.115.577-.253.805-.416.228-.163.44-.358.635-.586.195-.228.35-.447.464-.659.114-.212.212-.472.293-.781.081-.31.122-.83.122-1.563 0-.732-.049-1.164-.146-1.294-.098-.13-.18-.211-.245-.244-.065-.032-.236-.049-.512-.049-.277 0-.66.065-1.148.196a5.03 5.03 0 00-1.27.512 5.04 5.04 0 00-.83.586 4.246 4.246 0 00-.61.733c-.212.309-.334.464-.366.464-.033 0-.155-.155-.366-.464-.212-.31-.53-.627-.952-.952-.424-.326-.814-.562-1.172-.708a4.915 4.915 0 00-.928-.293 4.366 4.366 0 00-.806-.074c-.276 0-.496.082-.659.245zM28.04 25.33c.163.033.285.09.366.17.081.082.139.172.171.27a.79.79 0 010 .39.7.7 0 01-.17.366.68.68 0 01-.27.171.779.779 0 01-.39 0 .694.694 0 01-.366-.17.679.679 0 01-.17-.27.778.778 0 010-.39.699.699 0 01.17-.366.69.69 0 01.269-.171.79.79 0 01.39 0zm6.08 1.416h.365l-.17.806c-.115.537-.228.952-.342 1.245-.114.293-.334.708-.66 1.245a8.483 8.483 0 01-1.269 1.587 8.53 8.53 0 01-1.636 1.294 8.178 8.178 0 01-1.684.781c-.554.18-1.01.293-1.367.342-.359.049-.896.057-1.612.024l-1.074-.049.317-.634c.212-.423.374-.904.489-1.44.113-.538.374-.83.781-.88a4.822 4.822 0 001.22-.317 4.999 4.999 0 001.734-1.123 7.08 7.08 0 00.708-.88c.277-.39.553-.699.83-.927a4.25 4.25 0 011.05-.61 5.33 5.33 0 011.294-.366c.44-.065.781-.098 1.025-.098z"
></path>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_17208_1929"
x1="0"
x2="48"
y1="0"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D80027"></stop>
<stop offset="1" stopColor="#720015"></stop>
</linearGradient>
<clipPath id="clip0_17208_1929">
<path
fill="#fff"
d="M0 0H25V25H0z"
transform="translate(11 12)"
></path>
</clipPath>
</defs>
</svg>
)
}

export default WhaleVote
89 changes: 89 additions & 0 deletions ...onents/Notifications/NotificationTypes/Governance/GovernanceVotedOnBehalfNotification.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 => (
<>
<a href={link} className="dcl notification-link">
See if their vote is aligned
</a>
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 "
<span className="dcl notification-text-highlighted">
{proposalTitle}
</span>
"
</>
)
},
es: {
description: (link: string): React.ReactNode => (
<>
<a href={link} className="dcl notification-link">
Verifica si su voto está alineado
</a>
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 "
<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 GovernanceVotedOnBehalfNotification = ({
notification,
locale
}: CommonNotificationProps<GovernanceVotedOnBehalfNotification>) => (
<NotificationItem
image={{ image: <VotedOnBehalf /> }}
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 GovernanceVotedOnBehalfNotification
91 changes: 91 additions & 0 deletions ...components/Notifications/NotificationTypes/Governance/GovernanceWhaleVoteNotification.tsx
View file
Original file line number Diff line number Diff line change
@@ -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{' '}
<a href={link} className="dcl notification-link">
cast a vote
</a>
. Stay informed and see how this significant vote impacts the outcome.
</>
),
title: (proposalTitle: string): React.ReactNode => (
<>
A whale voted on your proposal "
<span className="dcl notification-text-highlighted">
{proposalTitle}
</span>
"
</>
)
},
es: {
description: (link: string): React.ReactNode => (
<>
Una billetera con más de 250k VP acaba de{' '}
<a href={link} className="dcl notification-link">
emitir un voto
</a>
. Mantente informado y revisa cómo este voto significativo impacta el
resultado.
</>
),
title: (proposalTitle: string): React.ReactNode => (
<>
Una ballena votó en tu propuesta "
<span className="dcl notification-text-highlighted">
{proposalTitle}
</span>
"
</>
)
},
zh: {
description: (link: string): React.ReactNode => (
<>
<a href={link} className="dcl notification-link">
一个持有超过25万VP的钱包刚刚投票。
</a>
保持关注，看看这一重要投票如何影响最终结果。
</>
),
title: (proposalTitle: string): React.ReactNode => (
<>
一位鲸鱼对您的提案“
<span className="dcl notification-text-highlighted">
{proposalTitle}
</span>
”进行了投票
</>
)
}
}

const GovernanceWhaleVoteNotification = ({
notification,
locale
}: CommonNotificationProps<GovernanceWhaleVoteNotification>) => (
<NotificationItem
image={{ image: <WhaleVote /> }}
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 GovernanceWhaleVoteNotification
4 changes: 4 additions & 0 deletions src/components/Notifications/NotificationTypes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -39,6 +41,8 @@ export {
GovernanceVotingEndedVoterNotification,
GovernancePitchPassedNotification,
GovernanceTenderPassedNotification,
GovernanceVotedOnBehalfNotification,
GovernanceWhaleVoteNotification,
LandRentalEndedNotification,
LandRentedNotification,
RewardAssignedNotification,
Expand Down
Loading

0 comments on commit 08b0020

Please sign in to comment.