diff --git a/packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx b/packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx index cd3dd3266..59e5651ae 100644 --- a/packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx +++ b/packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx @@ -4,7 +4,7 @@ import { ROUTE_CREATE_CONTEST, ROUTE_VIEW_LIVE_CONTESTS, ROUTE_VIEW_USER } from import { PageAction } from "@hooks/useCreateFlowAction/store"; import Link from "next/link"; import { useRouter } from "next/navigation"; -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; interface CreateFlowHeaderDesktopLayoutProps { address: string; @@ -19,8 +19,13 @@ const CreateFlowHeaderDesktopLayout: FC = ({ isSuccess, pageAction, }) => { + const [isClient, setIsClient] = useState(false); const router = useRouter(); + useEffect(() => { + setIsClient(true); + }, []); + const handleNavigation = (action: "play" | "create") => { if (action === "play") { router.push(ROUTE_VIEW_LIVE_CONTESTS); @@ -56,7 +61,7 @@ const CreateFlowHeaderDesktopLayout: FC = ({ {!isLoading && !isSuccess && (
- {address && } + {isClient && address && }
)} diff --git a/packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx b/packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx index d35329867..2a0efea4f 100644 --- a/packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx +++ b/packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx @@ -2,7 +2,7 @@ import { ConnectButtonCustom } from "@components/UI/ConnectButton"; import UserProfileDisplay from "@components/UI/UserProfileDisplay"; import { ROUTE_CREATE_CONTEST, ROUTE_VIEW_LIVE_CONTESTS, ROUTE_VIEW_USER } from "@config/routes"; import Link from "next/link"; -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; interface MainHeaderDesktopLayoutProps { isConnected: boolean; @@ -10,6 +10,12 @@ interface MainHeaderDesktopLayoutProps { } const MainHeaderDesktopLayout: FC = ({ isConnected, address }) => { + const [isClient, setIsClient] = useState(false); + + useEffect(() => { + setIsClient(true); + }, []); + return (
@@ -31,11 +37,7 @@ const MainHeaderDesktopLayout: FC = ({ isConnected
- {address ? ( - - - - ) : null} + {isClient && address ? : null}
diff --git a/packages/react-app-revamp/components/Share/index.tsx b/packages/react-app-revamp/components/Share/index.tsx index bc9fbabe6..32e2f80ba 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(() => { @@ -41,124 +40,110 @@ const ShareDropdown: FC = ({ contestName, contestAddress, ch return ( - {({ open }) => { - onMenuStateChange?.(open); + + + share + + + + + Share share + + - return ( - <> - - - 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