Skip to content

Commit

Permalink
Merge pull request #2339 from jk-labs-inc/staging
Browse files Browse the repository at this point in the history
  • Loading branch information
Sean McCaffery authored Sep 11, 2024
2 parents c70ba2c + 43ad883 commit 4cc21b0
Show file tree
Hide file tree
Showing 28 changed files with 925 additions and 1,089 deletions.
9 changes: 7 additions & 2 deletions packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,8 +19,13 @@ const CreateFlowHeaderDesktopLayout: FC<CreateFlowHeaderDesktopLayoutProps> = ({
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);
Expand Down Expand Up @@ -56,7 +61,7 @@ const CreateFlowHeaderDesktopLayout: FC<CreateFlowHeaderDesktopLayoutProps> = ({

{!isLoading && !isSuccess && (
<div className="flex items-center gap-3">
{address && <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />}
{isClient && address && <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />}
<ConnectButtonCustom />
</div>
)}
Expand Down
14 changes: 8 additions & 6 deletions packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,20 @@ 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;
address: string;
}

const MainHeaderDesktopLayout: FC<MainHeaderDesktopLayoutProps> = ({ isConnected, address }) => {
const [isClient, setIsClient] = useState(false);

useEffect(() => {
setIsClient(true);
}, []);

return (
<header className="flex items-center justify-between pl-[120px] pr-[60px] mt-8">
<Link href="/">
Expand All @@ -31,11 +37,7 @@ const MainHeaderDesktopLayout: FC<MainHeaderDesktopLayoutProps> = ({ isConnected
</div>

<div className="flex gap-3 items-center">
{address ? (
<Link href={`${ROUTE_VIEW_USER.replace("[address]", address)}`}>
<UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />
</Link>
) : null}
{isClient && address ? <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion /> : null}
<ConnectButtonCustom />
</div>
</header>
Expand Down
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
Loading

0 comments on commit 4cc21b0

Please sign in to comment.