From cb4843ad82b02126c60db020c6294ec41c4a2413 Mon Sep 17 00:00:00 2001 From: blazh Date: Tue, 10 Sep 2024 20:30:41 +0200 Subject: [PATCH 1/5] chore: rm onMenuStateChange for menu component --- packages/react-app-revamp/components/Share/index.tsx | 5 +---- .../components/_pages/Contest/Contest/index.tsx | 12 ++---------- .../components/SortDropdown/index.tsx | 5 +---- .../Contest/components/ProposalStatistics/index.tsx | 9 ++------- .../layouts/LayoutViewContest/index.tsx | 10 ++-------- 5 files changed, 8 insertions(+), 33 deletions(-) diff --git a/packages/react-app-revamp/components/Share/index.tsx b/packages/react-app-revamp/components/Share/index.tsx index bc9fbabe6..21501f004 100644 --- a/packages/react-app-revamp/components/Share/index.tsx +++ b/packages/react-app-revamp/components/Share/index.tsx @@ -18,10 +18,9 @@ interface ShareDropdownProps { contestName: string; contestAddress: string; chain: string; - onMenuStateChange?: (isOpen: boolean) => void; } -const ShareDropdown: FC = ({ contestName, contestAddress, chain, onMenuStateChange }) => { +const ShareDropdown: FC = ({ contestName, contestAddress, chain }) => { const [isCopied, setIsCopied] = useState(false); useEffect(() => { @@ -42,8 +41,6 @@ const ShareDropdown: FC = ({ contestName, contestAddress, ch return ( {({ open }) => { - onMenuStateChange?.(open); - return ( <> diff --git a/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx b/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx index a1e257de6..4021e0338 100644 --- a/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx +++ b/packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx @@ -37,7 +37,6 @@ const ContestTab = () => { const qualifiedToSubmit = currentUserQualifiedToSubmit && currentUserProposalCount < contestMaxNumberSubmissionsPerUser; const isMobile = useMediaQuery({ maxWidth: 768 }); - const [blurProposals, setBlurProposals] = useState(false); const isInPwaMode = window.matchMedia("(display-mode: standalone)").matches; const { contestState } = useContestStateStore(state => state); const isContestCanceled = contestState === ContestStateEnum.Canceled; @@ -98,18 +97,11 @@ const ContestTab = () => {
{contestStatus !== ContestStatus.ContestOpen && !isContestLoading && ( - setBlurProposals(value)} - /> + )} {!isContestLoading && !isListProposalsLoading && isContestSuccess && isListProposalsSuccess && ( -
+
)} diff --git a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx index 20bb7a001..6cb6a6efc 100644 --- a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx +++ b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx @@ -16,10 +16,9 @@ const options = [ interface SortProposalsDropdownProps { defaultValue: string; onChange?: (value: string) => void; - onMenuStateChange?: (isOpen: boolean) => void; } -const SortProposalsDropdown: FC = ({ defaultValue, onChange, onMenuStateChange }) => { +const SortProposalsDropdown: FC = ({ defaultValue, onChange }) => { const [selectedValue, setSelectedValue] = useState(defaultValue); const menuRef = useRef(null); @@ -33,8 +32,6 @@ const SortProposalsDropdown: FC = ({ defaultValue, o return ( {({ open }) => { - onMenuStateChange?.(open); - return ( <> diff --git a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx index 5771a6da9..31ebb8e54 100644 --- a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx +++ b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx @@ -12,10 +12,9 @@ import { chains } from "@config/wagmi"; interface ProposalStatisticsProps { contestStatus: ContestStatus; - onMenuStateChange: (isOpen: boolean) => void; } -const ProposalStatistics: FC = ({ contestStatus, onMenuStateChange }) => { +const ProposalStatistics: FC = ({ contestStatus }) => { const asPath = usePathname(); const { chainName, address } = extractPathSegments(asPath ?? ""); const chainId = chains.filter(chain => chain.name.toLowerCase() === chainName.toLowerCase())[0]?.id; @@ -62,11 +61,7 @@ const ProposalStatistics: FC = ({ contestStatus, onMenu
{submissionsCount > 1 ? ( - + ) : null}
diff --git a/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx b/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx index fef9ae31b..a46bcb494 100644 --- a/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx +++ b/packages/react-app-revamp/layouts/LayoutViewContest/index.tsx @@ -62,7 +62,6 @@ const LayoutViewContest = ({ children }: { children: React.ReactNode }) => { const [tab, setTab] = useState(Tab.Contest); const isMobile = useMediaQuery({ maxWidth: 768 }); const bugReportLink = populateBugReportLink(url?.href ?? "", accountAddress ?? "", error ?? ""); - const [fadeBg, setFadeBg] = useState(false); useAccountEffect({ onConnect(data) { @@ -253,12 +252,7 @@ const LayoutViewContest = ({ children }: { children: React.ReactNode }) => { share
) : ( - + )}
{
-
+
setTab(tab)} />
From 6f58226984f34527ddcdce396cd993a62c2b8216 Mon Sep 17 00:00:00 2001 From: blazh Date: Wed, 11 Sep 2024 09:13:34 +0200 Subject: [PATCH 2/5] chore: rm all menu state change implementations --- .../components/Share/index.tsx | 218 +++++++++--------- .../components/Sort/index.tsx | 5 +- .../TokenSearchModal/ERC20/index.tsx | 21 +- .../components/TokenSearchModal/NFT/index.tsx | 21 +- .../components/ChainDropdown/index.tsx | 11 +- .../NftList/component/Nft/index.tsx | 7 +- .../components/NftList/index.tsx | 10 +- .../components/SearchInput/index.tsx | 11 +- .../CreatePool/components/Dropdown/index.tsx | 4 - .../components/SortDropdown/index.tsx | 72 +++--- .../components/DefaultDropdown/index.tsx | 11 +- .../components/TemplateDropdown/index.tsx | 10 +- .../Metadata/components/Dropdown/index.tsx | 4 - .../Fields/components/Field/index.tsx | 8 +- .../SubmissionRequirements/index.tsx | 15 +- .../components/SubmissionPeriod/index.tsx | 8 +- .../components/VotingPeriod/index.tsx | 8 +- .../Create/pages/ContestUseTemplate/index.tsx | 6 +- .../components/VotingRequirements/index.tsx | 24 +- .../components/_pages/ListContests/index.tsx | 5 +- 20 files changed, 167 insertions(+), 312 deletions(-) diff --git a/packages/react-app-revamp/components/Share/index.tsx b/packages/react-app-revamp/components/Share/index.tsx index 21501f004..c06460fa8 100644 --- a/packages/react-app-revamp/components/Share/index.tsx +++ b/packages/react-app-revamp/components/Share/index.tsx @@ -40,122 +40,110 @@ const ShareDropdown: FC = ({ contestName, contestAddress, ch return ( - {({ open }) => { - return ( - <> - - - share - - - - - Share share - - + + + share + + + + + Share share + + - - - - {({ focus, close }) => ( - - Lens - share on Lens - - )} - - - {({ focus, close }) => ( - - Twitter - share on Twitter - - )} - - - {({ focus, close }) => ( - - Twitter - share on farcaster - - )} - - - {({ focus }) => ( - - {isCopied ? ( - - ) : ( - - )} - copy link - - )} - - - - - ); - }} + + + + {({ focus, close }) => ( + + Lens + share on Lens + + )} + + + {({ focus, close }) => ( + + Twitter + share on Twitter + + )} + + + {({ focus, close }) => ( + + Twitter + share on farcaster + + )} + + + {({ focus }) => ( + + {isCopied ? ( + + ) : ( + + )} + copy link + + )} + + + ); }; diff --git a/packages/react-app-revamp/components/Sort/index.tsx b/packages/react-app-revamp/components/Sort/index.tsx index c5f921a8c..3b30d43ab 100644 --- a/packages/react-app-revamp/components/Sort/index.tsx +++ b/packages/react-app-revamp/components/Sort/index.tsx @@ -16,10 +16,9 @@ export type SortOption = { export interface SortProps { sortOptions: SortOption[]; onSortChange?: (sortBy: string) => void; - onMenuStateChange?: (isOpen: boolean) => void; } -const Sort: FC = ({ sortOptions, onSortChange, onMenuStateChange }) => { +const Sort: FC = ({ sortOptions, onSortChange }) => { const [selectedOption, setSelectedOption] = useState(null); const [label, setLabel] = useState(null); const query = useSearchParams(); @@ -79,8 +78,6 @@ const Sort: FC = ({ sortOptions, onSortChange, onMenuStateChange }) = return ( {({ open }) => { - onMenuStateChange?.(open); - return ( <>
= ({ chains: erc20Ch const [searchValue, setSearchValue] = useState(""); const chainId = chains.find(chain => chain.name === erc20SelectedChain)?.id || 1; const isChainSupportedBySearch = TOKENLISTOOOR_SUPPORTED_CHAIN_IDS.includes(chainId); - const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false); return (
@@ -28,29 +27,15 @@ const TokenSearchModalERC20: FC = ({ chains: erc20Ch defaultOption={erc20Chains[0]} options={erc20Chains} onChange={option => setErc20SelectedChain(option)} - onMenuStateChange={isOpen => setIsChainDropdownOpen(isOpen)} />
) : null} {!hideChains ?
: null} - setSearchValue(value)} - isChainDropdownOpen={isChainDropdownOpen} - chainId={chainId} - /> + setSearchValue(value)} chainId={chainId} /> {searchValue ? ( - + ) : isChainSupportedBySearch ? ( - + ) : (
diff --git a/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx index fc0636ba3..e5ceacc6c 100644 --- a/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx +++ b/packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx @@ -14,7 +14,6 @@ interface TokenSearchModalNftProps { const TokenSearchModalNft: FC = ({ chains, onSelectNft, onSelectChain }) => { const [selectedChain, setSelectedChain] = useState(chains[0].value); const [searchValue, setSearchValue] = useState(""); - const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false); const chainId = wagmiChains.find(chain => chain.name.toLowerCase() === selectedChain.toLowerCase())?.id || 1; const onNftChainChange = (chain: string) => { @@ -26,26 +25,12 @@ const TokenSearchModalNft: FC = ({ chains, onSelectNft

chain:

- setIsChainDropdownOpen(isOpen)} - /> +
- setSearchValue(value)} - isChainDropdownOpen={isChainDropdownOpen} - chainId={chainId} - /> + setSearchValue(value)} chainId={chainId} /> {searchValue ? ( - + ) : null}
); diff --git a/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx b/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx index 4f7926a72..6cb04ce53 100644 --- a/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx +++ b/packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx @@ -14,16 +14,9 @@ interface ChainDropdownProps { defaultOption: Option; className?: string; onChange?: (option: string) => void; - onMenuStateChange?: (isOpen: boolean) => void; } -const TokenSearchModalChainDropdown: FC = ({ - options, - defaultOption, - className, - onChange, - onMenuStateChange, -}) => { +const TokenSearchModalChainDropdown: FC = ({ options, defaultOption, className, onChange }) => { const [selectedOption, setSelectedOption] = useState
-
+

opens

diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx index a4c769f36..b131b4d49 100644 --- a/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx +++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/VotingPeriod/index.tsx @@ -9,7 +9,6 @@ const CreateVotingPeriod = () => { const { votingClose, setVotingClose, errors, step, votingOpen } = useDeployContestStore(state => state); const currentStepError = errors.find(error => error.step === step); const currentVotesOpenError = currentStepError?.message.startsWith("Voting ends") ? currentStepError.message : ""; - const [hideDatePickers, setHideDatePickers] = useState(false); const { timingOption, setTimingOption } = useTimingOptionForVotingPeriod(state => state); const formattedVoteOpen = moment(votingOpen).format("MMMM D, YYYY h:mm A z"); @@ -41,15 +40,10 @@ const CreateVotingPeriod = () => { options={timingPeriodsOptions} defaultOption={timingOption} className="w-48 md:w-[216px]" - onMenuStateChange={state => setHideDatePickers(state)} onChange={option => onTimingPeriodChange(option)} />
-
+

opens

diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx index 7857bff8e..cd1498967 100644 --- a/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx +++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestUseTemplate/index.tsx @@ -24,7 +24,6 @@ const CreateContestTemplate = () => { const { step: currentStep, setStep } = useDeployContestStore(state => state); const setContestTemplateConfig = useSetContestTemplate(); const [selectedTemplate, setSelectedTemplate] = useState(""); - const [fadeBg, setFadeBg] = useState(false); const [showStepper, setShowStepper] = useState(false); const [isFullMode, setIsFullMode] = useState(false); const isMobileOrTablet = useMediaQuery({ maxWidth: 1024 }); @@ -78,11 +77,8 @@ const CreateContestTemplate = () => { options={templateOptions} className="w-full md:w-[240px]" onChange={value => setSelectedTemplate(value)} - onMenuStateChange={setFadeBg} /> -
+
{selectedTemplate ? : null} {isMobileOrTablet ? ( diff --git a/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx b/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx index 55b1272fc..3d9ea254d 100644 --- a/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx +++ b/packages/react-app-revamp/components/_pages/Create/pages/ContestVoting/components/VotingRequirements/index.tsx @@ -49,7 +49,6 @@ const CreateVotingRequirements = () => { const [inputError, setInputError] = useState>({}); const onNextStep = useNextStep(); const submittersAsVoters = submissionTypeOption.value === SubmissionType.SameAsVoters; - const [isDropdownOpen, setIsDropdownOpen] = useState(false); const { isConnected, chain } = useAccount(); const { isError: isChargeDetailsError, @@ -109,25 +108,15 @@ const CreateVotingRequirements = () => { const renderLayout = () => { switch (votingRequirementsOption.value) { case "erc721": - return ( -
- -
- ); + return ; case "erc20": - return ( -
- -
- ); + return ; default: return ( -
-

- note: by letting anyone vote, you’ll need to set a
- charge-per-vote to prevent bots from voting. -

-
+

+ note: by letting anyone vote, you’ll need to set a
+ charge-per-vote to prevent bots from voting. +

); } }; @@ -382,7 +371,6 @@ const CreateVotingRequirements = () => { options={votingDropdownRequirementsOptions} className="w-60 md:w-[240px]" onChange={onRequirementChange} - onMenuStateChange={value => setIsDropdownOpen(value)} /> {renderLayout()} diff --git a/packages/react-app-revamp/components/_pages/ListContests/index.tsx b/packages/react-app-revamp/components/_pages/ListContests/index.tsx index 4375660e4..3e23eb565 100644 --- a/packages/react-app-revamp/components/_pages/ListContests/index.tsx +++ b/packages/react-app-revamp/components/_pages/ListContests/index.tsx @@ -44,7 +44,6 @@ export const ListContests: FC = ({ onSearchChange, onSortChange, }) => { - const [fadeBg, setFadeBg] = useState(false); const [totalCount, setTotalCount] = useState(null); useEffect(() => { @@ -90,7 +89,7 @@ export const ListContests: FC = ({ {sortOptions && totalCount !== null && (
- +
)}
@@ -110,7 +109,7 @@ export const ListContests: FC = ({ No contests found
) : ( -
+
{isPaginationLoading ? placeholders.map((_, index) => ( Date: Wed, 11 Sep 2024 11:08:03 +0200 Subject: [PATCH 3/5] chore: rm shadow from sort proposal --- .../ProposalStatistics/components/SortDropdown/index.tsx | 2 +- packages/react-app-revamp/tailwind.config.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx index a94d60650..d44533d74 100644 --- a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx +++ b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx @@ -45,7 +45,7 @@ const SortProposalsDropdown: FC = ({ defaultValue, o leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - + {options.map(option => ( {({ focus }) => ( diff --git a/packages/react-app-revamp/tailwind.config.js b/packages/react-app-revamp/tailwind.config.js index 954d1686b..d79f82747 100644 --- a/packages/react-app-revamp/tailwind.config.js +++ b/packages/react-app-revamp/tailwind.config.js @@ -359,7 +359,6 @@ module.exports = { "create-header": "0 3px 4px 0 rgba(106, 106, 106, 1)", "timer-container": "3px 3px 4px rgba(106, 106, 106, 1)", dialog: "0px 1px 6px 1px rgba(157, 157, 157, 1)", - sortProposalDropdown: "0px 1px 6px 1px #6A6A6A;", "proposal-card": "1px 1px 5px 0px #E5E5E5", "file-upload": "0 0px 100px rgba(229, 229, 229, 0.3)", }, From 56a82f89d0678aa0185ae90f80818515e89cc69f Mon Sep 17 00:00:00 2001 From: blazh Date: Wed, 11 Sep 2024 11:12:05 +0200 Subject: [PATCH 4/5] chore: revert shadow on dropdown --- .../ProposalStatistics/components/SortDropdown/index.tsx | 2 +- packages/react-app-revamp/tailwind.config.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx index d44533d74..cfa755b81 100644 --- a/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx +++ b/packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx @@ -45,7 +45,7 @@ const SortProposalsDropdown: FC = ({ defaultValue, o leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - + {options.map(option => ( {({ focus }) => ( diff --git a/packages/react-app-revamp/tailwind.config.js b/packages/react-app-revamp/tailwind.config.js index d79f82747..954d1686b 100644 --- a/packages/react-app-revamp/tailwind.config.js +++ b/packages/react-app-revamp/tailwind.config.js @@ -359,6 +359,7 @@ module.exports = { "create-header": "0 3px 4px 0 rgba(106, 106, 106, 1)", "timer-container": "3px 3px 4px rgba(106, 106, 106, 1)", dialog: "0px 1px 6px 1px rgba(157, 157, 157, 1)", + sortProposalDropdown: "0px 1px 6px 1px #6A6A6A;", "proposal-card": "1px 1px 5px 0px #E5E5E5", "file-upload": "0 0px 100px rgba(229, 229, 229, 0.3)", }, From 1746b3b6a2ad8763ffef8ccf8a80a4a5c344f1cd Mon Sep 17 00:00:00 2001 From: blazh Date: Wed, 11 Sep 2024 11:18:19 +0200 Subject: [PATCH 5/5] chore: add shadow on share dropdown too --- packages/react-app-revamp/components/Share/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-app-revamp/components/Share/index.tsx b/packages/react-app-revamp/components/Share/index.tsx index c06460fa8..32e2f80ba 100644 --- a/packages/react-app-revamp/components/Share/index.tsx +++ b/packages/react-app-revamp/components/Share/index.tsx @@ -60,7 +60,7 @@ const ShareDropdown: FC = ({ contestName, contestAddress, ch leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - + {({ focus, close }) => (