fix: ui bugs (#54)

* fix: estimated state text formatting * fix: voters list and voters modal styles * fix: added representetive tooltip info * fix: add bsc chain
bgd-labs · Jan 18, 2024 · 2d46409 · 2d46409 · github-actions · Jan 18, 2024
1 parent be5bf0e
commit 2d46409
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "react": "18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.0",
+    "react-custom-scrollbars-2": "^4.5.0",
     "react-dom": "18.2.0",
     "react-emoji-render": "^2.0.1",
     "react-final-form": "^6.5.9",
@@ -85,6 +86,7 @@
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@next/eslint-plugin-next": "^14.0.4",
     "@svgr/webpack": "^8.1.0",
+    "@types/dom-css": "^2.1.1",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.11.4",
     "@types/nprogress": "^0.2.3",

diff --git a/src/proposals/components/ProposalEstimatedStatus.tsx b/src/proposals/components/ProposalEstimatedStatus.tsx
@@ -26,10 +26,15 @@ export function ProposalEstimatedStatus({
   const { getDetailedProposalsData } = useStore();
 
   const statusTextStringArray = estimatedStatus.split(' ');
-  statusTextStringArray.splice(-1);
+  statusTextStringArray.splice(
+    estimatedStatus === ProposalEstimatedState.Active ? -3 : -1,
+  );
   const statusText = statusTextStringArray.join(' ');
   const statusStringArray = estimatedStatus.split(' ');
-  const status = statusStringArray[statusStringArray.length - 1];
+  const status =
+    estimatedStatus === ProposalEstimatedState.Active
+      ? statusStringArray.splice(1).join(' ')
+      : statusStringArray[statusStringArray.length - 1];
 
   return (
     <Box

diff --git a/src/proposals/components/proposal/VotersList.tsx b/src/proposals/components/proposal/VotersList.tsx
@@ -192,7 +192,7 @@ export function VotersListViewAllButton({
             transition: 'all 0.2s ease',
             hover: { color: theme.palette.$text },
           }}>
-          {texts.proposals.votersListShowAll} {voters.length}
+          {texts.proposals.votersListShowAll}
         </Box>
       </button>
     </Box>

diff --git a/src/proposals/components/proposal/VotersModal.tsx b/src/proposals/components/proposal/VotersModal.tsx
@@ -1,6 +1,8 @@
 import { VotersData } from '@bgd-labs/aave-governance-ui-helpers';
 import { Box, styled, useTheme } from '@mui/system';
-import React from 'react';
+import css from 'dom-css';
+import React, { useRef } from 'react';
+import Scrollbars, { positionValues } from 'react-custom-scrollbars-2';
 import { zeroAddress } from 'viem';
 
 import { useStore } from '../../../store';
@@ -16,11 +18,12 @@ import { VoteBar } from '../VoteBar';
 
 const BarWrapper = styled('div')(({ theme }) => ({
   position: 'sticky',
-  top: -32,
+  top: -50,
+  paddingTop: 20,
   backgroundColor: theme.palette.$paper,
   zIndex: 2,
   marginBottom: 24,
-  [theme.breakpoints.up('sm')]: { top: 0 },
+  [theme.breakpoints.up('sm')]: { top: 0, paddingTop: 0 },
 }));
 
 const ListItem = styled('div')(({ theme }) => ({
@@ -103,44 +106,84 @@ export function VotersModal({
 
   const VotersTable = ({ type }: { type: 'for' | 'against' }) => {
     const isFor = type === 'for';
+    const bottomShadowRef = useRef<HTMLDivElement>(Box as any);
+    const handleUpdate = (values: positionValues) => {
+      const { scrollTop, scrollHeight, clientHeight } = values;
+      const bottomScrollTop = scrollHeight - clientHeight;
+      const shadowTopOpacity =
+        (1 / 20) *
+        (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
+      css(bottomShadowRef.current, { opacity: shadowTopOpacity });
+    };
 
     return (
       <Box
         sx={{
-          display: 'none',
-          [theme.breakpoints.up('sm')]: {
-            display: 'block',
-            width: !(isFor ? votersAgainst : votersFor).length
-              ? '70%'
-              : 'calc(50% - 12px)',
-            margin: !(isFor ? votersAgainst : votersFor).length
-              ? '0 auto'
-              : 'unset',
-          },
+          display: 'block',
+          width: !(isFor ? votersAgainst : votersFor).length
+            ? '70%'
+            : 'calc(50% - 12px)',
+          margin: !(isFor ? votersAgainst : votersFor).length
+            ? '0 auto'
+            : 'unset',
         }}>
-        <BarWrapper>
-          <VoteBar
-            type={type}
-            value={isFor ? forVotes : againstVotes}
-            requiredValue={isFor ? requiredForVotes : requiredAgainstVotes}
-            linePercent={isFor ? forPercent : againstPercent}
-            isFinished={isFinished}
+        <Box sx={{ position: 'relative' }}>
+          <Scrollbars
+            style={{ width: '100%' }}
+            onUpdate={handleUpdate}
+            autoHeight
+            universal
+            autoHeightMin={100}
+            autoHeightMax={370}>
+            <Box sx={{ position: 'relative', pr: 16 }}>
+              <BarWrapper>
+                <VoteBar
+                  type={type}
+                  value={isFor ? forVotes : againstVotes}
+                  requiredValue={
+                    isFor ? requiredForVotes : requiredAgainstVotes
+                  }
+                  linePercent={isFor ? forPercent : againstPercent}
+                  isFinished={isFinished}
+                />
+              </BarWrapper>
+
+              <ListItem>
+                <Box component="p" sx={{ typography: 'headline' }}>
+                  {texts.proposals.voters} (
+                  {(type === 'for' ? votersFor : votersAgainst).length})
+                </Box>
+                <Box component="p" sx={{ typography: 'headline' }}>
+                  {texts.proposals.votersListVotingPower}
+                </Box>
+              </ListItem>
+              {(type === 'for' ? votersFor : votersAgainst).map(
+                (vote, index) => (
+                  <ListItem key={index}>
+                    <ListItemAddress vote={vote} />
+                    <FormattedNumber
+                      value={vote.votingPower}
+                      visibleDecimals={3}
+                    />
+                  </ListItem>
+                ),
+              )}
+            </Box>
+          </Scrollbars>
+
+          <Box
+            ref={bottomShadowRef}
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: 10,
+              background:
+                'linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%)',
+            }}
           />
-        </BarWrapper>
-        <ListItem>
-          <Box component="p" sx={{ typography: 'headline' }}>
-            {texts.proposals.voters}
-          </Box>
-          <Box component="p" sx={{ typography: 'headline' }}>
-            {texts.proposals.votersListVotingPower}
-          </Box>
-        </ListItem>
-        {(type === 'for' ? votersFor : votersAgainst).map((vote, index) => (
-          <ListItem key={index}>
-            <ListItemAddress vote={vote} />
-            <FormattedNumber value={vote.votingPower} visibleDecimals={3} />
-          </ListItem>
-        ))}
+        </Box>
       </Box>
     );
   };
@@ -166,19 +209,7 @@ export function VotersModal({
           }}>
           {title}
         </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            width: '100%',
-            flexDirection: 'column',
-            [theme.breakpoints.up('sm')]: {
-              height: 320,
-              overflowY: 'auto',
-              flexDirection: 'row',
-              alignItems: 'flex-start',
-              justifyContent: 'space-between',
-            },
-          }}>
+        <Box>
           <Box sx={{ [theme.breakpoints.up('sm')]: { display: 'none' } }}>
             <BarWrapper>
               {!!votersFor.length && (
@@ -212,7 +243,7 @@ export function VotersModal({
                       display: 'inline-flex',
                       justifyContent: 'flex-start',
                     }}>
-                    {texts.proposals.voters}
+                    {texts.proposals.voters} ({voters.length})
                   </Box>
                   <Box
                     component="p"
@@ -271,8 +302,19 @@ export function VotersModal({
             )}
           </Box>
 
-          {!!votersFor.length && <VotersTable type="for" />}
-          {!!votersAgainst.length && <VotersTable type="against" />}
+          <Box
+            sx={{
+              display: 'none',
+              [theme.breakpoints.up('sm')]: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                justifyContent: 'space-between',
+              },
+            }}>
+            {!!votersFor.length && <VotersTable type="for" />}
+            {!!votersAgainst.length && <VotersTable type="against" />}
+          </Box>
         </Box>
       </Box>
     </BasicModal>

diff --git a/src/utils/appConfig.ts b/src/utils/appConfig.ts
@@ -4,7 +4,7 @@ import {
   payloadsControllerChainIds,
   votingMachineChainIds,
 } from '@bgd-labs/aave-governance-ui-helpers';
-import { avalanche, bsc, goerli, polygon, sepolia } from 'viem/chains';
+import { avalanche, goerli, polygon, sepolia } from 'viem/chains';
 
 export const isForIPFS = process.env.NEXT_PUBLIC_DEPLOY_FOR_IPFS === 'true';
 export const isTermsAndConditionsVisible =
@@ -17,9 +17,7 @@ export const WC_PROJECT_ID =
 export const appUsedNetworks: number[] = [
   ...votingMachineChainIds[coreName],
   ...payloadsControllerChainIds[coreName],
-]
-  .filter((value, index, self) => self.indexOf(value) === index)
-  .filter((value) => value !== bsc.id); // temporary
+].filter((value, index, self) => self.indexOf(value) === index);
 
 export const gelatoApiKeys: Record<number, string> = {
   [polygon.id]: 'eyUjscMpge_d3qScFe2ueftb95FDZ1eChyDJGqPx2uQ_',

diff --git a/src/web3/components/wallet/RepresentingButton.tsx b/src/web3/components/wallet/RepresentingButton.tsx
@@ -30,6 +30,7 @@ export function RepresentingButton() {
   const [isAvatarExists, setIsAvatarExists] = useState<boolean | undefined>(
     undefined,
   );
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
   useEffect(() => {
     const activeAddress = representative.address;
@@ -45,6 +46,11 @@ export function RepresentingButton() {
     }
   }, [ensData, representative.address]);
 
+  useEffect(() => {
+    setIsTooltipVisible(true);
+    setTimeout(() => setIsTooltipVisible(false), 2000);
+  }, []);
+
   return (
     <Box
       sx={{
@@ -102,7 +108,12 @@ export function RepresentingButton() {
         color="light"
         tooltipCss={{
           display: 'none',
-          [theme.breakpoints.up('md')]: { display: 'block' },
+          [theme.breakpoints.up('md')]: {
+            display: 'block',
+            opacity: isTooltipVisible ? 1 : undefined,
+            zIndex: isTooltipVisible ? 1 : undefined,
+            visibility: isTooltipVisible ? 'visible' : undefined,
+          },
         }}
         tooltipContent={
           <Box