Feedback testnet deployment (#407)

* fix: modal in edit profile page * fix: edit page * ci: reactive gov e2e * ref: removing dev var * ci: switching to firefox * ci: commenting e2e out * feat: added gradient for overlowing delegation pitch * feat: worked on edit page * feat: added connect button to my votes page * fix: table border
Synthetixio · Aug 23, 2024 · b2358db · b2358db
1 parent 024e0df
commit b2358db
Show file tree

Hide file tree

Showing 31 changed files with 441 additions and 302 deletions.
diff --git a/.github/workflows/release-governance.yml b/.github/workflows/release-governance.yml
@@ -31,7 +31,7 @@ jobs:
       - run: yarn workspaces focus @snx-v3/governance
         working-directory: v3ui
 
-      - run: yarn workspace @snx-v3/governance build TESTNET=true
+      - run: yarn workspace @snx-v3/governance build
         working-directory: v3ui
 
       - run: rm -rf ./governance/*

diff --git a/governance/cypress/package.json b/governance/cypress/package.json
@@ -5,7 +5,7 @@
   "version": "0.0.1",
   "scripts": {
     "anvil:snax": "anvil --fork-url https://testnet.snaxchain.io --fork-block-number 296528",
-    "e2e": "cypress open --e2e --browser chrome"
+    "e2e": "cypress open --e2e --browser firefox"
   },
   "devDependencies": {
     "@chakra-ui/react": "^2.8.2",

diff --git a/governance/ui/src/components/CouncilCard/CouncilCard.tsx b/governance/ui/src/components/CouncilCard/CouncilCard.tsx
@@ -137,13 +137,10 @@ export function CouncilCard({ council }: CouncilCardProps) {
               mb="1"
               onClick={(e) => {
                 e.stopPropagation();
-                if (
-                  nominationInformation?.isNominated &&
-                  nominationInformation.council.slug === council.slug
-                ) {
-                  navigate(`/councils/${council.slug}?editNomination=true`);
+                if (!activeWallet?.address) {
+                  navigate(`/councils/${council.slug}`);
                 } else {
-                  navigate(`/councils/${council.slug}?nominate=true`);
+                  navigate(`/councils/${council.slug}?view=${activeWallet?.address}`);
                 }
               }}
             >

diff --git a/governance/ui/src/components/CouncilNominees/CouncilNominees.tsx b/governance/ui/src/components/CouncilNominees/CouncilNominees.tsx
@@ -203,16 +203,13 @@ export default function CouncilNominees({ activeCouncil }: { activeCouncil: Coun
                       : a.username.localeCompare(b.username) * -1;
                   }
                   return sortConfig[0]
-                    ? a?.address.localeCompare(b.address)
-                    : a?.address.localeCompare(b.address) * -1;
+                    ? a?.address.localeCompare(b.address) * -1
+                    : a?.address.localeCompare(b.address);
                 });
               }}
             >
               Name {sortConfig[1] === 'name' && <SortArrows up={sortConfig[0]} />}
-              {/* @ts-ignore */}
-              {sortConfig[1] === 'start' && sortConfig[1] !== 'name' && (
-                <SortArrows up={sortConfig[0]} />
-              )}
+              {sortConfig[1] === 'start' && <SortArrows up={sortConfig[0]} />}
             </Th>
             {councilPeriod === '2' && (
               <Th
@@ -256,7 +253,6 @@ export default function CouncilNominees({ activeCouncil }: { activeCouncil: Coun
               <UserTableView
                 place={index}
                 user={councilNominee!}
-                isNomination
                 activeCouncil={activeCouncil}
                 key={councilNominee.address.concat('council-nominees')}
               />

diff --git a/governance/ui/src/components/EditNomination/EditNomination.tsx b/governance/ui/src/components/EditNomination/EditNomination.tsx
@@ -44,7 +44,13 @@ export default function EditNomination({ activeCouncil, ...props }: EditNominati
       {...props}
     >
       <IconButton
-        onClick={() => navigate(`/councils/${activeCouncil}`)}
+        onClick={() => {
+          if (showConfirm) {
+            setShowConfirm(false);
+          } else {
+            navigate(`/councils/${activeCouncil}`);
+          }
+        }}
         size="xs"
         aria-label="close button"
         icon={<CloseIcon />}

diff --git a/governance/ui/src/components/EditNomination/EditNominationConfirmation.tsx b/governance/ui/src/components/EditNomination/EditNominationConfirmation.tsx
@@ -32,7 +32,7 @@ export default function EditNominationConfirmation({
   useEffect(() => {
     if (isSuccess) {
       setShowConfirm(false);
-      navigate(`/councils/${selectedCouncil}?nominate=false`);
+      navigate(`/councils/${selectedCouncil ? selectedCouncil : 'spartan'}?nominate=false`);
     }
   }, [isSuccess, setShowConfirm, navigate, selectedCouncil]);
 

diff --git a/governance/ui/src/components/EditNomination/EditNominationSelect.tsx b/governance/ui/src/components/EditNomination/EditNominationSelect.tsx
@@ -106,6 +106,9 @@ export default function EditNominationSelect({
               padding="2"
               alignItems="center"
               mb="2"
+              _hover={{
+                bg: 'linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%), #0B0B22;',
+              }}
             >
               <Flex
                 borderRadius="50%"
@@ -140,6 +143,9 @@ export default function EditNominationSelect({
           alignItems="center"
           mb="2"
           data-cy="withdraw-vote-select"
+          _hover={{
+            bg: 'linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%), #0B0B22;',
+          }}
         >
           <Flex
             borderRadius="50%"

diff --git a/governance/ui/src/components/Header/NetworkController.tsx b/governance/ui/src/components/Header/NetworkController.tsx
@@ -177,7 +177,7 @@ export function NetworkController() {
                 fontSize="xs"
                 userSelect="none"
                 data-cy="header-wallet-address-display"
-                maxW="200px"
+                maxW="80px"
                 textOverflow="ellipsis"
                 whiteSpace="nowrap"
                 overflow="hidden"

diff --git a/governance/ui/src/components/NominateSelf/NominateSelf.tsx b/governance/ui/src/components/NominateSelf/NominateSelf.tsx
@@ -193,6 +193,9 @@ export default function NominateSelf({ activeCouncil, ...props }: NominateSelfPr
                 alignItems="center"
                 mb="2"
                 data-cy={`council-nomination-select-${council.slug}`}
+                _hover={{
+                  bg: 'linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%), #0B0B22;',
+                }}
               >
                 <Flex
                   borderRadius="50%"

diff --git a/governance/ui/src/components/UserListItem/UserListItem.tsx b/governance/ui/src/components/UserListItem/UserListItem.tsx
@@ -59,7 +59,7 @@ export default function UserListItem({
           textOverflow="ellipsis"
           whiteSpace="nowrap"
           overflow="hidden"
-          maxW="300px"
+          maxW="150px"
         >
           {user?.username ? user.username : prettyString(user?.address || '')}
         </Text>
@@ -70,7 +70,7 @@ export default function UserListItem({
             Nominee
           </Badge>
         )}
-      {councilPeriod === '1' ? (
+      {councilPeriod === '1' && isNominatedFetched && !!nominationInformation ? (
         <Button
           ml="auto"
           rounded="base"
@@ -116,19 +116,21 @@ export default function UserListItem({
           {nominationInformation?.isNominated ? 'View' : 'Nominate Self'}
         </Button>
       ) : (
-        <Button
-          ml="auto"
-          size="xs"
-          variant="outline"
-          colorScheme="gray"
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/councils/${activeCouncil}?view=${address}`);
-          }}
-          color="white"
-        >
-          {nominationInformation?.isNominated ? 'View' : 'NominateSelf'}
-        </Button>
+        isNominatedFetched && (
+          <Button
+            ml="auto"
+            size="xs"
+            variant="outline"
+            colorScheme="gray"
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/councils/${activeCouncil}?view=${address}`);
+            }}
+            color="white"
+          >
+            {nominationInformation?.isNominated ? 'View' : 'Nominate Self'}
+          </Button>
+        )
       )}
     </Flex>
   );

diff --git a/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx b/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx
@@ -1,5 +1,5 @@
 import { CloseIcon, CopyIcon } from '@chakra-ui/icons';
-import { Flex, IconButton, Button, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, IconButton, Button, Text, Tooltip, Box } from '@chakra-ui/react';
 import { prettyString } from '@snx-v3/format';
 import { Socials } from '../Socials';
 import { GetUserDetails } from '../../queries/useGetUserDetailsQuery';
@@ -9,7 +9,7 @@ import { useVoteContext } from '../../context/VoteContext';
 import { ProfilePicture } from './ProfilePicture';
 import { EditIcon, ShareIcon } from '../Icons';
 import { useGetUserBallot, useNetwork } from '../../queries';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { voteCardState } from '../../state/vote-card';
 
@@ -38,6 +38,8 @@ export const UserProfileDetails = ({
   const { dispatch, state } = useVoteContext();
   const navigate = useNavigate();
   const { data: ballot } = useGetUserBallot(activeCouncil);
+  const elementRef = useRef<HTMLParagraphElement | null>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
 
   const isSelected = state[networkForState]
     ? state[networkForState][activeCouncil]?.toLowerCase() === userData?.address?.toLowerCase()
@@ -47,6 +49,45 @@ export const UserProfileDetails = ({
     !!ballot?.votedCandidates &&
     ballot?.votedCandidates[0]?.toLowerCase() === userData?.address?.toLowerCase();
 
+  useEffect(() => {
+    const checkOverflow = () => {
+      const el = elementRef.current;
+      if (el) {
+        const isOverflowing = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+        setIsOverflowing(isOverflowing);
+      }
+    };
+    checkOverflow();
+    window.addEventListener('resize', checkOverflow);
+    return () => {
+      window.removeEventListener('resize', checkOverflow);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (elementRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = elementRef.current;
+        if (scrollTop + clientHeight >= scrollHeight - 10) {
+          setIsOverflowing(false);
+        } else {
+          setIsOverflowing(true);
+        }
+      }
+    };
+
+    const refCurrent = elementRef.current;
+    if (refCurrent) {
+      refCurrent.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      if (refCurrent) {
+        refCurrent.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
+
   return (
     <>
       <Flex alignItems="center" mb="4" position="relative">
@@ -90,7 +131,7 @@ export const UserProfileDetails = ({
               whiteSpace="nowrap"
               overflow="hidden"
             >
-              {userData?.username ? userData.username : prettyString(userData!.address)}
+              {userData?.username ? userData.username : prettyString(userData?.address || '')}
             </Text>
           </Flex>
           <Text
@@ -122,7 +163,7 @@ export const UserProfileDetails = ({
               onClick={() => {
                 navigator.clipboard.writeText(window.location.href);
                 setTooltipLabel('Profile Link Copied');
-                setTimeout(() => setTooltipLabel('Copy Profile Link'), 5000);
+                setTimeout(() => setTooltipLabel('Copy Profile Link'), 3000);
               }}
             />
           </div>
@@ -155,8 +196,24 @@ export const UserProfileDetails = ({
           <Text fontSize="14px" fontWeight="700" color="gray.500">
             Governance Pitch
           </Text>
-          <Text fontSize="14px" lineHeight="20px" overflowY="scroll">
+          <Text
+            position="relative"
+            fontSize="14px"
+            lineHeight="20px"
+            overflowY="scroll"
+            ref={elementRef}
+          >
             {userData?.delegationPitch}
+            {isOverflowing && (
+              <Box
+                position="sticky"
+                bottom="-1px"
+                left="0"
+                right="0"
+                height="50px"
+                background="linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%)"
+              />
+            )}
           </Text>
         </>
       )}
@@ -226,10 +283,12 @@ export const UserProfileDetails = ({
               setVoteCard(true);
             }}
           >
-            {isAlreadyVoted ? 'Withdraw Vote ' : isSelected ? 'Remove ' : 'Select '}
-            {userData?.ens || userData?.username
-              ? userData.username.slice(0, 20).concat('...')
-              : prettyString(userData!.address)}
+            <Text maxW="250px" textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden">
+              {isAlreadyVoted ? 'Withdraw Vote ' : isSelected ? 'Remove ' : 'Select '}
+              {userData?.ens || userData?.username
+                ? userData.username
+                : prettyString(userData!.address)}
+            </Text>
           </Button>
         )}
 

diff --git a/governance/ui/src/components/UserProfileForm/UserProfileEditPreview.tsx b/governance/ui/src/components/UserProfileForm/UserProfileEditPreview.tsx
@@ -9,10 +9,8 @@ export default function UserProfileEditPreview({
   userData,
   activeWallet,
   isPending,
-  onSave,
   isDirty,
 }: {
-  onSave: () => void;
   isPending: boolean;
   activeWallet?: string;
   isDirty: boolean;
@@ -26,6 +24,10 @@ export default function UserProfileEditPreview({
       p={{ base: 0, xl: '4' }}
       bg="navy.700"
       flexDir="column"
+      w="451px"
+      h="612px"
+      position={{ base: 'unset', xl: 'sticky' }}
+      top="105px"
     >
       <Flex>
         <ProfilePicture imageSrc={userData?.pfpUrl} address={userData?.address || activeWallet} />
@@ -95,6 +97,8 @@ export default function UserProfileEditPreview({
             overflow="scroll"
             maxH="50vh"
             mb="4"
+            h="350px"
+            whiteSpace="pre-wrap"
             data-cy="governance-pitch-preview"
           >
             {userData.delegationPitch}
@@ -104,7 +108,7 @@ export default function UserProfileEditPreview({
       <Button
         isLoading={isPending}
         w="100%"
-        onClick={onSave}
+        type="submit"
         data-cy="save-profile-changes-button"
         isDisabled={!isDirty}
       >