Merge pull request #2196 from jk-labs-inc/staging

patch PR 6 of week ending 8/27/24

.github/ISSUE_TEMPLATE/chain_request.md

@@ -9,4 +9,7 @@ assignees: ''
 
 Please include the network name, RPC url, chain id, native currency symbol, block explorer url, your chain's logo, and whether or not the chain in your issue is a testnet.
 
+And lastly, please @danglard somewhere in your ticket so that he can be notified when it's closed. 
+
 Please use [this issue](https://github.com/jk-labs-inc/jokerace/issues/2047) as a template! 
+

packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx

@@ -56,11 +56,7 @@ const CreateFlowHeaderDesktopLayout: FC<CreateFlowHeaderDesktopLayoutProps> = ({
 
       {!isLoading && !isSuccess && (
         <div className="flex items-center gap-3">
-          {address && (
-            <Link href={`${ROUTE_VIEW_USER.replace("[address]", address)}`}>
-              <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />
-            </Link>
-          )}
+          {address && <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />}
           <ConnectButtonCustom />
         </div>
       )}

packages/react-app-revamp/components/Header/CreateFlowHeader/MobileLayout/index.tsx

@@ -14,7 +14,7 @@ import { PageAction } from "@hooks/useCreateFlowAction/store";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 interface CreateFlowHeaderMobileLayoutProps {
   address: string;
@@ -37,11 +37,17 @@ const CreateFlowHeaderMobileLayout: FC<CreateFlowHeaderMobileLayoutProps> = ({
   const filteredLinks = FOOTER_LINKS.filter(link => allowedLinks.includes(link.label));
   const [isBurgerMenuOpen, setIsBurgerMenuOpen] = useState(false);
   const pathname = usePathname();
-  const isInPwaMode = window.matchMedia("(display-mode: standalone)").matches;
+  const [isClient, setIsClient] = useState(false);
+  const [isInPwaMode, setIsInPwaMode] = useState(false);
   const isActive = (route: string) => (pathname === route ? "text-primary-10 transition-colors font-bold" : "");
   const isOneOfActive = (routes: string[]) =>
     routes.includes(pathname ?? "") ? "text-primary-10 transition-colors font-bold" : "";
 
+  useEffect(() => {
+    setIsClient(true);
+    setIsInPwaMode(window.matchMedia("(display-mode: standalone)").matches);
+  }, []);
+
   const onWalletClick = () => {
     if (isConnected) return;
 
@@ -50,7 +56,7 @@ const CreateFlowHeaderMobileLayout: FC<CreateFlowHeaderMobileLayoutProps> = ({
 
   return (
     <header
-      className={`flex flex-col ${isBurgerMenuOpen ? "hidden" : "fixed"} mt-4 bottom-0 right-0 left-0 ${isInPwaMode ? "pb-8" : "pb-2"} bg-true-black z-50`}
+      className={`flex flex-col ${isBurgerMenuOpen ? "hidden" : "fixed"} mt-4 bottom-0 right-0 left-0 ${isClient && isInPwaMode ? "pb-8" : "pb-2"} bg-true-black z-50`}
     >
       <div className={`flex flex-row items-center h-12 justify-between border-t-neutral-2 border-t-2 pt-2 px-8`}>
         <Link href={ROUTE_LANDING} className={`flex flex-col ${isActive(ROUTE_LANDING)}`}>

packages/react-app-revamp/components/Header/LandingHeader/index.tsx

@@ -8,21 +8,22 @@ import {
   ROUTE_VIEW_CONTEST,
   ROUTE_VIEW_CONTESTS,
   ROUTE_VIEW_LIVE_CONTESTS,
-  ROUTE_VIEW_USER,
 } from "@config/routes";
 import { HomeIcon, MagnifyingGlassIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
 import { useAccountModal, useConnectModal } from "@rainbow-me/rainbowkit";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useAccount } from "wagmi";
 
 const LandingHeader = () => {
   const { isConnected, address } = useAccount();
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const pathname = usePathname();
-  const isInPwaMode = window.matchMedia("(display-mode: standalone)").matches;
+  const [isInPwaMode, setIsInPwaMode] = useState(false);
+  const [isClient, setIsClient] = useState(false);
   const isActive = (route: string) => (pathname === route ? "text-primary-10 transition-colors font-bold" : "");
   const isOneOfActive = (routes: string[]) =>
     routes.includes(pathname ?? "") ? "text-primary-10 transition-colors font-bold" : "";
@@ -31,6 +32,11 @@ const LandingHeader = () => {
   const allowedLinks = ["Github", "Twitter", "Report a bug", "Terms", "Telegram", "Media Kit"];
   const filteredLinks = FOOTER_LINKS.filter(link => allowedLinks.includes(link.label));
 
+  useEffect(() => {
+    setIsClient(true);
+    setIsInPwaMode(window.matchMedia("(display-mode: standalone)").matches);
+  }, []);
+
   if (isMobile) {
     return (
       <>
@@ -49,7 +55,7 @@ const LandingHeader = () => {
         <header className="bg-true-black">
           <div
             className={`fixed bottom-0 left-0 right-0 flex flex-col border-t-2 border-neutral-2 bg-true-black z-50 ${
-              isInPwaMode ? "pb-8" : "pb-2"
+              isClient && isInPwaMode ? "pb-8" : "pb-2"
             }`}
           >
             <div className="text-neutral-10 flex justify-center items-center text-[12px] py-3 border-b border-neutral-2">
@@ -115,26 +121,22 @@ const LandingHeader = () => {
   }
 
   return (
-    <header className="flex items-center justify-between pl-16 3xl:pl-28 pr-[60px] mt-8">
+    <header className="flex items-center pl-16 3xl:pl-28 pr-[60px] mt-4 max-w-[1850px]">
       <Link href="/">
         <div>
-          <h1 className="font-sabo text-neutral-11 normal-case text-[80px]">
+          <h1 className="font-sabo text-neutral-11 normal-case text-[60px]">
             <span className="joke-3d" data-text="J">
               J
             </span>
-            <span className="text-[55px] joke-3d">oke</span>
+            <span className="text-[45px] joke-3d">oke</span>
             <span className="joke-3d">R</span>
-            <span className="text-[55px] joke-3d">ace</span>
+            <span className="text-[45px] joke-3d">ace</span>
           </h1>
         </div>
       </Link>
 
-      <div className="flex gap-3 items-center">
-        {address ? (
-          <Link href={`${ROUTE_VIEW_USER.replace("[address]", address)}`}>
-            <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />
-          </Link>
-        ) : null}
+      <div className="flex gap-3 items-center ml-auto">
+        {isClient && address ? <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion /> : null}
         <ConnectButtonCustom />
       </div>
     </header>

packages/react-app-revamp/components/Header/MainHeader/MobileLayout/index.tsx

@@ -13,7 +13,7 @@ import { HomeIcon, MagnifyingGlassIcon, PencilSquareIcon } from "@heroicons/reac
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
 interface MainHeaderMobileLayoutProps {
   isConnected: boolean;
@@ -31,18 +31,24 @@ const MainHeaderMobileLayout: FC<MainHeaderMobileLayoutProps> = ({
   openAccountModal,
 }) => {
   const pathname = usePathname();
-  const isInPwaMode = window.matchMedia("(display-mode: standalone)").matches;
+  const [isClient, setIsClient] = useState(false);
+  const [isInPwaMode, setIsInPwaMode] = useState(false);
   const displayProfile = showProfile && !pathname?.includes("user");
   const isActive = (route: string) => (pathname === route ? "text-primary-10 transition-colors font-bold" : "");
   const isOneOfActive = (routes: string[]) =>
     routes.includes(pathname ?? "") ? "text-primary-10 transition-colors font-bold" : "";
   const allowedLinks = ["Github", "Twitter", "Telegram", "Report a bug", "Terms", "Media Kit"];
   const filteredLinks = FOOTER_LINKS.filter(link => allowedLinks.includes(link.label));
 
+  useEffect(() => {
+    setIsClient(true);
+    setIsInPwaMode(window.matchMedia("(display-mode: standalone)").matches);
+  }, []);
+
   return (
     <>
       <div className="flex justify-between items-center px-4 mt-4">
-        {address && displayProfile ? (
+        {address && displayProfile && isClient ? (
           <div className="top-0 right-0 left-0 ">
             <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />
           </div>
@@ -69,7 +75,7 @@ const MainHeaderMobileLayout: FC<MainHeaderMobileLayoutProps> = ({
 
       <header
         className={`flex flex-row bottom-0 right-0 left-0 fixed items-center justify-between border-t-neutral-2 border-t-2 pt-2 ${
-          isInPwaMode ? "pb-8" : "pb-2"
+          isClient && isInPwaMode ? "pb-8" : "pb-2"
         } px-8 mt-4 bg-true-black z-50`}
       >
         <Link href={ROUTE_LANDING} className={`flex flex-col ${isActive(ROUTE_LANDING)}`}>

packages/react-app-revamp/components/_pages/Create/components/DatePicker/index.tsx

@@ -12,7 +12,7 @@ interface CreateDatePicker {
 
 const CustomInput = forwardRef<HTMLInputElement, { value: string; onClick: () => void }>(({ value, onClick }, ref) => (
   <div
-    className="input-wrapper flex cursor-pointer bg-neutral-14 h-10 px-4 py-2 rounded-[5px] items-center w-full md:w-[380px] outline-none focus:outline-none"
+    className="input-wrapper flex cursor-pointer bg-neutral-14 h-10 px-4 py-2 rounded-[5px] items-center w-full md:w-[400px] outline-none focus:outline-none"
     onClick={onClick}
     ref={ref}
   >

packages/react-app-revamp/components/_pages/Create/components/TemplateDropdown/index.tsx

@@ -1,6 +1,6 @@
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
+import React, { FC, useState } from "react";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import { FC, Fragment, useState } from "react";
 import { TemplateType } from "../../templates/types";
 
 export interface TemplateOption {
@@ -30,13 +30,13 @@ const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({
   };
 
   return (
-    <Menu as="div" className="relative inline-block">
+    <Menu as="div" className="relative inline-block w-full md:w-[240px]">
       {({ open }) => {
         onMenuStateChange?.(open);
 
         return (
           <>
-            <MenuButton className="flex items-center bg-transparent cursor-pointer w-full md:w-[240px] pb-2 border-b border-neutral-11">
+            <MenuButton className="flex items-center bg-transparent cursor-pointer w-full pb-2 border-b border-neutral-11">
               <p className={`text-[20px] font-bold ${selectedOption ? "text-neutral-11" : "text-neutral-10"}`}>
                 {selectedOption ? selectedOption.label : "Pick a template"}
               </p>
@@ -47,36 +47,33 @@ const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({
               />
             </MenuButton>
 
-            <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={`
+                ${className}
+                flex flex-col absolute z-10 w-full top-full mt-4
+                bg-true-black border border-neutral-11 rounded-[10px]
+                overflow-y-auto max-h-[150px] md:max-h-96 animate-appear
+              `}
             >
-              <MenuItems
-                className={`${className} flex flex-col absolute z-10 mt-4 bg-true-black border border-neutral-11 rounded-[10px] overflow-clip animate-appear`}
-              >
-                {options.map(option => (
-                  <MenuItem key={option.value}>
-                    {({ focus }) => (
-                      <button
-                        className={`text-neutral-11 text-left pt-2 pl-4 pb-2 text-[20px] cursor-pointer
+              {options.map(option => (
+                <MenuItem key={option.value}>
+                  {({ focus }) => (
+                    <button
+                      className={`
+                        text-neutral-11 text-left py-3 px-4 text-[20px] cursor-pointer
                         ${option.disabled ? "opacity-50 pointer-events-none" : ""}
                         ${focus ? "bg-neutral-3" : ""}
-                        ${option.value === selectedOption?.value ? "font-bold" : ""}`}
-                        disabled={option.disabled}
-                        onClick={() => handleOptionChange(option)}
-                      >
-                        {option.label}
-                      </button>
-                    )}
-                  </MenuItem>
-                ))}
-              </MenuItems>
-            </Transition>
+                        ${option.value === selectedOption?.value ? "font-bold" : ""}
+                      `}
+                      disabled={option.disabled}
+                      onClick={() => handleOptionChange(option)}
+                    >
+                      {option.label}
+                    </button>
+                  )}
+                </MenuItem>
+              ))}
+            </MenuItems>
           </>
         );
       }}

packages/react-app-revamp/components/_pages/Create/pages/ContestTiming/components/SubmissionPeriod/index.tsx

@@ -11,13 +11,14 @@ import {
 } from "../../utils";
 
 const CreateSubmissionPeriod = () => {
-  const { submissionOpen, setSubmissionOpen, votingOpen, setVotingOpen, setVotingClose, errors, step } =
+  const { submissionOpen, setSubmissionOpen, votingOpen, setVotingOpen, votingClose, setVotingClose, errors, step } =
     useDeployContestStore(state => state);
   const currentStepError = errors.find(error => error.step === step);
   const currentVotesOpenError = currentStepError?.message.startsWith("Voting open") ? currentStepError.message : "";
   const { timingOption: submissionPeriodTimingOption, setTimingOption: setSubmissionPeriodTimingOption } =
     useTimingOptionForSubmissionPeriod(state => state);
-  const { timingOption: votingPeriodTimingOption } = useTimingOptionForVotingPeriod(state => state);
+  const { timingOption: votingPeriodTimingOption, setTimingOption: setVotingPeriodTimingOption } =
+    useTimingOptionForVotingPeriod(state => state);
   const [hideDatePickers, setHideDatePickers] = useState<boolean>(false);
 
   const onSubmissionDateChange = (value: Date) => {
@@ -26,14 +27,53 @@ const CreateSubmissionPeriod = () => {
       label: "custom",
       value: "custom",
     });
+
+    // only adjust votingOpen if the new submissionOpen is after the current votingOpen
+    if (value > votingOpen) {
+      // set voting open to 1 hour after the new voting open time
+      const newVotingOpen = new Date(value.getTime() + 60 * 60 * 1000);
+      setVotingOpen(newVotingOpen);
+
+      if (votingPeriodTimingOption.value !== TimingPeriod.Custom) {
+        const votingCloseDate = addTimeBasedOnPeriod(newVotingOpen, votingPeriodTimingOption.value as TimingPeriod);
+        setVotingClose(votingCloseDate);
+      }
+    }
   };
 
   const onVotesOpenChange = (value: Date) => {
-    setVotingOpen(value);
-    setSubmissionPeriodTimingOption({
-      label: "custom",
-      value: "custom",
-    });
+    if (value > submissionOpen) {
+      setVotingOpen(value);
+      setSubmissionPeriodTimingOption({
+        label: "custom",
+        value: "custom",
+      });
+
+      // check if the new voting open time is after the current voting close time
+      if (value >= votingClose) {
+        // Set voting close to 1 hour after the new voting open time
+        const newVotingClose = new Date(value.getTime() + 60 * 60 * 1000);
+        setVotingClose(newVotingClose);
+        setVotingPeriodTimingOption({
+          label: "custom",
+          value: "custom",
+        });
+      }
+    } else {
+      const newVotingOpen = new Date(submissionOpen.getTime() + 60000);
+      setVotingOpen(newVotingOpen);
+
+      // check if the adjusted voting open time is after the current voting close time
+      if (newVotingOpen >= votingClose) {
+        // set voting close to 1 hour after the new voting open time
+        const newVotingClose = new Date(newVotingOpen.getTime() + 60 * 60 * 1000);
+        setVotingClose(newVotingClose);
+        setVotingPeriodTimingOption({
+          label: "custom",
+          value: "custom",
+        });
+      }
+    }
   };
 
   const onTimingPeriodChange = (option: string) => {

packages/react-app-revamp/config/wagmi/custom-chains/rollux.ts

@@ -0,0 +1,24 @@
+import { Chain } from "@rainbow-me/rainbowkit";
+
+export const rollux: Chain = {
+  id: 570,
+  name: "rollux",
+  iconUrl: "/rollux.svg",
+  nativeCurrency: {
+    decimals: 18,
+    name: "SYS",
+    symbol: "SYS",
+  },
+  rpcUrls: {
+    public: {
+      http: ["https://rpc.rollux.com"],
+    },
+    default: {
+      http: ["https://rpc.rollux.com"],
+    },
+  },
+  blockExplorers: {
+    etherscan: { name: "Rollux Block Explorer", url: "https://explorer.rollux.com/" },
+    default: { name: "Rollux Block Explorer", url: "https://explorer.rollux.com/" },
+  },
+};