fix(senate 🏛️): fixes and improvements (#1153)

Co-authored-by: Cheslav Zhuravsky <[email protected]>
cybercongress · Jun 1, 2024 · 142b2e8 · 142b2e8
1 parent dbbb2c6
commit 142b2e8
Show file tree

Hide file tree

Showing 25 changed files with 387 additions and 485 deletions.
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -8,7 +8,7 @@ type optionsProps = {
   text?: string;
 };
 
-export type Props = {
+type Props = {
   options: optionsProps[];
   selected: string;
 };

diff --git a/src/components/governance/governance.jsx b/src/components/governance/governance.jsx
@@ -3,6 +3,7 @@ import { ProposalStatus } from 'cosmjs-types/cosmos/gov/v1beta1/gov';
 import { BASE_DENOM } from 'src/constants/config';
 import { formatNumber } from '../../utils/search/utils';
 import Tooltip from '../tooltip/tooltip';
+import styles from './styles.module.scss';
 
 const submitted = require('../../image/ionicons_svg_ios-battery-full.svg');
 const voting = require('../../image/ionicons_svg_ios-people.svg');
@@ -37,122 +38,68 @@ const toFixedNumber = (number, toFixed) => {
 export const Votes = ({ finalVotes }) => {
   try {
     return (
-      <Pane
-        backgroundColor="#ffffff14"
-        borderRadius={5}
-        overflow="hidden"
-        height={10}
-        width="100%"
-        display="flex"
-      >
-        <Pane display="flex" height="100%" width={`${finalVotes.yes}%`}>
+      <div className={styles.votesContainer}>
+        <div
+          className={`${styles.voteSection} ${styles.voteYes}`}
+          style={{ width: `${toFixedNumber(finalVotes.yes, 2)}%` }}
+        >
           <Tooltip
             placement="top"
-            tooltip={<Pane>Yes: {toFixedNumber(finalVotes.yes, 2)}%</Pane>}
-          >
-            <Pane
-              backgroundColor="#3ab793"
-              display="flex"
-              height="100%"
-              width="100%"
-            />
-          </Tooltip>
-        </Pane>
-        <Pane display="flex" height="100%" width={`${finalVotes.abstain}%`}>
+            tooltip={<div>Yes: {toFixedNumber(finalVotes.yes, 2)}%</div>}
+            contentStyle={{ flexGrow: 1 }}
+          />
+        </div>
+        <div
+          className={`${styles.voteSection} ${styles.voteAbstain}`}
+          style={{ width: `${toFixedNumber(finalVotes.abstain, 2)}%` }}
+        >
           <Tooltip
             tooltip={`Abstain: ${toFixedNumber(finalVotes.abstain, 2)}%`}
             placement="top"
-          >
-            <Pane
-              backgroundColor="#ccdcff"
-              display="flex"
-              height="100%"
-              width="100%"
-              // width={`${finalVotes.abstain}%`}
-            />
-          </Tooltip>
-        </Pane>
-        <Pane display="flex" height="100%" width={`${finalVotes.no}%`}>
+            contentStyle={{ flexGrow: 1 }}
+          />
+        </div>
+        <div
+          className={`${styles.voteSection} ${styles.voteNo}`}
+          style={{ width: `${toFixedNumber(finalVotes.no, 2)}%` }}
+        >
           <Tooltip
             tooltip={`No: ${toFixedNumber(finalVotes.no, 2)}%`}
             placement="top"
-          >
-            <Pane
-              backgroundColor="#ffcf65"
-              display="flex"
-              height="100%"
-              width="100%"
-              // width={`${finalVotes.no}%`}
-            />
-          </Tooltip>
-        </Pane>
-        <Pane display="flex" height="100%" width={`${finalVotes.noWithVeto}%`}>
+            contentStyle={{ flexGrow: 1 }}
+          />
+        </div>
+        <div
+          className={`${styles.voteSection} ${styles.voteNoWithVeto}`}
+          style={{ width: `${toFixedNumber(finalVotes.noWithVeto, 2)}%` }}
+        >
           <Tooltip
-            tooltip={`NoWithVeto: ${toFixedNumber(finalVotes.noWithVeto, 2)}%`}
+            tooltip={`No With Veto: ${toFixedNumber(
+              finalVotes.noWithVeto,
+              2
+            )}%`}
             placement="top"
-          >
-            <Pane
-              backgroundColor="#fe8a8a"
-              display="flex"
-              height="100%"
-              width="100%"
-              // width={`${finalVotes.noWithVeto}%`}
-            />
-          </Tooltip>
-        </Pane>
-      </Pane>
+            contentStyle={{ flexGrow: 1 }}
+          />
+        </div>
+      </div>
     );
   } catch (error) {
     return (
-      <Pane
-        backgroundColor="#ffffff14"
-        borderRadius={5}
-        overflow="hidden"
-        height={10}
-        width="100%"
-        display="flex"
-      >
-        <Pane display="flex" height="100%" width={0}>
-          <Tooltip placement="top" tooltip="Yes: 0%">
-            <Pane
-              backgroundColor="#3ab793"
-              display="flex"
-              height="100%"
-              width={0}
-            />
-          </Tooltip>
-        </Pane>
-        <Pane display="flex" height="100%" width={0}>
-          <Tooltip tooltip="Abstain: 0%" placement="top">
-            <Pane
-              backgroundColor="#ccdcff"
-              display="flex"
-              height="100%"
-              width={0}
-            />
-          </Tooltip>
-        </Pane>
-        <Pane display="flex" height="100%" width={0}>
-          <Tooltip tooltip="No: 0%" placement="top">
-            <Pane
-              backgroundColor="#ffcf65"
-              display="flex"
-              height="100%"
-              width={0}
-            />
-          </Tooltip>
-        </Pane>
-        <Pane display="flex" height="100%" width={0}>
-          <Tooltip tooltip="NoWithVeto: 0%" placement="top">
-            <Pane
-              backgroundColor="#fe8a8a"
-              display="flex"
-              height="100%"
-              width={0}
-            />
-          </Tooltip>
-        </Pane>
-      </Pane>
+      <div className={styles.votesContainer}>
+        <div className={styles.voteSection} style={{ width: '0%' }}>
+          <Tooltip placement="top" tooltip="Yes: 0%" />
+        </div>
+        <div className={styles.voteSection} style={{ width: '0%' }}>
+          <Tooltip tooltip="Abstain: 0%" placement="top" />
+        </div>
+        <div className={styles.voteSection} style={{ width: '0%' }}>
+          <Tooltip tooltip="No: 0%" placement="top" />
+        </div>
+        <div className={styles.voteSection} style={{ width: '0%' }}>
+          <Tooltip tooltip="No With Veto: 0%" placement="top" />
+        </div>
+      </div>
     );
   }
 };

diff --git a/src/components/governance/styles.module.scss b/src/components/governance/styles.module.scss
@@ -0,0 +1,29 @@
+.votesContainer {
+  background-color: #ffffff14;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 10px;
+  width: 100%;
+  display: flex;
+}
+
+.voteSection {
+  display: flex;
+  height: 100%;
+}
+
+.voteYes {
+  background-color: #3ab793;
+}
+
+.voteAbstain {
+  background-color: #ccdcff;
+}
+
+.voteNo {
+  background-color: #ffcf65;
+}
+
+.voteNoWithVeto {
+  background-color: #fe8a8a;
+}
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -12,6 +12,7 @@ export type TooltipProps = {
   tooltip: React.ReactNode;
   hideBorder?: boolean;
   placement?: Popper.Config['placement'];
+  contentStyle?: React.CSSProperties;
 
   /**
    * @deprecated not use
@@ -24,6 +25,7 @@ function Tooltip({
   trigger = 'hover',
   tooltip,
   hideBorder = true,
+  contentStyle = {},
   strategy = 'absolute',
   placement = 'top',
 }: TooltipProps) {
@@ -51,7 +53,9 @@ function Tooltip({
 
   return (
     <>
-      <div ref={setTriggerRef}>{children}</div>
+      <div ref={setTriggerRef} style={contentStyle}>
+        {children}
+      </div>
 
       {mounted && (
         <div
@@ -71,4 +75,5 @@ function Tooltip({
     </>
   );
 }
+
 export default Tooltip;
diff --git a/src/containers/Search/SearchResults.tsx b/src/containers/Search/SearchResults.tsx
@@ -21,17 +21,24 @@ import { LinksTypeFilter, SortBy } from './types';
 
 const sortByLSKey = 'search-sort';
 
-function SearchResults() {
+type Props = {
+  query?: string;
+  noCommentText?: React.ReactNode;
+  actionBarTextBtn?: string;
+};
+
+function SearchResults({
+  query: propQuery,
+  noCommentText,
+  actionBarTextBtn,
+}: Props) {
   const { query: q, cid } = useParams();
+  const query = propQuery || q || cid || '';
   const isOnline = useIsOnline();
-  const defaultMessage = isOnline
-    ? 'there are no answers or questions to this particle <br /> be the first and create one'
-    : "ther's nothing to show, wait until you're online";
-
-  const query = q || cid || '';
 
   const [keywordHash, setKeywordHash] = useState('');
   console.debug(query, keywordHash);
+
   const [rankLink, setRankLink] = useState(null);
 
   const [contentType, setContentType] = useState<{
@@ -46,6 +53,15 @@ function SearchResults() {
   );
   const [linksTypeFilter, setLinksTypeFilter] = useState(LinksTypeFilter.all);
 
+  const noResultsText = isOnline
+    ? noCommentText || (
+        <>
+          there are no answers or questions to this particle <br /> be the first
+          and create one
+        </>
+      )
+    : "ther's nothing to show, wait until you're online";
+
   const {
     data: items,
     total,
@@ -161,13 +177,14 @@ function SearchResults() {
             <p>{error.message}</p>
           </Display>
         ) : (
-          <Display color="white">{defaultMessage}</Display>
+          <Display color="white">{noResultsText}</Display>
         )}
       </div>
 
       {!mobile && (
         <div className={styles.actionBar}>
           <ActionBarContainer
+            textBtn={actionBarTextBtn}
             keywordHash={keywordHash}
             update={() => {
               refetch();

diff --git a/src/containers/application/App.tsx b/src/containers/application/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Link, Outlet, useLocation } from 'react-router-dom';
+import { Link, Outlet, matchPath, useLocation } from 'react-router-dom';
 
 import { AppDispatch } from 'src/redux/store';
 import { initPocket, selectCurrentAddress } from 'src/redux/features/pocket';
@@ -67,6 +67,11 @@ function App() {
   // }, [communityLoaded, community, dispatch]);
 
   useEffect(() => {
+    // tabs
+    if (matchPath(routes.senateProposal.path, location.pathname)) {
+      return;
+    }
+
     window.scrollTo(0, 0);
   }, [location.pathname]);
 

diff --git a/src/containers/governance/ProposalsDetailTableComments.tsx b/src/containers/governance/ProposalsDetailTableComments.tsx
@@ -0,0 +1,43 @@
+import SearchResults from '../Search/SearchResults';
+import { useParams } from 'react-router-dom';
+import { useBackend } from 'src/contexts/backend/backend';
+import { getIpfsHash } from 'src/utils/ipfs/helpers';
+import { encodeSlash } from '../../utils/utils';
+import { useState, useEffect } from 'react';
+
+function ProposalsDetailTableComments() {
+  const { proposalId } = useParams();
+  const { ipfsApi } = useBackend();
+  const proposalQuery = `bostrom proposal ${proposalId}`;
+  const [processedQuery, setProcessedQuery] = useState('');
+  const noComments = (
+    <>
+      there are no comments to this particle <br /> be the first and create one
+    </>
+  );
+  useEffect(() => {
+    const processQuery = async () => {
+      const hash = await getIpfsHash(encodeSlash(proposalQuery));
+      if (hash) {
+        setProcessedQuery(hash);
+      } else {
+        const newHash = await ipfsApi.addContent(proposalQuery);
+        setProcessedQuery(newHash);
+      }
+    };
+
+    processQuery();
+  }, [proposalQuery, ipfsApi]);
+
+  return (
+    <div style={{ marginTop: '20px' }}>
+      <SearchResults
+        query={processedQuery}
+        noCommentText={noComments}
+        actionBarTextBtn="Comment"
+      />
+    </div>
+  );
+}
+
+export default ProposalsDetailTableComments;