Skip to content

Commit

Permalink
fix: timeline styles and history modal texts and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Argeare5
Argeare5 committed Sep 27, 2023
1 parent b8420ea commit b4216c3
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 41 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ You can deploy your version of the application using Vercel just by clicking on

### Hosted version

We have our own hosted version from Vercel, you can access it on []() (TODO: need add domain link)
We have our own hosted version from Vercel, you can access it on [https://vote.onaave.com/](https://vote.onaave.com/)

<br>

Expand Down
4 changes: 3 additions & 1 deletion src/proposals/components/DetailsModalWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import { texts } from '../../ui/utils/texts';
interface DetailsModalWrapperProps {
isOpen: boolean;
setIsOpen: (value: boolean) => void;
proposalId: number;
children: ReactNode;
}

export function DetailsModalWrapper({
proposalId,
isOpen,
setIsOpen,
children,
Expand All @@ -24,7 +26,7 @@ export function DetailsModalWrapper({
<Box
sx={(theme) => ({ [theme.breakpoints.up('sm')]: { p: '40px 60px' } })}>
<Box component="h2" sx={{ typography: 'h1', mb: 40 }}>
{texts.proposals.detailsModalTitle}
{texts.proposals.detailsModalTitle(proposalId)}
</Box>

<Box sx={{ display: 'flex', flexDirection: 'column' }}>{children}</Box>
Expand Down
10 changes: 2 additions & 8 deletions src/proposals/components/proposal/ProposalTimeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ const StateWrapper = ({
className="StateWrapper"
sx={(theme) => ({
position: 'absolute',
top: color === 'secondary' ? 'calc(100% + 36px)' : 'calc(100% + 24px)',
top: 'calc(100% + 36px)',
color:
color === 'success'
? theme.palette.$mainFor
Expand Down Expand Up @@ -715,13 +715,7 @@ export function ProposalTimeline({
timeline.type === TimelineItemTypeType.votingClosed &&
typeof getVotingClosedState() === 'undefined' &&
'≈ '}
{dayjs
.unix(timeline.timestamp)
.format(
timeline.type === TimelineItemTypeType.finished
? 'D MMM YYYY'
: 'D MMM YYYY, h:mm A',
)}
{dayjs.unix(timeline.timestamp).format('D MMM YYYY, h:mm A')}
</Box>
{timeline.state &&
timeline.type === TimelineItemTypeType.votingClosed && (
Expand Down
109 changes: 84 additions & 25 deletions src/proposals/components/proposalHistory/ProposalHistoryItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { Box } from '@mui/system';
import { Box, fontWeight, useTheme } from '@mui/system';
import dayjs from 'dayjs';
import React from 'react';

import { Link } from '../../../ui';
import CopyIcon from '/public/images/icons/copy.svg';
import LinkIcon from '/public/images/icons/linkIcon.svg';

import { CopyToClipboard, Link } from '../../../ui';
import { NetworkIcon } from '../../../ui/components/NetworkIcon';
import { IconBox } from '../../../ui/primitives/IconBox';
import { textCenterEllipsis } from '../../../ui/utils/text-center-ellipsis';
import { texts } from '../../../ui/utils/texts';
import { appConfig } from '../../../utils/appConfig';
import { chainInfoHelper } from '../../../utils/configs';
import { ProposalHistoryItem as IProposalHistoryItem } from '../../store/proposalsHistorySlice';
Expand All @@ -21,6 +26,8 @@ export function ProposalHistoryItem({
onClick,
item,
}: ProposalHistoryItemProps) {
const theme = useTheme();

return (
<Box
sx={{
Expand Down Expand Up @@ -55,7 +62,7 @@ export function ProposalHistoryItem({
}}
/>
<Box
sx={(theme) => ({
sx={{
display: 'flex',
mb: 35,
justifyContent: 'space-between',
Expand All @@ -65,7 +72,7 @@ export function ProposalHistoryItem({
[theme.breakpoints.up('sm')]: {
flexDirection: 'row',
},
})}>
}}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
{!!item.timestamp && (
<Box
Expand Down Expand Up @@ -95,7 +102,13 @@ export function ProposalHistoryItem({
sx={{ typography: 'body', width: item.timestamp ? '68%' : '100%' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<NetworkIcon chainId={item.txInfo.chainId} css={{ mr: 8 }} />
<Box component="p">{item.title}</Box>
<Box
sx={{ b: { fontWeight: 600 } }}
component="p"
dangerouslySetInnerHTML={{
__html: item.title,
}}
/>
</Box>

{!!item.addresses?.length && (
Expand All @@ -111,26 +124,72 @@ export function ProposalHistoryItem({
pl: 15,
}}>
{item.addresses.map((address, index) => (
<Link
key={index}
inNewWindow
href={`${
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
chainInfoHelper.getChainParameters(
item.txInfo.chainId || appConfig.govCoreChainId,
).blockExplorerUrls[0]
}address/${address}`}>
<Box
component="li"
sx={{
mt: 2,
transition: 'all 0.2s ease',
hover: { opacity: 0.7 },
}}>
{textCenterEllipsis(address, 6, 6)}
</Box>
</Link>
<Box
sx={{ display: 'inline-flex', alignItems: 'center' }}
key={index}>
<Link
css={{ display: 'inline-flex', alignItems: 'center' }}
inNewWindow
href={`${
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
chainInfoHelper.getChainParameters(
item.txInfo.chainId || appConfig.govCoreChainId,
).blockExplorerUrls[0]
}address/${address}`}>
<Box
component="li"
sx={{
mt: 2,
transition: 'all 0.2s ease',
hover: { opacity: 0.7 },
}}>
{textCenterEllipsis(address, 6, 6)}
</Box>

<IconBox
sx={{
width: 10,
height: 10,
ml: 2,
'> svg': {
width: 10,
height: 10,
path: {
'&:first-of-type': {
stroke: theme.palette.$text,
},
'&:last-of-type': {
fill: theme.palette.$text,
},
},
},
}}>
<LinkIcon />
</IconBox>
</Link>

<CopyToClipboard copyText={address}>
<IconBox
sx={{
cursor: 'pointer',
width: 10,
height: 10,
'> svg': {
width: 10,
height: 10,
},
ml: 3,
path: {
transition: 'all 0.2s ease',
stroke: theme.palette.$textSecondary,
},
hover: { path: { stroke: theme.palette.$main } },
}}>
<CopyIcon />
</IconBox>
</CopyToClipboard>
</Box>
))}
</Box>
</>
Expand Down
42 changes: 42 additions & 0 deletions src/proposals/components/proposalHistory/ProposalHistoryItemTxLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ethers } from 'ethers';
import React from 'react';

import CopyIcon from '/public/images/icons/copy.svg';
import LinkIcon from '/public/images/icons/linkIcon.svg';

import { CopyToClipboard, Link, Spinner } from '../../../ui';
import { IconBox } from '../../../ui/primitives/IconBox';
Expand Down Expand Up @@ -39,6 +40,26 @@ export function ProposalHistoryItemTxLink({
hover: { opacity: 0.7 },
}}
onClick={onClick}>
<IconBox
sx={{
width: 10,
height: 10,
mr: 4,
'> svg': {
width: 10,
height: 10,
path: {
'&:first-of-type': {
stroke: theme.palette.$textSecondary,
},
'&:last-of-type': {
fill: theme.palette.$textSecondary,
},
},
},
}}>
<LinkIcon />
</IconBox>
<Box component="p" sx={{ typography: 'descriptor', mr: 3 }}>
{texts.other.explorer}
</Box>
Expand Down Expand Up @@ -70,6 +91,27 @@ export function ProposalHistoryItemTxLink({
</Box>
</Link>

<IconBox
sx={{
width: 10,
height: 10,
ml: 2,
'> svg': {
width: 10,
height: 10,
path: {
'&:first-of-type': {
stroke: theme.palette.$textSecondary,
},
'&:last-of-type': {
fill: theme.palette.$textSecondary,
},
},
},
}}>
<LinkIcon />
</IconBox>

<CopyToClipboard copyText={item.txInfo.hash}>
<IconBox
sx={{
Expand Down
5 changes: 4 additions & 1 deletion src/proposals/components/proposalHistory/ProposalHistoryModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,10 @@ export function ProposalHistoryModal({
};

return (
<DetailsModalWrapper isOpen={isOpen} setIsOpen={setIsOpen}>
<DetailsModalWrapper
proposalId={proposalId}
isOpen={isOpen}
setIsOpen={setIsOpen}>
{historyTypes.map((type) => {
return Object.entries(store.proposalHistory).map((item) => {
const txInfo = item[1].txInfo;
Expand Down
4 changes: 3 additions & 1 deletion src/proposals/store/proposalsHistorySlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,8 @@ export const createProposalsHistorySlice: StoreSlice<
isVotingEnded,
lastPayloadCanceledAt,
lastPayloadExpiredAt,
forVotes,
againstVotes,
} = getProposalStepsAndAmounts({
proposalData: proposal.data,
quorum: proposal.config.quorum,
Expand Down Expand Up @@ -229,7 +231,7 @@ export const createProposalsHistorySlice: StoreSlice<
historyId,
HistoryItemType.VOTING_OVER,
isVotingFailed
? texts.proposalHistory.votingFailed
? texts.proposalHistory.votingFailed(forVotes, againstVotes)
: texts.proposalHistory.votingOver,
proposal.data.id,
proposal.data.votingChainId,
Expand Down
9 changes: 5 additions & 4 deletions src/ui/utils/texts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const texts = {
voting: 'You voting',
votingPower: 'Voting power',
totalVotingPower: 'Total voting power',
detailsModalTitle: 'Proposal life cycle details',
detailsModalTitle: (id: number) => `Proposal #${id} life cycle details`,
vote: 'Vote',
notEnoughPower: 'You don’t have enough voting power to vote',
notEnough: 'Not enough',
Expand Down Expand Up @@ -116,8 +116,9 @@ export const texts = {
)})`,
proposalOpenForVoting: (id: number, chainId: number) =>
`Voting started for proposal #${id} (${getChainName(chainId)})`,
votingOver: 'Voting is over',
votingFailed: 'Proposal failed because there were not enough votes for it',
votingOver: `Voting is over. <b>Proposal Passed</b>`,
votingFailed: (forVotes: number, againstVotes: number) =>
`<b>Proposal failed</b>, because there were not enough votes <b>for</b>. Votes: For <b>(${forVotes})</b> | Against <b>(${againstVotes})</b>`,
proposalVotingClosed: (id: number, chainId: number) =>
`Proposal #${id} voting was closed (${getChainName(chainId)})`,
votingResultsSent: `Voting results were sent to Core (${getChainName(
Expand Down Expand Up @@ -334,7 +335,7 @@ export const texts = {
fetchFromIpfsError:
'An error occurred while fetching proposal metadata from IPFS. Try again later or try using a VPN.',
fetchFromIpfsIncorrectHash: `An error occurred while fetching proposal metadata from IPFS. It seems that the ipfs hash is incorrect or the content by this hash does not match the desired one.`,
explorer: 'Explorer link',
explorer: 'Explorer',
votingNotAvailableForGnosis:
'Voting on this chain is not available for Gnosis safe wallet',
unset: 'Unset',
Expand Down

0 comments on commit b4216c3

Please sign in to comment.