diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx index deff1658c2..2df91d3f91 100644 --- a/packages/page-referenda/src/Referenda/Submit.tsx +++ b/packages/page-referenda/src/Referenda/Submit.tsx @@ -196,11 +196,11 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }: onChange={setTrack} options={trackOpts} /> - {trackInfo?.text && ( + {false && trackInfo?.text && ( ('track overview')} - value={trackInfo.text} + value={trackInfo?.text} /> )} {!trackInfo?.origin && ( diff --git a/packages/page-referenda/src/Referenda/index.tsx b/packages/page-referenda/src/Referenda/index.tsx index 262c0c2c0f..4dcd87490e 100644 --- a/packages/page-referenda/src/Referenda/index.tsx +++ b/packages/page-referenda/src/Referenda/index.tsx @@ -3,11 +3,11 @@ import type { PalletReferenda, PalletVote, ReferendaGroup } from '../types'; -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import styled from 'styled-components'; import AddPreimage from '@polkadot/app-preimages/Preimages/Add'; -import { Button, Table } from '@polkadot/react-components'; +import { Button, Dropdown, Table } from '@polkadot/react-components'; import { useAccounts, useApi } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; @@ -33,6 +33,28 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props): const { allAccounts } = useAccounts(); const [grouped, tracks] = useReferenda(palletReferenda); const summary = useSummary(palletReferenda, grouped); + const [trackSelected, setTrackSelected] = useState(-1); + + const trackOpts = useMemo( + () => [{ text: t('All active/available tracks'), value: -1 }].concat( + grouped + .map(({ trackId, trackName }) => ({ + text: trackName, + value: trackId ? trackId.toNumber() : -1 + })) + .filter((v): v is { text: string, value: number } => !!v.text) + ), + [grouped, t] + ); + + const filtered = useMemo( + () => ( + trackSelected === -1 + ? grouped + : grouped.filter(({ trackId }) => !!trackId && trackId.eqn(trackSelected)) + ) || [{ referenda: [] }], + [grouped, trackSelected] + ); const isMember = useMemo( () => !members || allAccounts.some((a) => members.includes(a)), @@ -43,6 +65,13 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props):
+ ('selected track')} + onChange={setTrackSelected} + options={trackOpts} + value={trackSelected} + /> - {grouped.map(({ referenda, trackId, trackName }: ReferendaGroup) => ( + {filtered.map(({ referenda, trackId, trackName }: ReferendaGroup) => ( ('No active referenda')} header={[ @@ -87,4 +116,13 @@ export default React.memo(styled(Referenda)` padding-left: 1.5rem; text-overflow: ellipsis; } + + .ui--Dropdown.topDropdown { + min-width: 25rem; + padding-left: 0; + + > label { + left: 1.55rem !important; + } + } `); diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx index b19439cbe8..3729f59c05 100644 --- a/packages/react-components/src/Button/Group.tsx +++ b/packages/react-components/src/Button/Group.tsx @@ -40,7 +40,7 @@ export default React.memo(styled(ButtonGroup)` display: inline-block; } - .ui--ToggleGroup { + .ui--ToggleGroup, .ui--Dropdown { float: left; } `);