Skip to content

Commit 142b2e8

Browse files
OggyKUNhappylolonly
OggyKUN
and
happylolonly
authored
fix(senate 🏛️): fixes and improvements (#1153)
Co-authored-by: Cheslav Zhuravsky <[email protected]>
1 parent dbbb2c6 commit 142b2e8

25 files changed

+387
-485
lines changed

‎src/components/Tabs/Tabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type optionsProps = {
88
text?: string;
99
};
1010

11-
export type Props = {
11+
type Props = {
1212
options: optionsProps[];
1313
selected: string;
1414
};

‎src/components/governance/governance.jsx‎

Lines changed: 50 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ProposalStatus } from 'cosmjs-types/cosmos/gov/v1beta1/gov';
33
import { BASE_DENOM } from 'src/constants/config';
44
import { formatNumber } from '../../utils/search/utils';
55
import Tooltip from '../tooltip/tooltip';
6+
import styles from './styles.module.scss';
67

78
const submitted = require('../../image/ionicons_svg_ios-battery-full.svg');
89
const voting = require('../../image/ionicons_svg_ios-people.svg');
@@ -37,122 +38,68 @@ const toFixedNumber = (number, toFixed) => {
3738
export const Votes = ({ finalVotes }) => {
3839
try {
3940
return (
40-
<Pane
41-
backgroundColor="#ffffff14"
42-
borderRadius={5}
43-
overflow="hidden"
44-
height={10}
45-
width="100%"
46-
display="flex"
47-
>
48-
<Pane display="flex" height="100%" width={`${finalVotes.yes}%`}>
41+
<div className={styles.votesContainer}>
42+
<div
43+
className={`${styles.voteSection} ${styles.voteYes}`}
44+
style={{ width: `${toFixedNumber(finalVotes.yes, 2)}%` }}
45+
>
4946
<Tooltip
5047
placement="top"
51-
tooltip={<Pane>Yes: {toFixedNumber(finalVotes.yes, 2)}%</Pane>}
52-
>
53-
<Pane
54-
backgroundColor="#3ab793"
55-
display="flex"
56-
height="100%"
57-
width="100%"
58-
/>
59-
</Tooltip>
60-
</Pane>
61-
<Pane display="flex" height="100%" width={`${finalVotes.abstain}%`}>
48+
tooltip={<div>Yes: {toFixedNumber(finalVotes.yes, 2)}%</div>}
49+
contentStyle={{ flexGrow: 1 }}
50+
/>
51+
</div>
52+
<div
53+
className={`${styles.voteSection} ${styles.voteAbstain}`}
54+
style={{ width: `${toFixedNumber(finalVotes.abstain, 2)}%` }}
55+
>
6256
<Tooltip
6357
tooltip={`Abstain: ${toFixedNumber(finalVotes.abstain, 2)}%`}
6458
placement="top"
65-
>
66-
<Pane
67-
backgroundColor="#ccdcff"
68-
display="flex"
69-
height="100%"
70-
width="100%"
71-
// width={`${finalVotes.abstain}%`}
72-
/>
73-
</Tooltip>
74-
</Pane>
75-
<Pane display="flex" height="100%" width={`${finalVotes.no}%`}>
59+
contentStyle={{ flexGrow: 1 }}
60+
/>
61+
</div>
62+
<div
63+
className={`${styles.voteSection} ${styles.voteNo}`}
64+
style={{ width: `${toFixedNumber(finalVotes.no, 2)}%` }}
65+
>
7666
<Tooltip
7767
tooltip={`No: ${toFixedNumber(finalVotes.no, 2)}%`}
7868
placement="top"
79-
>
80-
<Pane
81-
backgroundColor="#ffcf65"
82-
display="flex"
83-
height="100%"
84-
width="100%"
85-
// width={`${finalVotes.no}%`}
86-
/>
87-
</Tooltip>
88-
</Pane>
89-
<Pane display="flex" height="100%" width={`${finalVotes.noWithVeto}%`}>
69+
contentStyle={{ flexGrow: 1 }}
70+
/>
71+
</div>
72+
<div
73+
className={`${styles.voteSection} ${styles.voteNoWithVeto}`}
74+
style={{ width: `${toFixedNumber(finalVotes.noWithVeto, 2)}%` }}
75+
>
9076
<Tooltip
91-
tooltip={`NoWithVeto: ${toFixedNumber(finalVotes.noWithVeto, 2)}%`}
77+
tooltip={`No With Veto: ${toFixedNumber(
78+
finalVotes.noWithVeto,
79+
2
80+
)}%`}
9281
placement="top"
93-
>
94-
<Pane
95-
backgroundColor="#fe8a8a"
96-
display="flex"
97-
height="100%"
98-
width="100%"
99-
// width={`${finalVotes.noWithVeto}%`}
100-
/>
101-
</Tooltip>
102-
</Pane>
103-
</Pane>
82+
contentStyle={{ flexGrow: 1 }}
83+
/>
84+
</div>
85+
</div>
10486
);
10587
} catch (error) {
10688
return (
107-
<Pane
108-
backgroundColor="#ffffff14"
109-
borderRadius={5}
110-
overflow="hidden"
111-
height={10}
112-
width="100%"
113-
display="flex"
114-
>
115-
<Pane display="flex" height="100%" width={0}>
116-
<Tooltip placement="top" tooltip="Yes: 0%">
117-
<Pane
118-
backgroundColor="#3ab793"
119-
display="flex"
120-
height="100%"
121-
width={0}
122-
/>
123-
</Tooltip>
124-
</Pane>
125-
<Pane display="flex" height="100%" width={0}>
126-
<Tooltip tooltip="Abstain: 0%" placement="top">
127-
<Pane
128-
backgroundColor="#ccdcff"
129-
display="flex"
130-
height="100%"
131-
width={0}
132-
/>
133-
</Tooltip>
134-
</Pane>
135-
<Pane display="flex" height="100%" width={0}>
136-
<Tooltip tooltip="No: 0%" placement="top">
137-
<Pane
138-
backgroundColor="#ffcf65"
139-
display="flex"
140-
height="100%"
141-
width={0}
142-
/>
143-
</Tooltip>
144-
</Pane>
145-
<Pane display="flex" height="100%" width={0}>
146-
<Tooltip tooltip="NoWithVeto: 0%" placement="top">
147-
<Pane
148-
backgroundColor="#fe8a8a"
149-
display="flex"
150-
height="100%"
151-
width={0}
152-
/>
153-
</Tooltip>
154-
</Pane>
155-
</Pane>
89+
<div className={styles.votesContainer}>
90+
<div className={styles.voteSection} style={{ width: '0%' }}>
91+
<Tooltip placement="top" tooltip="Yes: 0%" />
92+
</div>
93+
<div className={styles.voteSection} style={{ width: '0%' }}>
94+
<Tooltip tooltip="Abstain: 0%" placement="top" />
95+
</div>
96+
<div className={styles.voteSection} style={{ width: '0%' }}>
97+
<Tooltip tooltip="No: 0%" placement="top" />
98+
</div>
99+
<div className={styles.voteSection} style={{ width: '0%' }}>
100+
<Tooltip tooltip="No With Veto: 0%" placement="top" />
101+
</div>
102+
</div>
156103
);
157104
}
158105
};

‎src/components/governance/styles.module.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.votesContainer {
2+
background-color: #ffffff14;
3+
border-radius: 5px;
4+
overflow: hidden;
5+
height: 10px;
6+
width: 100%;
7+
display: flex;
8+
}
9+
10+
.voteSection {
11+
display: flex;
12+
height: 100%;
13+
}
14+
15+
.voteYes {
16+
background-color: #3ab793;
17+
}
18+
19+
.voteAbstain {
20+
background-color: #ccdcff;
21+
}
22+
23+
.voteNo {
24+
background-color: #ffcf65;
25+
}
26+
27+
.voteNoWithVeto {
28+
background-color: #fe8a8a;
29+
}

‎src/components/tooltip/tooltip.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type TooltipProps = {
1212
tooltip: React.ReactNode;
1313
hideBorder?: boolean;
1414
placement?: Popper.Config['placement'];
15+
contentStyle?: React.CSSProperties;
1516

1617
/**
1718
* @deprecated not use
@@ -24,6 +25,7 @@ function Tooltip({
2425
trigger = 'hover',
2526
tooltip,
2627
hideBorder = true,
28+
contentStyle = {},
2729
strategy = 'absolute',
2830
placement = 'top',
2931
}: TooltipProps) {
@@ -51,7 +53,9 @@ function Tooltip({
5153

5254
return (
5355
<>
54-
<div ref={setTriggerRef}>{children}</div>
56+
<div ref={setTriggerRef} style={contentStyle}>
57+
{children}
58+
</div>
5559

5660
{mounted && (
5761
<div
@@ -71,4 +75,5 @@ function Tooltip({
7175
</>
7276
);
7377
}
78+
7479
export default Tooltip;

‎src/containers/Search/SearchResults.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,24 @@ import { LinksTypeFilter, SortBy } from './types';
2121

2222
const sortByLSKey = 'search-sort';
2323

24-
function SearchResults() {
24+
type Props = {
25+
query?: string;
26+
noCommentText?: React.ReactNode;
27+
actionBarTextBtn?: string;
28+
};
29+
30+
function SearchResults({
31+
query: propQuery,
32+
noCommentText,
33+
actionBarTextBtn,
34+
}: Props) {
2535
const { query: q, cid } = useParams();
36+
const query = propQuery || q || cid || '';
2637
const isOnline = useIsOnline();
27-
const defaultMessage = isOnline
28-
? 'there are no answers or questions to this particle <br /> be the first and create one'
29-
: "ther's nothing to show, wait until you're online";
30-
31-
const query = q || cid || '';
3238

3339
const [keywordHash, setKeywordHash] = useState('');
3440
console.debug(query, keywordHash);
41+
3542
const [rankLink, setRankLink] = useState(null);
3643

3744
const [contentType, setContentType] = useState<{
@@ -46,6 +53,15 @@ function SearchResults() {
4653
);
4754
const [linksTypeFilter, setLinksTypeFilter] = useState(LinksTypeFilter.all);
4855

56+
const noResultsText = isOnline
57+
? noCommentText || (
58+
<>
59+
there are no answers or questions to this particle <br /> be the first
60+
and create one
61+
</>
62+
)
63+
: "ther's nothing to show, wait until you're online";
64+
4965
const {
5066
data: items,
5167
total,
@@ -161,13 +177,14 @@ function SearchResults() {
161177
<p>{error.message}</p>
162178
</Display>
163179
) : (
164-
<Display color="white">{defaultMessage}</Display>
180+
<Display color="white">{noResultsText}</Display>
165181
)}
166182
</div>
167183

168184
{!mobile && (
169185
<div className={styles.actionBar}>
170186
<ActionBarContainer
187+
textBtn={actionBarTextBtn}
171188
keywordHash={keywordHash}
172189
update={() => {
173190
refetch();

‎src/containers/application/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect } from 'react';
2-
import { Link, Outlet, useLocation } from 'react-router-dom';
2+
import { Link, Outlet, matchPath, useLocation } from 'react-router-dom';
33

44
import { AppDispatch } from 'src/redux/store';
55
import { initPocket, selectCurrentAddress } from 'src/redux/features/pocket';
@@ -67,6 +67,11 @@ function App() {
6767
// }, [communityLoaded, community, dispatch]);
6868

6969
useEffect(() => {
70+
// tabs
71+
if (matchPath(routes.senateProposal.path, location.pathname)) {
72+
return;
73+
}
74+
7075
window.scrollTo(0, 0);
7176
}, [location.pathname]);
7277

‎src/containers/governance/ProposalsDetailTableComments.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import SearchResults from '../Search/SearchResults';
2+
import { useParams } from 'react-router-dom';
3+
import { useBackend } from 'src/contexts/backend/backend';
4+
import { getIpfsHash } from 'src/utils/ipfs/helpers';
5+
import { encodeSlash } from '../../utils/utils';
6+
import { useState, useEffect } from 'react';
7+
8+
function ProposalsDetailTableComments() {
9+
const { proposalId } = useParams();
10+
const { ipfsApi } = useBackend();
11+
const proposalQuery = `bostrom proposal ${proposalId}`;
12+
const [processedQuery, setProcessedQuery] = useState('');
13+
const noComments = (
14+
<>
15+
there are no comments to this particle <br /> be the first and create one
16+
</>
17+
);
18+
useEffect(() => {
19+
const processQuery = async () => {
20+
const hash = await getIpfsHash(encodeSlash(proposalQuery));
21+
if (hash) {
22+
setProcessedQuery(hash);
23+
} else {
24+
const newHash = await ipfsApi.addContent(proposalQuery);
25+
setProcessedQuery(newHash);
26+
}
27+
};
28+
29+
processQuery();
30+
}, [proposalQuery, ipfsApi]);
31+
32+
return (
33+
<div style={{ marginTop: '20px' }}>
34+
<SearchResults
35+
query={processedQuery}
36+
noCommentText={noComments}
37+
actionBarTextBtn="Comment"
38+
/>
39+
</div>
40+
);
41+
}
42+
43+
export default ProposalsDetailTableComments;

0 commit comments

Comments
 (0)