patch PR 4 of week ending 9/17/24

.github/workflows/forge_tests.yml

@@ -5,12 +5,16 @@ on: push
 env:
   FOUNDRY_PROFILE: ci
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
   check:
     strategy:
       fail-fast: true
 
-    name: Foundry project
+    name: test
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.github/workflows/nextjs_build.yml

@@ -0,0 +1,64 @@
+name: nextjs
+
+on: push
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: yarn install --production
+      - name: Build with Next.js
+        run: yarn build
+        env: 
+          NEXT_PUBLIC_SUPABASE_URL: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_SUPABASE_URL || secrets.DEV_NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_SUPABASE_ANON_KEY || secrets.DEV_NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+          NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || secrets.DEV_NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID }}
+          NEXT_PUBLIC_R2_ACCOUNT_ID: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_R2_ACCOUNT_ID || secrets.DEV_NEXT_PUBLIC_R2_ACCOUNT_ID }}
+          NEXT_PUBLIC_R2_ACCESS_KEY_ID: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_R2_ACCESS_KEY_ID || secrets.DEV_NEXT_PUBLIC_R2_ACCESS_KEY_ID }}
+          NEXT_PUBLIC_R2_SECRET_ACCESS_KEY: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_R2_SECRET_ACCESS_KEY || secrets.DEV_NEXT_PUBLIC_R2_SECRET_ACCESS_KEY }}
+          NEXT_PUBLIC_MERKLE_TREES_BUCKET: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_MERKLE_TREES_BUCKET || secrets.DEV_NEXT_PUBLIC_MERKLE_TREES_BUCKET }}
+          NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET || secrets.DEV_NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET }}
+          NEXT_PUBLIC_ETHERSCAN_KEY: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_ETHERSCAN_KEY || secrets.DEV_NEXT_PUBLIC_ETHERSCAN_KEY }}
+          NEXT_PUBLIC_ALCHEMY_KEY: ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_ALCHEMY_KEY || secrets.DEV_NEXT_PUBLIC_ALCHEMY_KEY }}

.gitignore

@@ -6,7 +6,9 @@ packages/react-app-revamp/public/sw.js
 packages/react-app-revamp/public/workbox-*.js
 packages/react-app-revamp/public/worker-*.js
 
-
+# next.js
+/.next/
+/out/
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 **/node_modules
@@ -71,4 +73,4 @@ yarn-error.log*
 *.stackdump
 
 # doc directory
-/doc
+/doc

README.md

@@ -72,6 +72,3 @@ Our smart contracts were audited by Certik in September 2023, the audit report i
 - Tailwind CSS & Headless-UI
 - ethers, wagmi, @wagmi/core, @rainbow-me/rainbowkit
 - zustand
