From b2358db542b1ffdce761ba3742192ccd802135b0 Mon Sep 17 00:00:00 2001 From: MrX-SNX Date: Fri, 23 Aug 2024 14:02:30 +0100 Subject: [PATCH] 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 --- .github/workflows/release-governance.yml | 2 +- governance/cypress/package.json | 2 +- .../components/CouncilCard/CouncilCard.tsx | 9 +- .../CouncilNominees/CouncilNominees.tsx | 10 +- .../EditNomination/EditNomination.tsx | 8 +- .../EditNominationConfirmation.tsx | 2 +- .../EditNomination/EditNominationSelect.tsx | 6 + .../components/Header/NetworkController.tsx | 2 +- .../components/NominateSelf/NominateSelf.tsx | 3 + .../components/UserListItem/UserListItem.tsx | 32 +- .../UserProfileCard/UserProfileDetails.tsx | 77 +++- .../UserProfileEditPreview.tsx | 10 +- .../UserProfileForm/UserProfileForm.tsx | 391 +++++++++--------- .../UserTableView/UserTableView.tsx | 53 ++- governance/ui/src/context/VoteContext.tsx | 31 +- governance/ui/src/mutations/useCastVotes.ts | 10 + .../mutations/useUpdateUserDetailsMutation.ts | 2 +- governance/ui/src/pages/MyProfile.tsx | 6 +- governance/ui/src/pages/MyVotes.tsx | 11 +- .../ui/src/queries/useGetCouncilMembers.ts | 2 +- .../ui/src/queries/useGetCouncilNominees.ts | 2 +- .../ui/src/queries/useGetCurrentPeriod.ts | 2 +- .../ui/src/queries/useGetElectionSettings.ts | 2 +- .../ui/src/queries/useGetEpochSchedule.ts | 2 +- .../ui/src/queries/useGetIsNominated.ts | 2 +- .../src/queries/useGetNextElectionSettings.ts | 2 +- governance/ui/src/utils/contracts.ts | 51 +-- governance/ui/src/utils/councils.ts | 2 +- governance/ui/src/utils/providers.ts | 2 +- governance/ui/webpack.config.js | 3 - liquidity/lib/useBlockchain/useBlockchain.tsx | 4 +- 31 files changed, 441 insertions(+), 302 deletions(-) diff --git a/.github/workflows/release-governance.yml b/.github/workflows/release-governance.yml index da93308b5..492ce9865 100644 --- 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 index b29bec31b..f7a73d5c2 100644 --- 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 index bcbe9573e..ad93ae65a 100644 --- 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 index 05601cc10..15275cfa5 100644 --- 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' && } - {/* @ts-ignore */} - {sortConfig[1] === 'start' && sortConfig[1] !== 'name' && ( - - )} + {sortConfig[1] === 'start' && } {councilPeriod === '2' && ( diff --git a/governance/ui/src/components/EditNomination/EditNomination.tsx b/governance/ui/src/components/EditNomination/EditNomination.tsx index 7faa3c3f7..884e2f4f4 100644 --- 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} > navigate(`/councils/${activeCouncil}`)} + onClick={() => { + if (showConfirm) { + setShowConfirm(false); + } else { + navigate(`/councils/${activeCouncil}`); + } + }} size="xs" aria-label="close button" icon={} diff --git a/governance/ui/src/components/EditNomination/EditNominationConfirmation.tsx b/governance/ui/src/components/EditNomination/EditNominationConfirmation.tsx index ada18f43b..70b0d6ad7 100644 --- 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 index feacaf34e..1d5bb4f4b 100644 --- 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;', + }} > {user?.username ? user.username : prettyString(user?.address || '')} @@ -70,7 +70,7 @@ export default function UserListItem({ Nominee )} - {councilPeriod === '1' ? ( + {councilPeriod === '1' && isNominatedFetched && !!nominationInformation ? ( + isNominatedFetched && ( + + ) )} ); diff --git a/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx b/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx index ee68f6d6f..ba4f68677 100644 --- 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(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 ( <> @@ -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 || '')} { navigator.clipboard.writeText(window.location.href); setTooltipLabel('Profile Link Copied'); - setTimeout(() => setTooltipLabel('Copy Profile Link'), 5000); + setTimeout(() => setTooltipLabel('Copy Profile Link'), 3000); }} /> @@ -155,8 +196,24 @@ export const UserProfileDetails = ({ Governance Pitch - + {userData?.delegationPitch} + {isOverflowing && ( + + )} )} @@ -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)} + + {isAlreadyVoted ? 'Withdraw Vote ' : isSelected ? 'Remove ' : 'Select '} + {userData?.ens || userData?.username + ? userData.username + : prettyString(userData!.address)} + )} diff --git a/governance/ui/src/components/UserProfileForm/UserProfileEditPreview.tsx b/governance/ui/src/components/UserProfileForm/UserProfileEditPreview.tsx index f1fb40b2e..e7e6cfed2 100644 --- 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" > @@ -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({ - - + + + Governance Pitch + +