feat(frontend): update campaigns page ui to the new standards (#432)

* feat(frontend): update campaigns page ui to the new standards * chore: add changeset * fix(frontend): trigger refetching of cached entities when chain changes --------- Co-authored-by: luzzifoss <fedeluzzi00@gmail.com>
carrot-kpi · Oct 13, 2023 · 6b2e814 · 6b2e814
1 parent 82b4181
commit 6b2e814
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 44 deletions.
diff --git a/.changeset/yellow-spies-listen.md b/.changeset/yellow-spies-listen.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": minor
+---
+
+Update UI in campaigns page to conform to the new enforced max width aesthetic
diff --git a/packages/frontend/src/components/layout/index.tsx b/packages/frontend/src/components/layout/index.tsx
@@ -7,24 +7,31 @@ import {
 } from "../../constants";
 import { CarrotMarquee } from "../ui/carrot-marquee";
 import { Footer } from "../ui/footer";
-import { Navbar } from "../ui/navbar";
+import { Navbar, type NavbarProps } from "../ui/navbar";
 
 interface LayoutProps {
     navbarLinks?: NavbarLink[];
+    navbarBgColor?: NavbarProps["bgColor"];
     noNavbar?: boolean;
     footerLinks?: FooterLink[];
     children?: ReactNode;
 }
 
 export const Layout = ({
     navbarLinks,
+    navbarBgColor,
     noNavbar,
     footerLinks,
     children,
 }: LayoutProps) => {
     return (
         <div className="w-full flex flex-col bg-grid-light dark:bg-grid-dark bg-left-top">
-            {!noNavbar && <Navbar links={navbarLinks || NAVBAR_LINKS} />}
+            {!noNavbar && (
+                <Navbar
+                    links={navbarLinks || NAVBAR_LINKS}
+                    bgColor={navbarBgColor}
+                />
+            )}
             {children}
             <CarrotMarquee />
             <Footer footerLinks={footerLinks || FOOTER_LINKS} />

diff --git a/packages/frontend/src/components/ui/navbar/index.tsx b/packages/frontend/src/components/ui/navbar/index.tsx
@@ -10,15 +10,30 @@ import { PreferencesPopover } from "./popovers/preferences";
 import { useClickAway } from "react-use";
 import { NavbarVerticalLayout } from "./vertical-layout";
 import type { NavbarLink } from "../../../constants";
+import { cva } from "class-variance-authority";
+
+const rootStyles = cva(
+    ["flex", "justify-center", "px-4", "xl:px-32", "bg-grid-light"],
+    {
+        variants: {
+            bgColor: {
+                orange: ["bg-orange"],
+                transparent: ["bg-transparent"],
+            },
+        },
+    },
+);
 
 export interface NavbarProps {
     mode?: "standard" | "modal";
+    bgColor?: "transparent" | "orange";
     onDismiss?: () => void;
     links?: NavbarLink[];
 }
 
 export const Navbar = ({
     mode = "standard",
+    bgColor = "transparent",
     onDismiss,
     links = [],
 }: NavbarProps) => {
@@ -58,7 +73,7 @@ export const Navbar = ({
                 links={links}
                 onNavbarClose={() => setOpen(false)}
             />
-            <div className="flex justify-center px-4 xl:px-32 bg-transparent">
+            <div className={rootStyles({ bgColor })}>
                 <div className="w-full max-w-screen-2xl relative flex items-center justify-between py-5 md:py-8 xl:py-11">
                     <div className="flex gap-4 items-center">
                         <div className="flex items-center">

diff --git a/packages/frontend/src/pages/campaigns/index.tsx b/packages/frontend/src/pages/campaigns/index.tsx
@@ -115,45 +115,41 @@ export const Campaigns = () => {
     );
 
     return (
-        <Layout>
-            <div className="relative">
-                <div className="relative">
-                    <div className="px-6 py-16 md:px-10">
-                        <Typography variant="h1">
-                            {t("campaign.all")}
-                        </Typography>
-                    </div>
-                    <div id="__campaigns_page">
-                        <CampaignsTopNav
-                            sortOptions={SORT_OPTIONS}
-                            stateOptions={STATE_OPTIONS}
-                            state={state}
-                            sort={sort}
-                            filtersOpen={filtersOpen}
-                            setSearchQuery={setSearchQuery}
-                            onOrderingChange={handleSortChange}
-                            onStateChange={handleStateChange}
-                            onToggleFilters={toggleFilters}
-                        />
-                    </div>
-                    <div className="flex">
-                        <SideFilters
-                            open={filtersOpen}
-                            selectedTemplates={templates}
-                            setSelectedTemplates={handleTemplatesUpdate}
-                            selectedOracles={oracles}
-                            setSelectedOracles={handleOraclesTemplatesUpdate}
-                            toggleFilters={toggleFilters}
+        <Layout navbarBgColor="orange">
+            <div className="w-full relative flex flex-col items-center px-4 md:px-10 lg:px-14 xl:px-40">
+                <div className="py-16 w-full max-w-screen-2xl">
+                    <Typography variant="h1">{t("campaign.all")}</Typography>
+                </div>
+            </div>
+            <div className="w-full" id="__campaigns_page">
+                <CampaignsTopNav
+                    sortOptions={SORT_OPTIONS}
+                    stateOptions={STATE_OPTIONS}
+                    state={state}
+                    sort={sort}
+                    filtersOpen={filtersOpen}
+                    setSearchQuery={setSearchQuery}
+                    onOrderingChange={handleSortChange}
+                    onStateChange={handleStateChange}
+                    onToggleFilters={toggleFilters}
+                />
+            </div>
+            <div className="w-full flex flex-col items-center px-4 md:px-10 lg:px-14 xl:px-40">
+                <SideFilters
+                    open={filtersOpen}
+                    selectedTemplates={templates}
+                    setSelectedTemplates={handleTemplatesUpdate}
+                    selectedOracles={oracles}
+                    setSelectedOracles={handleOraclesTemplatesUpdate}
+                    toggleFilters={toggleFilters}
+                />
+                <div className="flex flex-col items-center w-full py-12 md:py-16">
+                    <div className="flex flex-wrap justify-center gap-5 lg:justify-start">
+                        <Grid
+                            loading={loading}
+                            kpiTokensReady={kpiTokensReady}
+                            items={sortedAndfilteredKPITokens}
                         />
-                        <div className="flex flex-col items-center w-full my-16 sm:mx-3 md:mx-4 lg:mx-5 space-y-12 md:space-y-16">
-                            <div className="flex flex-wrap justify-center gap-5 lg:justify-start">
-                                <Grid
-                                    loading={loading}
-                                    kpiTokensReady={kpiTokensReady}
-                                    items={sortedAndfilteredKPITokens}
-                                />
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>

diff --git a/packages/frontend/src/pages/campaigns/top-nav/index.tsx b/packages/frontend/src/pages/campaigns/top-nav/index.tsx
@@ -41,8 +41,8 @@ export const CampaignsTopNav = ({
     );
 
     return (
-        <div className="flex px-6 py-6 bg-white border-t border-b border-black md:px-12 dark:bg-black">
-            <div className="flex flex-col items-center justify-between w-full md:flex-row">
+        <div className="flex justify-center px-6 py-6 bg-white border-t border-b border-black md:px-12 dark:bg-black">
+            <div className="w-full max-w-screen-2xl flex flex-col items-center justify-between md:flex-row">
                 <div className="flex flex-col w-full gap-5 md:flex-row">
                     <div className="flex gap-5">
                         {/* <ToggleFiltersButton

diff --git a/packages/frontend/src/pages/home/hero/index.tsx b/packages/frontend/src/pages/home/hero/index.tsx
@@ -64,7 +64,7 @@ export const Hero = ({ featuredKPITokens }: HeroProps) => {
     return (
         <div className="flex flex-col items-center bg-orange bg-grid-light dark:bg-grid-dark bg-left-top">
             <div className="w-full">
-                <Navbar links={NAVBAR_LINKS} />
+                <Navbar bgColor="orange" links={NAVBAR_LINKS} />
             </div>
             <div className="w-full relative">
                 {featuredKPITokens.length === 0 ? (

diff --git a/packages/frontend/src/state/api.ts b/packages/frontend/src/state/api.ts
@@ -31,6 +31,7 @@ export const staticApi = createCarrotApi({
         >({
             serializeQueryArgs: ({ endpointName, queryArgs }) => {
                 return `${endpointName}(${JSON.stringify({
+                    chainId: queryArgs.publicClient?.chain?.id,
                     blacklistedAddresses: queryArgs.blacklistedAddresses,
                     featuredAddresses: queryArgs.featuredAddresses,
                     preferDecentralization: queryArgs.preferDecentralization,
@@ -94,6 +95,7 @@ export const applicationApi = createCarrotApi({
             providesTags: [LATEST_KPI_TOKEN_QUERY_TAG],
             serializeQueryArgs: ({ endpointName, queryArgs }) => {
                 return `${endpointName}(${JSON.stringify({
+                    chainId: queryArgs.publicClient?.chain?.id,
                     blacklistedAddresses: queryArgs.blacklistedAddresses,
                     limit: queryArgs.limit,
                     preferDecentralization: queryArgs.preferDecentralization,