fix: sticky project bar (#4307)

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/app.scss",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

doc/development.md

@@ -168,3 +168,15 @@ yarn test
    ```
 
 1. Run tests.
+
+# Debugging and Troubleshooting
+
+## Analyzing bundle size
+
+To analyze the bundle size, run the following command:
+
+```bash
+ANALYZE=true yarn build
+```
+
+This command will generate a report in the `dist` folder.

package.json

@@ -81,6 +81,7 @@
     "@lingui/macro": "^4.0.0",
     "@lingui/react": "^4.0.0",
     "@metamask/providers": "^10.0.0",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@reduxjs/toolkit": "^1.6.2",
     "@supabase/auth-helpers-nextjs": "^0.5.4",
     "@supabase/auth-helpers-react": "^0.3.1",
@@ -104,6 +105,8 @@
     "autolinker": "^3.14.3",
     "axios": "1.6.0",
     "bottleneck": "^2.19.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "discord.js": "^14.9.0",
     "dompurify": "^3.0.5",
     "erc-20-abi": "^1.0.0",
@@ -121,6 +124,7 @@
     "less": "4.1.2",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
+    "lucide-react": "^0.378.0",
     "mjml": "^4.13.0",
     "mustache": "^4.2.0",
     "next": "^13.4.3",
@@ -143,7 +147,8 @@
     "sass": "^1.52.1",
     "sharp": "^0.32.6",
     "swiper": "^9.2.3",
-    "tailwind-merge": "^1.8.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "^1.2.0",
     "use-deep-compare-effect": "^1.6.1",
     "use-resize-observer": "^9.1.0",
@@ -163,7 +168,7 @@
     "@graphql-codegen/typescript-resolvers": "^3.2.0",
     "@lingui/loader": "^4.4.0",
     "@lingui/swc-plugin": "4.0.4",
-    "@next/bundle-analyzer": "^13.2.4",
+    "@next/bundle-analyzer": "^14.2.0",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

src/@/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn(className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

src/@/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/components/Callout/Callout.tsx

@@ -45,7 +45,7 @@ export const Callout: React.FC<React.PropsWithChildren<CalloutProps>> &
       )}
       <div
         className={twMerge(
-          'inline-block overflow-hidden overflow-ellipsis',
+          'inline-block flex-1 overflow-hidden overflow-ellipsis',
           collapsible && !expanded ? 'whitespace-nowrap' : 'whitespace-normal',
         )}
       >

src/components/Navbar/SiteNavigation.tsx

@@ -30,7 +30,7 @@ export function SiteNavigation() {
 
 const DesktopSiteNavigation = () => {
   return (
-    <div className="z-10 w-full min-w-0 px-6 xl:px-20">
+    <div className="z-20 w-full min-w-0 px-6 xl:px-20">
       <nav className="flex items-center gap-12 bg-white px-0 py-4 dark:bg-slate-900">
         <>
           <div className="flex items-center justify-between py-6 px-5 md:inline-flex md:py-0 md:px-0">
@@ -86,7 +86,7 @@ const DesktopSiteNavigation = () => {
 
 const MobileSiteNavigation = () => {
   return (
-    <div className="fixed z-10 w-full min-w-0 md:static md:px-6 xl:px-20">
+    <div className="fixed z-20 w-full min-w-0 md:static md:px-6 xl:px-20">
       <Popover
         className="bg-white dark:bg-slate-900 md:flex md:items-center md:gap-12 md:px-0 md:py-4"
         as="nav"

src/components/ProjectLogo.tsx

@@ -1,35 +1,7 @@
-import { readNetwork } from 'constants/networks'
-import { NetworkName } from 'models/networkName'
+import { useProjectLogoSrc } from 'hooks/useProjectLogoSrc'
 import { PV } from 'models/pv'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { cidFromUrl, ipfsGatewayUrl, ipfsUriToGatewayUrl } from 'utils/ipfs'
-
-// Override some project logos.
-const imageUriOverridePath = '/assets/images/image-uri-overrides'
-const MAINNET_URI_OVERRIDES: { [k: number]: string } = {
-  1: `${imageUriOverridePath}/juiceboxdao_logo.webp`, // the on-chain logo's filesize is too large. This is a smaller version.
-  470: `${imageUriOverridePath}/breadfruit_logo.webp`,
-}
-
-const GOERLI_URI_OVERRIDES: { [k: number]: string } = {
-  1: `${imageUriOverridePath}/juiceboxdao_logo.webp`, // the on-chain logo's filesize is too large. This is a smaller version.
-}
-
-const SEPOLIA_URI_OVERRIDES: { [k: number]: string } = {
-  1: `${imageUriOverridePath}/juiceboxdao_logo.webp`, // the on-chain logo's filesize is too large. This is a smaller version.
-}
-
-const imgOverrideForProjectId = (projectId: number) => {
-  switch (readNetwork.name) {
-    case NetworkName.mainnet:
-      return MAINNET_URI_OVERRIDES[projectId]
-    case NetworkName.goerli:
-      return GOERLI_URI_OVERRIDES[projectId]
-    case NetworkName.sepolia:
-      return SEPOLIA_URI_OVERRIDES[projectId]
-  }
-}
 
 type ProjectLogoBaseProps = {
   className?: string
@@ -51,37 +23,7 @@ export default function ProjectLogo({
   pv,
 }: ProjectLogoBaseProps) {
   const [srcLoadError, setSrcLoadError] = useState(false)
-  /**
-   * If URI is passed, use it.
-   * If URI isn't passed or is undefined, use the API logo. THIS REQUIRES PV + PROJECT ID
-   */
-  const imageSrc = useMemo(() => {
-    if (projectId) {
-      const override = imgOverrideForProjectId(projectId)
-      if (override) return override
-    }
-
-    if (!uri) {
-      // Attempt to use the API logo if projectId and pv exists.
-      if (projectId && pv) {
-        return `/api/juicebox/pv/${pv}/project/${projectId}/logo`
-      }
-
-      return undefined
-    }
-
-    // Some older JB projects have a logo URI hardcoded to use Pinata.
-    // JBM no longer uses Pinata.
-    // This rewrites those URLs to use the Infura gateway.
-    if (uri.startsWith('https://jbx.mypinata.cloud')) {
-      const cid = cidFromUrl(uri)
-      // Use `/api/image/[url].ts` to validate filetype.
-      return `/api/image/${encodeURIComponent(ipfsGatewayUrl(cid))}`
-    }
-
-    return `/api/image/${encodeURIComponent(ipfsUriToGatewayUrl(uri))}`
-  }, [uri, projectId, pv])
-
+  const imageSrc = useProjectLogoSrc({ projectId, uri, pv })
   const validImg = imageSrc && !srcLoadError
 
   return (

src/components/modals/JuiceModal.tsx

@@ -31,6 +31,7 @@ export type JuiceModalProps = {
   okButtonForm?: string
   okText?: ReactNode
   okButtonClassName?: string
+  hideOkButton?: boolean
   okLoading?: boolean
   cancelText?: ReactNode
   cancelButtonClassName?: string
@@ -58,6 +59,7 @@ export const JuiceModal = ({
   okText = t`OK`,
   okLoading = false,
   okButtonClassName,
+  hideOkButton,
   cancelText = t`Cancel`,
   cancelButtonClassName,
   hideCancelButton,
@@ -136,18 +138,20 @@ export const JuiceModal = ({
                 buttonPositionClasses.container,
               )}
             >
-              <CTAButton
-                form={okButtonForm}
-                className={twMerge(
-                  'order-2',
-                  buttonPositionClasses.self,
-                  okButtonClassName,
-                )}
-                loading={okLoading}
-                onClick={onOk}
-              >
-                {okText}
-              </CTAButton>
+              {!hideOkButton && (
+                <CTAButton
+                  form={okButtonForm}
+                  className={twMerge(
+                    'order-2',
+                    buttonPositionClasses.self,
+                    okButtonClassName,
+                  )}
+                  loading={okLoading}
+                  onClick={onOk}
+                >
+                  {okText}
+                </CTAButton>
+              )}
               {!hideCancelButton && (
                 <CancelButton
                   className={twMerge(