-- [Vercel](https://vercel.com/?utm_source=jokedao&utm_campaign=oss).
-
-jokerace front-end is hosted on [Vercel](https://vercel.com/?utm_source=jokedao&utm_campaign=oss).

package.json

@@ -5,6 +5,8 @@
   "private": true,
   "scripts": {
     "dev": "yarn workspace @scaffold-eth/react-app-revamp dev",
+    "build": "yarn workspace @scaffold-eth/react-app-revamp build",
+    "start": "yarn workspace @scaffold-eth/react-app-revamp start",
     "format": "yarn workspace @scaffold-eth/forge forgeformat",
     "test": "yarn workspace @scaffold-eth/forge forgetest",
     "forgebuild": "yarn workspace @scaffold-eth/forge forgebuild",

packages/react-app-revamp/README.md

@@ -75,6 +75,3 @@ You will also need to do two more things if the ABI is changed:
 - Tailwind CSS & Headless-UI
 - ethers, wagmi, @wagmi/core, @rainbow-me/rainbowkit
 - zustand
-- [Vercel](https://vercel.com/?utm_source=jokedao&utm_campaign=oss).
-
-jokerace front-end is hosted on [Vercel](https://vercel.com/?utm_source=jokedao&utm_campaign=oss).

packages/react-app-revamp/components/UI/Slider/index.tsx

@@ -1,6 +1,7 @@
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
 import { FC, useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
 import { Tooltip } from "react-tooltip";
 
 interface StepSliderProps {
@@ -23,6 +24,7 @@ const StepSlider: FC<StepSliderProps> = ({
   onKeyDown,
 }) => {
   const [value, setValue] = useState(defaultValue);
+  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
 
   useEffect(() => {
     setValue(val);
@@ -33,44 +35,44 @@ const StepSlider: FC<StepSliderProps> = ({
     onChange?.(value);
   };
 
-  const trackStyle = {
-    backgroundColor: "#BB65FF",
-    height: 8,
-  };
-
-  const handleStyle = {
-    borderColor: "#D9D9D9",
-    height: 16,
-    width: 16,
-    backgroundColor: "#D9D9D9",
-    opacity: "1",
-  };
-
-  const railStyle = {
-    backgroundColor: "#6A6A6A",
-    height: 8,
-  };
-
-  const dotStyle = {
-    borderColor: "#D9D9D9",
-    height: 10,
-    width: 10,
-    backgroundColor: "#D9D9D9",
+  const styles = {
+    track: {
+      backgroundColor: "#BB65FF",
+      height: 8,
+    },
+    handle: {
+      borderColor: "#D9D9D9",
+      height: isMobile ? 32 : 16,
+      width: isMobile ? 32 : 16,
+      backgroundColor: "#D9D9D9",
+      opacity: 1,
+      cursor: "pointer",
+      marginTop: isMobile ? -12 : -4,
+    },
+    rail: {
+      backgroundColor: "#6A6A6A",
+      height: 8,
+    },
+    dot: {
+      borderColor: "#D9D9D9",
+      height: 10,
+      width: 10,
+      backgroundColor: "#D9D9D9",
+    },
   };
 
   return (
-    <div onKeyDown={onKeyDown} tabIndex={0}>
+    <div onKeyDown={onKeyDown} tabIndex={0} className="p-4 md:p-0">
       <Slider
         className="w-60"
         min={min}
         max={max}
         value={value}
-        dotStyle={dotStyle}
         step={step}
-        trackStyle={trackStyle}
-        handleStyle={handleStyle}
-        railStyle={railStyle}
         onChange={handleSliderChange}
+        allowCross={false}
+        pushable={true}
+        styles={styles}
         handleRender={renderProps => {
           return (
             <div {...renderProps.props} data-tooltip-id="voting-slider">

packages/react-app-revamp/components/UI/UserProfileDisplay/index.tsx

@@ -65,7 +65,7 @@ const UserProfileDisplay = ({
   if (textualVersion) {
     return (
       <Link
-        className="text-[16px] font-bold"
+        className="text-[16px] font-bold text-neutral-11"
         target="_blank"
         rel="noopener noreferrer"
         href={`${ROUTE_VIEW_USER.replace("[address]", ethereumAddress)}`}

packages/react-app-revamp/components/Voting/index.tsx

@@ -158,7 +158,7 @@ const VotingWidget: FC<VotingWidgetProps> = ({
               {charge ? <ChargeInfo charge={charge} /> : null}
             </div>
             <div
-              className={`relative flex w-full md:w-80 h-16 items-center px-4 text-[16px] bg-transparent font-bold ${
+              className={`relative flex w-full md:w-80 h-16 items-center px-8 text-[16px] bg-transparent font-bold ${
                 isInvalid ? "text-negative-11" : "text-neutral-11"
               } border-2 ${isFocused && !isInvalid ? "border-neutral-11" : isInvalid ? "border-negative-11" : "border-neutral-10"} rounded-[40px] transition-colors duration-300`}
             >
@@ -173,7 +173,7 @@ const VotingWidget: FC<VotingWidgetProps> = ({
                 max={amountOfVotes}
                 onKeyDown={handleKeyDownInput}
                 onInput={handleInput}
-                className="w-full text-center text-[32px] bg-transparent outline-none placeholder-neutral-9"
+                className="w-full text-[32px] bg-transparent outline-none placeholder-primary-5"
               />
               <span className="absolute right-4 text-neutral-9 text-[16px] font-bold">
                 vote{amount !== 1 ? "s" : ""}

packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx

@@ -61,21 +61,22 @@ const ContestTab = () => {
     if (qualifiedToSubmit)
       return (
         <ButtonV3
-          colorClass="bg-gradient-vote rounded-[40px]"
+          colorClass="bg-gradient-purple rounded-[40px]"
+          textColorClass="text-[16px] md:text-[20px] font-bold text-true-black"
           size={isMobile ? ButtonSize.FULL : ButtonSize.EXTRA_LARGE_LONG}
           onClick={() => {
             setIsSubmitProposalSuccess(false);
             setIsSubmitProposalModalOpen(!isSubmitProposalModalOpen);
           }}
         >
-          submit a response
+          enter contest
         </ButtonV3>
       );
   };
 
   return (
     <div className="animate-reveal">
-      <div className="mt-6">
+      <div className="mt-4 md:mt-6">
         <div className="flex flex-col gap-6">
           {isContestCanceled ? (
             <div className="flex">

packages/react-app-revamp/components/_pages/Contest/components/CancelContest/index.tsx

@@ -42,7 +42,7 @@ const CancelContest = () => {
   return (
     <>
       <button disabled={isLoading} onClick={handleOpenModal}>
-        <TrashIcon className="w-6 h-6 text-negative-11 hover:text-negative-10 transition-colors duration-300 ease-in-out" />
+        <TrashIcon className="-ml-0 md:-ml-8 w-6 h-6 text-negative-11 hover:text-negative-10 transition-colors duration-300 ease-in-out" />
       </button>
 
       <CancelContestModal

packages/react-app-revamp/components/_pages/Contest/components/ContestName/index.tsx

@@ -2,21 +2,22 @@ import GradientText from "@components/UI/GradientText";
 import { ContestStateEnum, useContestStateStore } from "@hooks/useContestState/store";
 import { FC } from "react";
 import CancelContest from "../CancelContest";
+import { useMediaQuery } from "react-responsive";
 
 interface ContestNameProps {
   contestName: string;
-  address: string;
-  chainName: string;
 }
 
-const ContestName: FC<ContestNameProps> = ({ contestName, address, chainName }) => {
+const ContestName: FC<ContestNameProps> = ({ contestName }) => {
   const { contestState } = useContestStateStore(state => state);
   const isContestCanceled = contestState === ContestStateEnum.Canceled;
+  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
 
   return (
-    <div className="flex items-center justify-between">
+    <div className={`flex items-center justify-between md:justify-normal`}>
+      {!isMobile && <CancelContest />}
       <GradientText text={contestName} isStrikethrough={isContestCanceled} />
-      <CancelContest />
+      {isMobile && <CancelContest />}
     </div>
   );
 };