Skip to content

Commit

Permalink
chore: rm onMenuStateChange for menu component (#2326)
Browse files Browse the repository at this point in the history 
* chore: rm onMenuStateChange for menu component

* chore: rm all menu state change implementations

* chore: rm shadow from sort proposal

* chore: revert shadow on dropdown

* chore: add shadow on share dropdown too
  • Loading branch information
@nakedfool
nakedfool authored Sep 11, 2024
1 parent 9aeb7dc commit 43ad883
Show file tree
Hide file tree
Showing 23 changed files with 175 additions and 345 deletions.
223 changes: 104 additions & 119 deletions packages/react-app-revamp/components/Share/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,9 @@ interface ShareDropdownProps {
contestName: string;
contestAddress: string;
chain: string;
onMenuStateChange?: (isOpen: boolean) => void;
}

const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, chain, onMenuStateChange }) => {
const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, chain }) => {
const [isCopied, setIsCopied] = useState(false);

useEffect(() => {
Expand All @@ -41,124 +40,110 @@ const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, ch

return (
<Menu as="div" className="relative inline-block text-left">
{({ open }) => {
onMenuStateChange?.(open);
<MediaQuery maxWidth={768}>
<MenuButton className="w-8 h-8 flex items-center rounded-[10px] border border-neutral-11">
<Image src="/forward.svg" alt="share" className="m-auto" width={15} height={13} />
</MenuButton>
</MediaQuery>
<MediaQuery minWidth={769}>
<MenuButton className="p-4 h-8 flex items-center gap-2 text-neutral-11 text-[16px] font-bold rounded-[10px] border border-neutral-11">
Share <Image src="/forward.svg" alt="share" className="ml-1" width={20} height={20} />
</MenuButton>
</MediaQuery>

return (
<>
<MediaQuery maxWidth={768}>
<MenuButton className="w-8 h-8 flex items-center rounded-[10px] border border-neutral-11">
<Image src="/forward.svg" alt="share" className="m-auto" width={15} height={13} />
</MenuButton>
</MediaQuery>
<MediaQuery minWidth={769}>
<MenuButton className="p-4 h-8 flex items-center gap-2 text-neutral-11 text-[16px] font-bold rounded-[10px] border border-neutral-11">
Share <Image src="/forward.svg" alt="share" className="ml-1" width={20} height={20} />
</MenuButton>
</MediaQuery>

<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<MenuItems className="absolute right-0 z-10 mt-2 w-52 origin-top-right rounded-md bg-true-black shadow-lg ring-1 ring-inset ring-primary-9 ring-opacity-10 focus:outline-none">
<MenuItem>
{({ focus, close }) => (
<a
target="_blank"
href={generateLensShareUrlForContest(contestName, contestAddress, chain)}
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
)}
rel="noreferrer"
onClick={close}
>
<Image
src="/socials/lens.svg"
alt="Lens"
width={32}
height={32}
className="object-fit-cover mr-2"
/>
<span className="text-left">share on Lens</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus, close }) => (
<a
href={generateTwitterShareUrlForContest(contestName, contestAddress, chain)}
target="_blank"
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
)}
rel="noreferrer"
onClick={close}
>
<Image
src="/socials/twitter.svg"
alt="Twitter"
width={32}
height={32}
className="object-fit-cover mr-2"
/>
<span className="text-left">share on Twitter</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus, close }) => (
<a
href={generateFarcasterShareUrlForContest(contestName, contestAddress, chain)}
target="_blank"
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
)}
rel="noreferrer"
onClick={close}
>
<Image
src="/socials/farcaster.svg"
alt="Twitter"
width={32}
height={32}
className="object-fit-cover mr-2"
/>
<span className="text-left">share on farcaster</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus }) => (
<a
onClick={handleCopyLink}
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center gap-1 px-4 py-2 text-[16px] hover:bg-gray-100 hover:text-gray-900 cursor-pointer",
)}
>
{isCopied ? (
<CheckIcon className="h-8 w-8 text-neutral-11 500 mr-2" />
) : (
<DocumentDuplicateIcon className="h-8 w-8 text-neutral-11 mr-2" />
)}
<span className="text-left">copy link</span>
</a>
)}
</MenuItem>
</MenuItems>
</Transition>
</>
);
}}
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<MenuItems className="absolute right-0 z-10 mt-2 w-52 overflow-x-auto origin-top-right rounded-md bg-true-black shadow-sortProposalDropdown focus:outline-none">
<MenuItem>
{({ focus, close }) => (
<a
target="_blank"
href={generateLensShareUrlForContest(contestName, contestAddress, chain)}
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
)}
rel="noreferrer"
onClick={close}
>
<Image src="/socials/lens.svg" alt="Lens" width={32} height={32} className="object-fit-cover mr-2" />
<span className="text-left">share on Lens</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus, close }) => (
<a
href={generateTwitterShareUrlForContest(contestName, contestAddress, chain)}
target="_blank"
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
)}
rel="noreferrer"
onClick={close}
>
<Image
src="/socials/twitter.svg"
alt="Twitter"
width={32}
height={32}
className="object-fit-cover mr-2"
/>
<span className="text-left">share on Twitter</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus, close }) => (
<a
href={generateFarcasterShareUrlForContest(contestName, contestAddress, chain)}
target="_blank"
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center text-[16px] gap-1 px-4 py-2 hover:bg-gray-100 hover:text-gray-900 border-b border-neutral-3",
)}
rel="noreferrer"
onClick={close}
>
<Image
src="/socials/farcaster.svg"
alt="Twitter"
width={32}
height={32}
className="object-fit-cover mr-2"
/>
<span className="text-left">share on farcaster</span>
</a>
)}
</MenuItem>
<MenuItem>
{({ focus }) => (
<a
onClick={handleCopyLink}
className={classNames(
focus ? "bg-neutral-3 text-gray-900" : "text-gray-700",
"flex items-center gap-1 px-4 py-2 text-[16px] hover:bg-gray-100 hover:text-gray-900 cursor-pointer",
)}
>
{isCopied ? (
<CheckIcon className="h-8 w-8 text-neutral-11 500 mr-2" />
) : (
<DocumentDuplicateIcon className="h-8 w-8 text-neutral-11 mr-2" />
)}
<span className="text-left">copy link</span>
</a>
)}
</MenuItem>
</MenuItems>
</Transition>
</Menu>
);
};
Expand Down
5 changes: 1 addition & 4 deletions packages/react-app-revamp/components/Sort/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ export type SortOption = {
export interface SortProps {
sortOptions: SortOption[];
onSortChange?: (sortBy: string) => void;
onMenuStateChange?: (isOpen: boolean) => void;
}

const Sort: FC<SortProps> = ({ sortOptions, onSortChange, onMenuStateChange }) => {
const Sort: FC<SortProps> = ({ sortOptions, onSortChange }) => {
const [selectedOption, setSelectedOption] = useState<string | null>(null);
const [label, setLabel] = useState<string | null>(null);
const query = useSearchParams();
Expand Down Expand Up @@ -79,8 +78,6 @@ const Sort: FC<SortProps> = ({ sortOptions, onSortChange, onMenuStateChange }) =
return (
<Menu as="div" className="relative inline-block text-left w-full md:w-[220px] text-[16px]">
{({ open }) => {
onMenuStateChange?.(open);

return (
<>
<div
Expand Down
21 changes: 3 additions & 18 deletions packages/react-app-revamp/components/TokenSearchModal/ERC20/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const TokenSearchModalERC20: FC<TokenSearchModalERC20Props> = ({ chains: erc20Ch
const [searchValue, setSearchValue] = useState<string>("");
const chainId = chains.find(chain => chain.name === erc20SelectedChain)?.id || 1;
const isChainSupportedBySearch = TOKENLISTOOOR_SUPPORTED_CHAIN_IDS.includes(chainId);
const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false);

return (
<div className="flex flex-col gap-8">
Expand All @@ -28,29 +27,15 @@ const TokenSearchModalERC20: FC<TokenSearchModalERC20Props> = ({ chains: erc20Ch
defaultOption={erc20Chains[0]}
options={erc20Chains}
onChange={option => setErc20SelectedChain(option)}
onMenuStateChange={isOpen => setIsChainDropdownOpen(isOpen)}
/>
</div>
) : null}
{!hideChains ? <div className="bg-primary-5 h-[2px]" /> : null}
<TokenSearchModalSearchInput
onSearchChange={value => setSearchValue(value)}
isChainDropdownOpen={isChainDropdownOpen}
chainId={chainId}
/>
<TokenSearchModalSearchInput onSearchChange={value => setSearchValue(value)} chainId={chainId} />
{searchValue ? (
<TokenSearchList
searchValue={searchValue}
chainId={chainId}
isChainDropdownOpen={isChainDropdownOpen}
onSelectToken={onSelectToken}
/>
<TokenSearchList searchValue={searchValue} chainId={chainId} onSelectToken={onSelectToken} />
) : isChainSupportedBySearch ? (
<TokenSearchModalUserTokens
chainName={erc20SelectedChain}
onSelectToken={onSelectToken}
isChainDropdownOpen={isChainDropdownOpen}
/>
<TokenSearchModalUserTokens chainName={erc20SelectedChain} onSelectToken={onSelectToken} />
) : (
<div className="flex gap-2">
<InformationCircleIcon className="w-12 text-neutral-11" />
Expand Down
21 changes: 3 additions & 18 deletions packages/react-app-revamp/components/TokenSearchModal/NFT/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ interface TokenSearchModalNftProps {
const TokenSearchModalNft: FC<TokenSearchModalNftProps> = ({ chains, onSelectNft, onSelectChain }) => {
const [selectedChain, setSelectedChain] = useState<string>(chains[0].value);
const [searchValue, setSearchValue] = useState<string>("");
const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false);
const chainId = wagmiChains.find(chain => chain.name.toLowerCase() === selectedChain.toLowerCase())?.id || 1;

const onNftChainChange = (chain: string) => {
Expand All @@ -26,26 +25,12 @@ const TokenSearchModalNft: FC<TokenSearchModalNftProps> = ({ chains, onSelectNft
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-4">
<p className="text-[24px] font-bold text-true-white">chain:</p>
<TokenSearchModalChainDropdown
defaultOption={chains[0]}
options={chains}
onChange={onNftChainChange}
onMenuStateChange={isOpen => setIsChainDropdownOpen(isOpen)}
/>
<TokenSearchModalChainDropdown defaultOption={chains[0]} options={chains} onChange={onNftChainChange} />
</div>
<div className="bg-primary-5 h-[2px]" />
<TokenSearchModalSearchInput
onSearchChange={value => setSearchValue(value)}
isChainDropdownOpen={isChainDropdownOpen}
chainId={chainId}
/>
<TokenSearchModalSearchInput onSearchChange={value => setSearchValue(value)} chainId={chainId} />
{searchValue ? (
<NftsSearchList
selectedChain={selectedChain}
searchValue={searchValue}
onSelectNft={onSelectNft}
isChainDropdownOpen={isChainDropdownOpen}
/>
<NftsSearchList selectedChain={selectedChain} searchValue={searchValue} onSelectNft={onSelectNft} />
) : null}
</div>
);
Expand Down
11 changes: 1 addition & 10 deletions packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,9 @@ interface ChainDropdownProps {
defaultOption: Option;
className?: string;
onChange?: (option: string) => void;
onMenuStateChange?: (isOpen: boolean) => void;
}

const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({
options,
defaultOption,
className,
onChange,
onMenuStateChange,
}) => {
const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({ options, defaultOption, className, onChange }) => {
const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);

const handleOptionClick = (option: Option) => {
Expand All @@ -43,8 +36,6 @@ const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({
return (
<Menu as="div" className="relative inline-block text-left">
{({ open }) => {
onMenuStateChange?.(open);

return (
<>
<MenuButton className="flex items-center bg-primary-5 cursor-pointer border border-neutral-10 w-full md:w-[200px] h-full md:h-12 rounded-[15px] px-4 py-2">
Expand Down
7 changes: 2 additions & 5 deletions ...s/react-app-revamp/components/TokenSearchModal/components/NftList/component/Nft/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ import { FC, useState } from "react";

interface TokenSearchListNftProps {
nft: NFTMetadata;
isChainDropdownOpen?: boolean;
onSelectNft?: (nft: NFTMetadata) => void;
}

const TokenSearchListNft: FC<TokenSearchListNftProps> = ({ nft, isChainDropdownOpen, onSelectNft }) => {
const TokenSearchListNft: FC<TokenSearchListNftProps> = ({ nft, onSelectNft }) => {
const [isHovered, setIsHovered] = useState(false);

const truncateTokenName = (name: string, maxLength: number = 30): string => {
Expand All @@ -25,9 +24,7 @@ const TokenSearchListNft: FC<TokenSearchListNftProps> = ({ nft, isChainDropdownO
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onClick={() => onSelectNft?.(nft)}
className={`flex gap-6 items-center cursor-pointer transition-all duration-300 ${
isChainDropdownOpen ? "opacity-50" : ""
}`}
className={`flex gap-6 items-center cursor-pointer transition-all duration-300`}
>
<div
className={`flex items-center bg-neutral-5 rounded-full overflow-hidden w-10 h-10 border border-primary-2 ${
Expand Down
Loading

0 comments on commit 43ad883

Please sign in to comment.