diff --git a/app/actions/ClientActions.js b/app/actions/ClientActions.js
index a85f0f6245..64e20eccb5 100644
--- a/app/actions/ClientActions.js
+++ b/app/actions/ClientActions.js
@@ -655,6 +655,7 @@ export const setVoteChoicesAttempt = (agendaId, choiceId, passphrase) => (
for (let i = 0; i < stakePools.length; i++) {
dispatch(getVoteChoicesAttempt(stakePools[i]));
}
+ dispatch(getVoteChoicesAttempt());
})
.catch((error) => dispatch({ error, type: SETVOTECHOICES_FAILED }));
};
diff --git a/app/actions/GovernanceActions.js b/app/actions/GovernanceActions.js
index 7a115b7d9d..8d7aad66d5 100644
--- a/app/actions/GovernanceActions.js
+++ b/app/actions/GovernanceActions.js
@@ -616,9 +616,11 @@ export const getProposalDetails = (token) => async (dispatch, getState) => {
}
};
-export const viewProposalDetails = (token) => (dispatch) => {
+export const viewProposalDetails = (token) => (dispatch) =>
dispatch(pushHistory(`/proposal/details/${token}`));
-};
+
+export const viewAgendaDetails = (name) => (dispatch) =>
+ dispatch(pushHistory(`/agenda/details/${name}`));
export const UPDATEVOTECHOICE_ATTEMPT = "UPDATEVOTECHOICE_ATTEMPT";
export const UPDATEVOTECHOICE_SUCCESS = "UPDATEVOTECHOICE_SUCCESS";
diff --git a/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx b/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
index 9d659bd7b8..c23f4d9454 100644
--- a/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
+++ b/app/components/buttons/EyeFilterMenu/EyeFilterMenu.jsx
@@ -63,6 +63,7 @@ const EyeFilterMenu = ({
ref={wrapperRef}>
diff --git a/app/components/layout/StandalonePageBody/StandalonePageBody.module.css b/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
index d3e619bde4..46b1aa6f3e 100644
--- a/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
+++ b/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
@@ -8,5 +8,6 @@
@media screen and (max-width: 1179px) {
.body {
padding-left: 20px;
+ padding-right: 20px;
}
}
diff --git a/app/components/layout/TabbedPage/TabbedPage.jsx b/app/components/layout/TabbedPage/TabbedPage.jsx
index 44b2428bb8..40828db433 100644
--- a/app/components/layout/TabbedPage/TabbedPage.jsx
+++ b/app/components/layout/TabbedPage/TabbedPage.jsx
@@ -69,7 +69,8 @@ const TabbedPage = ({
tabsClassName,
tabContentClassName,
onChange,
- caret
+ caret,
+ activeCaretClassName
}) => {
const location = useSelector(sel.location);
const uiAnimations = useSelector(sel.uiAnimations);
@@ -133,6 +134,7 @@ const TabbedPage = ({
tabs={tabHeaders}
tabsClassName={tabsClassName}
caret={caret}
+ activeCaretClassName={activeCaretClassName}
/>
diff --git a/app/components/shared/PoliteiaLink.jsx b/app/components/shared/PoliteiaLink.jsx
index 26a1c6ed97..8bf84570dc 100644
--- a/app/components/shared/PoliteiaLink.jsx
+++ b/app/components/shared/PoliteiaLink.jsx
@@ -7,14 +7,17 @@ const PoliteiaLink = ({
path,
className,
isTestnet,
- CustomComponent
+ CustomComponent,
+ hrefProp
}) => {
const href = useMemo(
() =>
- `https://${isTestnet ? "test-proposals" : "proposals"}.decred.org${
- path || ""
- }`,
- [isTestnet, path]
+ hrefProp
+ ? hrefProp
+ : `https://${isTestnet ? "test-proposals" : "proposals"}.decred.org${
+ path || ""
+ }`,
+ [isTestnet, path, hrefProp]
);
const onClickHandler = useCallback(() => wallet.openExternalURL(href), [
href
diff --git a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.jsx b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.jsx
index 16f744903b..006aadcf36 100644
--- a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.jsx
+++ b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.jsx
@@ -13,7 +13,12 @@ export const RoutedTab = (path, link, className, activeClassName) => ({
activeClassName
});
-const RoutedTabsHeader = ({ tabs, tabsClassName, caret }) => {
+const RoutedTabsHeader = ({
+ tabs,
+ tabsClassName,
+ caret,
+ activeCaretClassName
+}) => {
const { uiAnimations, caretLeft, caretWidth, nodes } = useRoutedTabsHeader();
const getAnimatedCaret = useCallback(() => {
@@ -26,12 +31,15 @@ const RoutedTabsHeader = ({ tabs, tabsClassName, caret }) => {
{(style) => (
)}
);
- }, [caretLeft, caretWidth]);
+ }, [caretLeft, caretWidth, activeCaretClassName]);
const getStaticCaret = useCallback(() => {
const style = {
diff --git a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
index 49dce642f3..8ee3f458c1 100644
--- a/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
+++ b/app/components/shared/RoutedTabsHeader/RoutedTabsHeader.module.css
@@ -12,7 +12,7 @@
}
.tab a {
- margin: 0 5px 0 5px;
+ margin: 0;
color: var(--grey-7);
text-decoration: none;
font-size: 16px;
@@ -30,13 +30,13 @@
.tabCaret {
position: absolute;
bottom: 0;
- height: 5px;
+ height: 4px;
}
.tabCaret .active {
background-color: var(--accent-color);
position: absolute;
- height: 5px;
+ height: 4px;
}
@media screen and (max-width: 768px) {
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetails.jsx b/app/components/views/AgendaDetailsPage/AgendaDetails.jsx
new file mode 100644
index 0000000000..48680e5a59
--- /dev/null
+++ b/app/components/views/AgendaDetailsPage/AgendaDetails.jsx
@@ -0,0 +1,48 @@
+import { classNames } from "pi-ui";
+import styles from "./AgendaDetails.module.css";
+import { FormattedMessage as T } from "react-intl";
+import { useAgendaDetails } from "./hooks";
+import { VoteSection, AgendaCard } from "./helpers";
+
+const AgendaDetails = () => {
+ const {
+ agenda,
+ selectedChoice,
+ newSelectedChoice,
+ setNewSelectedChoice,
+ choices,
+ isLoading,
+ goBackHistory,
+ updatePreferences
+ } = useAgendaDetails();
+ return (
+
+ );
+};
+
+export default AgendaDetails;
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetails.module.css b/app/components/views/AgendaDetailsPage/AgendaDetails.module.css
new file mode 100644
index 0000000000..8f49b2da0c
--- /dev/null
+++ b/app/components/views/AgendaDetailsPage/AgendaDetails.module.css
@@ -0,0 +1,74 @@
+.cardWrapper {
+ display: flex;
+}
+
+.backButton {
+ width: 40px;
+ background-color: var(--governance-nav-button-bg);
+ cursor: pointer;
+}
+
+.backButton:hover {
+ background-color: var(--grey-5);
+}
+
+.backArrow {
+ height: 10px;
+ width: 10px;
+ background-image: var(--menu-arrow-up);
+ background-position: 50% 5px;
+ background-repeat: no-repeat;
+ transform: rotate(-90deg);
+}
+
+.backButton:hover .backArrow {
+ background-image: var(--arrow-left-white);
+ transform: rotate(0);
+ background-position: 50% 0;
+}
+.column {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+.detailsText {
+ font-family: var(--font-family-regular-semi-bold);
+ padding: 30px 40px;
+ background-color: var(--background-back-color);
+ margin: 5px 0 20px 0;
+ border-top: 1px solid var(--tabbed-page-header-bg);
+ width: 764px;
+ font-size: 16px;
+}
+
+.piButtonWrapper {
+ display: flex;
+ justify-content: flex-end;
+ width: 740px;
+}
+
+.loadingPage {
+ width: 100%;
+ text-align: center;
+}
+
+.piButton {
+ border: 0 !important;
+ text-decoration: none !important;
+ color: var(--color-white) !important;
+ font-weight: var(--font-weight-semi-bold) !important;
+}
+
+@media screen and (max-width: 1179px) {
+ .detailsText {
+ width: 674px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .detailsText {
+ padding-left: 20px;
+ width: 355px;
+ }
+}
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetailsPage.jsx b/app/components/views/AgendaDetailsPage/AgendaDetailsPage.jsx
new file mode 100644
index 0000000000..74ae3b34f4
--- /dev/null
+++ b/app/components/views/AgendaDetailsPage/AgendaDetailsPage.jsx
@@ -0,0 +1,13 @@
+import AgendaDetails from "./AgendaDetails";
+import { Header } from "./helpers";
+import { StandalonePage } from "layout";
+
+const AgendaDetailsPage = () => {
+ return (
+ }>
+
+
+ );
+};
+
+export default AgendaDetailsPage;
diff --git a/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx
new file mode 100644
index 0000000000..aefc328055
--- /dev/null
+++ b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.jsx
@@ -0,0 +1,72 @@
+import styles from "./AgendaCard.module.css";
+import { classNames, Tooltip, StatusTag } from "pi-ui";
+import { FormattedMessage as T } from "react-intl";
+
+const AgendaCard = ({ agenda, selectedChoice, className }) => {
+ const inProgress = !agenda.finished;
+
+ return (
+
+
+
+
{agenda.name}
+
+ {agenda.name}
+ }}
+ />
+
+
{`${agenda.description} `}
+
+
+ {!inProgress ? (
+
+ }>
+
+
+ ) : (
+
+ }>
+
+
+ )}
+
+ {selectedChoice}
+ }}
+ />
+
+
+
+
+
+
+ {finished && selected ? (
+
+ ) : (
+
+ )}
+
+
styles[o.value])}
+ />
+ {!finished && (
+
+ )}
+
+
-
{agenda.name}
-
- Preference:{" "}
- {selectedChoice}
-
-
- {`${agenda.description} `}
-
- :
- {agenda.name}
-
-
-
-
viewAgendaDetailsHandler(agenda.name)}
+ className={classNames(styles.cardWrapper)}>
+
+
+
-
-
-
{description}
-
- :{" "}
- {name}
-
-
-
-
-
-
- {finished && selected ? (
-
- ) : (
-
- )}
- :
-
-
-
-
-
-
-
-
-
}
- modalClassName={styles.passphraseModal}
- onSubmit={updatePreferences}
- className={styles.updatePreferencesButton}
- disabled={disabled || isLoading}
- buttonLabel={
- isLoading ? (
-
- ) : (
-
- )
- }
- />
-
-
-
-
-
-
-
- ) : (
-
- }>
-
-
-
-
- );
-
-export default ProgressIndicator;
diff --git a/app/components/views/GovernancePage/Blockchain/AgendaOverview/index.js b/app/components/views/GovernancePage/Blockchain/AgendaOverview/index.js
new file mode 100644
index 0000000000..670360e2e1
--- /dev/null
+++ b/app/components/views/GovernancePage/Blockchain/AgendaOverview/index.js
@@ -0,0 +1 @@
+export { default } from "./AgendaOverview";
diff --git a/app/components/views/GovernancePage/Blockchain/Blockchain.jsx b/app/components/views/GovernancePage/Blockchain/Blockchain.jsx
index 372d64c773..f0daaf2601 100644
--- a/app/components/views/GovernancePage/Blockchain/Blockchain.jsx
+++ b/app/components/views/GovernancePage/Blockchain/Blockchain.jsx
@@ -1,28 +1,56 @@
-import { useState } from "react";
-import VotingPrefs from "./Page";
import { find, compose, eq, get } from "fp";
-import { useVotingPrefs } from "./hooks";
-
-// TODO this agenda component needs some love.
-const VotingPrefsTab = () => {
- const [selectedAgenda, setSelectedAgenda] = useState(null);
- const {
- configuredStakePools,
- defaultStakePool,
- stakePool,
- allAgendas,
- onUpdateVotePreference,
- onChangeStakePool,
- isLoading,
- voteChoices
- } = useVotingPrefs();
-
- const getStakePool = () => {
- const pool = onChangeStakePool && stakePool;
- return pool
- ? configuredStakePools.find(compose(eq(pool.Host), get("Host")))
- : null;
- };
+import { useBlockchain } from "./hooks";
+import AgendaOverview from "./AgendaOverview";
+import { PoliteiaLink as PiLink } from "shared";
+import { FormattedMessage as T, defineMessages } from "react-intl";
+import PageHeader from "../PageHeader";
+import styles from "./Blockchain.module.css";
+import { Button, Tooltip } from "pi-ui";
+import { TextInput } from "inputs";
+import { EyeFilterMenu } from "buttons";
+import { useIntl } from "react-intl";
+import { useState, useEffect } from "react";
+
+const messages = defineMessages({
+ filterByNamePlaceholder: {
+ id: "blockchain.filterByNamePlaceholder",
+ defaultMessage: "Filter by Name"
+ }
+});
+
+const sortOptions = [
+ {
+ key: "desc",
+ value: "desc",
+ label:
+ },
+ {
+ key: "asc",
+ value: "asc",
+ label:
+ }
+];
+
+const Blockchain = () => {
+ const { allAgendas, voteChoices, viewAgendaDetailsHandler } = useBlockchain();
+ const [filterByName, setFilterByName] = useState("");
+ const [sortBy, setSortBy] = useState(sortOptions[0]);
+ const [agendas, setAgendas] = useState(allAgendas);
+ const intl = useIntl();
+ const sortByKey = sortBy.key;
+
+ useEffect(() => {
+ let newAgendas =
+ sortByKey === "desc" ? [...allAgendas] : [...allAgendas].reverse();
+
+ if (filterByName.trim() !== "") {
+ newAgendas = newAgendas.filter(
+ (agenda) => agenda.name.search(filterByName.trim()) !== -1
+ );
+ }
+
+ setAgendas(newAgendas);
+ }, [allAgendas, filterByName, sortByKey]);
const getAgendaSelectedChoice = (agenda) =>
get(
@@ -30,25 +58,94 @@ const VotingPrefsTab = () => {
find(compose(eq(agenda.name), get(["agendaId"])), voteChoices)
) || "abstain";
- const onShowAgenda = (index) => setSelectedAgenda(index);
-
- const onCloseAgenda = () => setSelectedAgenda(null);
-
return (
-
+ <>
+
+
}
+ description={
+
+ docs.decred.org
+
+ )
+ }}
+ />
+ }
+ optionalButton={
+
+ }
+ />
+
+
+ setFilterByName(e.target.value)}
+ />
+
+
+ }>
+ setSortBy(v)}
+ />
+
+
+
+ {agendas.length > 0 ? (
+ agendas.map((agenda) => (
+
+ ))
+ ) : filterByName ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
- {allAgendas.length > 0 ? (
- allAgendas.map((agenda, index) => (
-
onShowAgenda(index)}
- />
- ))
- ) : (
-
-
-
- )}
-
+
{title}
+
{description}
+ {optionalButton}
+
- tab.value === filterTab)}
- />
-
- );
-};
-
-export default ProposalsFilter;
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsFilter/ProposalsFilter.module.css b/app/components/views/GovernancePage/Proposals/ProposalsFilter/ProposalsFilter.module.css
deleted file mode 100644
index 5d84c3f554..0000000000
--- a/app/components/views/GovernancePage/Proposals/ProposalsFilter/ProposalsFilter.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.tabs {
- width: 800px;
- margin-left: 85px;
- height: 40px;
-}
-
-.tabs > div > ul {
- justify-content: right;
- position: relative;
- right: -20px;
- width: fit-content;
- margin-left: auto;
- top: 0;
-}
-
-.tabs > div {
- background-color: transparent;
- padding-top: 0px;
-}
-
-@media screen and (max-width: 1179px) {
- .tabs {
- margin-left: 0;
- width: 700px;
- }
-}
-
-@media screen and (max-width: 768px) {
- .tabs {
- width: 100%;
- }
-
- .allIcon {
- background-image: var(--ticket-live-icon);
- }
-
- .approvedIcon {
- background-image: var(--ticket-voted-icon);
- }
-
- .rejectedIcon {
- background-image: var(--ticket-revoked-icon);
- }
- .tabs > div > ul {
- left: 0px;
- }
-}
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx b/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx
index eb03b954cf..0e398815f9 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx
+++ b/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.jsx
@@ -1,14 +1,30 @@
import { PoliteiaLoading, NoProposals } from "indicators";
import InfiniteScroll from "react-infinite-scroller";
-import ProposalsListItem from "../ProposalsListItem/ProposalsListItem";
+import ProposalsListItem from "../ProposalsListItem";
import { useProposalsList } from "../hooks";
import { LoadingError } from "shared";
import styles from "./ProposalsList.module.css";
import { useCallback, useLayoutEffect, useState, useEffect } from "react";
-import ProposalsFilter from "../ProposalsFilter/ProposalsFilter";
+import { EyeFilterMenu } from "buttons";
+import { FormattedMessage as T } from "react-intl";
+
+const getProposalTypes = () => [
+ {
+ key: "finishedVote",
+ label:
+ },
+ {
+ key: "approvedVote",
+ label:
+ },
+ {
+ key: "rejectedVote",
+ label:
+ }
+];
const ProposalsList = ({ finishedVote, tab }) => {
- const [filterTab, setFilterTab] = useState(tab);
+ const [selectedFilter, setSelectedFilter] = useState(tab);
const {
getProposalError,
inventoryError,
@@ -17,11 +33,7 @@ const ProposalsList = ({ finishedVote, tab }) => {
proposals,
state,
send
- } = useProposalsList(filterTab);
-
- const handleSetFilterTab = (tab) => {
- setFilterTab(tab);
- };
+ } = useProposalsList(selectedFilter);
// This part of the code is meant to solve the situation when the window
// is too tall, and the user can not trigger `loadMore` with scrolling.
@@ -55,37 +67,37 @@ const ProposalsList = ({ finishedVote, tab }) => {
);
case "success":
return proposals &&
- proposals[filterTab] &&
- proposals[filterTab].length ? (
-
+ proposals[selectedFilter] &&
+ proposals[selectedFilter].length ? (
+ <>
{tab === "finishedVote" && (
-
- )}
-
-
- {proposals[filterTab].map((v) => (
-
- ))}
+
+ setSelectedFilter(type.key)}
+ />
-
-
+
+
+ {proposals[selectedFilter].map((v) => (
+
+ ))}
+
+
-
-
-
{name}
- {linkedfrom && (
-
-
-
- )}
- {linkto && (
-
-
-
- )}
-
-
{token.substring(0, 7)}
-
-
- {(isVoting || isVotingFinished) && (
-
- )}
- {!isVotingFinished ? (
-
-
- }}
- />
-
- ) : (
-
- {quorumPass ? (
- linkto && !approved && voteResult !== "declined" ? (
-
- ) : (
- voteResult
- )
- ) : (
-
- )}
-
- )}
-
-
- {/* TODO: wrapp this 'header' in a component same header is used in VotingPrefs.jsx */}
-
-
-
-
-
-
- }
- placement="left">
-
-
-
-
+
+
+
+
+ }
+ placement="right">
+
+
+
+
+ }
+ description={
+