Merge pull request #287 from ethereumfollowprotocol/navbar-changes

navigation changes
ethereumfollowprotocol · Dec 3, 2024 · ce18771 · ce18771
2 parents 1c07fc2 + 7ac292a
commit ce18771
Show file tree

Hide file tree

Showing 33 changed files with 518 additions and 364 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 
 <p align="center">
   <a href="https://pr.new/ethereumfollowprotocol/app"><img src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow" /></a>
-  <a href="https://discord.ethfollow.xyz"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat" /></a>
+  <a href="https://discord.com/invite/ZUyG3mSXFD"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat" /></a>
   <a href="https://x.com/efp"><img src="https://img.shields.io/twitter/follow/efp?label=%40efp&style=social&link=https%3A%2F%2Fx.com%2Fefp" alt="x account" /></a>
 </p>
 

diff --git a/next.config.mjs b/next.config.mjs
@@ -139,7 +139,7 @@ const nextConfig = {
 		},
 		{
 			source: "/(chat|discord)",
-			destination: "https://discord.ethfollow.xyz",
+			destination: "https://discord.com/invite/ZUyG3mSXFD",
 			permanent: true,
 		},
 	],

diff --git a/public/assets/art/friends-enemies-mobile.svg b/public/assets/art/friends-enemies-mobile.svg
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
@@ -19,6 +19,10 @@
   "sponsors": "Supported by grants from:",
   "support": "Support",
 
+  "integrate description": "If you integrate EFP into your app, message us and we'll add you to this list, promote you on Twitter, and send you a special EFP Integration POAP!",
+  "integrate efp": "Integrate EFP",
+  "integrate efp description": "EFP is an onchain social graph protocol for Ethereum accounts, a primitive of the Ethereum identity stack designed to complement ENS and Sign-in with Ethereum.",
+
   "profile": "My Profile",
   "profile error": "User doesn't exist",
   "connect to see more": "Connect your wallet to start swiping!",

diff --git a/src/app/about/landing/components/follower-list.tsx b/src/app/about/landing/components/follower-list.tsx
@@ -25,7 +25,7 @@ const FollowerList = () => {
         src={LineDesktop}
         alt='line'
         width={3}
-        className='absolute hidden lg:block -bottom-[153px] xl:-bottom-[153px] left-[760px] xl:left-[768px]'
+        className='absolute hidden lg:block -bottom-[153px] xl:-bottom-[153px] left-[650px]'
       />
       <Image src={LineMobile} alt='line' width={4} className='absolute lg:hidden -bottom-[46px] ' />
     </div>

diff --git a/src/app/about/landing/components/integrations.tsx b/src/app/about/landing/components/integrations.tsx
diff --git a/src/app/about/landing/components/supported-by.tsx b/src/app/about/landing/components/supported-by.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { useTheme } from 'next-themes'
+import { useTranslation } from 'react-i18next'
+
+import EnsDao from 'public/assets/sponsors/ensdao.svg'
+import Mask from 'public/assets/sponsors/masknetwork.svg'
+import Line from 'public/assets/lines/desktop/line-5.svg'
+import EnsDaoDark from 'public/assets/sponsors/ensdao-dark.svg'
+import MaskDark from 'public/assets/sponsors/masknetwork-dark.svg'
+
+const SupportedBy = () => {
+  const { t } = useTranslation()
+  const { resolvedTheme } = useTheme()
+
+  return (
+    <div className='flex flex-col items-center gap-0 relative'>
+      <Image
+        src={Line}
+        alt='line'
+        width={3}
+        height={154}
+        className='absolute -bottom-[100px] lg:-bottom-[250px]'
+      />
+      <div className='glass-card w-full flex flex-col gap-6 sm:gap-8 items-center px-4 py-6 mx-auto border-[3px] border-[#aaaaaa] text-dark-gray font-bold text-center text-sm rounded-3xl max-w-4xl'>
+        <p className=' text-xl sm:text-2xl md:text-3xl font-bold'>{t('sponsors')}</p>
+        <div className='items-center justify-center px-6 flex-col sm:flex-row w-full flex gap-4 sm:gap-8'>
+          <Link target='_blank' rel='noopener noreferrer' href='https://ensdao.org/'>
+            <Image
+              src={resolvedTheme === 'dark' ? EnsDaoDark : EnsDao}
+              width='180'
+              alt='ens dao'
+              className='mx-auto w-52 sm:w-60 rounded-[2rem] border-[3px] border-[#B879FF] hover:scale-110 transition-transform'
+            />
+          </Link>
+          <Link target='_blank' rel='noopener noreferrer' href='https://mask.io/'>
+            <Image
+              src={resolvedTheme === 'dark' ? MaskDark : Mask}
+              width='180'
+              alt='Mask Network'
+              className='mx-auto w-52 sm:w-60 hover:scale-110 transition-transform border-[3px] rounded-[2rem] border-[#1C68F3]'
+            />
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SupportedBy
diff --git a/src/app/about/landing/index.tsx b/src/app/about/landing/index.tsx
@@ -1,7 +1,7 @@
 import Phrase from './components/phrase'
 import SocialGraph from './components/social-graph'
 import FollowGhost from './components/follow-ghost'
-import Integrations from './components/integrations'
+import SupportedBy from './components/supported-by'
 import FollowerList from './components/follower-list'
 
 const Landing = () => {
@@ -11,7 +11,7 @@ const Landing = () => {
       <SocialGraph />
       <FollowGhost />
       <FollowerList />
-      <Integrations />
+      <SupportedBy />
     </div>
   )
 }

diff --git a/src/app/cart/components/cart-items/cart-items-list.tsx b/src/app/cart/components/cart-items/cart-items-list.tsx
@@ -12,6 +12,7 @@ import SocialProfilesItem, {
 } from '#/components/profile-list/components/social-profiles-item'
 import LoadingRow from '#/components/profile-list/components/list-item/loading-list-item'
 import ProfileListItem from '#/components/profile-list/components/list-item/profile-list-item'
+import ProfileList from '#/components/profile-list'
 
 export interface ProfileListProfile {
   address: Address
@@ -104,7 +105,7 @@ const CartItemsList: React.FC<CartItemsListProps> = ({
           {socialProfiles?.map(social => (
             <SocialProfilesItem key={social.platform} {...social} />
           ))}
-          {(profiles?.length || 0) > 0 && (
+          {(profiles?.length || 0) >= 30 ? (
             <List
               ref={listRef}
               autoWidth={true}
@@ -138,6 +139,12 @@ const CartItemsList: React.FC<CartItemsListProps> = ({
                 )
               }}
             />
+          ) : (
+            <ProfileList
+              profiles={profiles}
+              isLoading={isLoading}
+              className='gap-4 2xl:gap-5 pb-4'
+            />
           )}
         </>
       )}

diff --git a/src/app/cart/components/cart.tsx b/src/app/cart/components/cart.tsx
@@ -20,11 +20,11 @@ import { useEFPProfile } from '#/contexts/efp-profile-context'
 import { PrimaryButton } from '#/components/buttons/primary-button'
 import { DEFAULT_CHAIN, LIST_OP_LIMITS } from '#/lib/constants/chains'
 import useStickyScroll from '#/components/home/hooks/use-sticky-scroll'
+import { useActions } from '#/contexts/actions-context'
 
 const CartItems = lazy(() => import('./cart-items'))
 
 const Cart = () => {
-  const [isCheckingOut, setIsCheckingOut] = useState(false)
   const [importModalOpen, setImportModalOpen] = useState(false)
   const [clearCartModalOpen, setClearCartModalOpen] = useState(false)
   const [selectedPlatform, setSelectedPlatform] = useState<'farcaster'>('farcaster')
@@ -35,6 +35,7 @@ const Cart = () => {
   const { openConnectModal } = useConnectModal()
   const { selectedList, roles } = useEFPProfile()
   const { totalCartItems, cartItems } = useCart()
+  const { setIsCheckingOut, isCheckingOut } = useActions()
 
   const containerRef = useRef<HTMLDivElement>(null)
   const { StickyScrollRef: SidebarRef, onScroll: onScrollSidebar } = useStickyScroll(140)
@@ -62,9 +63,11 @@ const Cart = () => {
       ) : (
         <div
           ref={containerRef}
-          className='flex flex-col-reverse xl:flex-row overflow-y-auto justify-center gap-4 w-full h-full xl:gap-6 pt-[6.75rem] px-2 lg:px-8 pb-6 xl:pb-0'
+          className={cn(
+            'flex flex-col-reverse xl:flex-row overflow-y-auto justify-center gap-4 w-full h-full xl:gap-6 pt-[6.75rem] px-2 lg:px-8 pb-40 sm:pb-44 xl:pb-8',
+            totalCartItems >= 30 && 'xl:pb-0'
+          )}
           onScroll={e => {
-            // onScrollCartItems(e);
             onScrollSidebar(e)
           }}
         >
@@ -73,7 +76,10 @@ const Cart = () => {
           )}
           {clearCartModalOpen && <ClearCartModal closeModal={() => setClearCartModalOpen(false)} />}
           <div
-            className='flex flex-col mb-6 xl:sticky glass-card gap-4 px-1 py-4 h-fit rounded-2xl border-[3px] border-grey xl:max-w-[600px] w-full xl:w-1/3'
+            className={cn(
+              'flex flex-col mb-6 glass-card gap-4 px-1 py-4 h-fit rounded-2xl border-[3px] border-grey xl:max-w-[600px] w-full xl:w-1/3',
+              totalCartItems > 30 && 'xl:sticky'
+            )}
             ref={SidebarRef}
           >
             <div className='w-full flex justify-between items-center px-3 sm:px-5 pt-2'>
@@ -90,24 +96,16 @@ const Cart = () => {
                     setSelectedPlatform('farcaster')
                   }}
                 />
-                {/* <Image
-                  src={LensIcon}
-                  alt='Import from Lens'
-                  width={30}
-                  className='cursor-pointer rounded-lg hover:opacity-75 hover:scale-110 transition-all'
-                  onClick={() => {
-                    setImportModalOpen(true)
-                    setSelectedPlatform('lens')
-                  }}
-                /> */}
               </div>
             </div>
             <Search size='w-full z-50 px-2 sm:px-4 pt-2' isEditor={true} />
             <Recommendations header={t('recommendations')} endpoint='recommended' limit={30} />
           </div>
           <div
-            className='flex flex-col h-fit xl:sticky relative top-0  w-full xl:w-2/3'
-            // ref={CartItemsRef}
+            className={cn(
+              'flex flex-col h-fit relative top-0  w-full xl:w-2/3',
+              totalCartItems >= 30 && 'xl:sticky'
+            )}
           >
             <Suspense
               fallback={
@@ -129,11 +127,11 @@ const Cart = () => {
           {isClient && (
             <div
               className={cn(
-                'fixed md:w-fit w-full bottom-4 sm:bottom-[3vh] right-0 px-2 sm:px-4 lg:right-[3vw] justify-end',
+                'fixed lg:w-fit w-full -bottom-1 lg:bottom-[3vh] right-0 lg:right-[3vw] justify-end',
                 isClient && totalCartItems > 0 ? 'flex' : 'hidden'
               )}
             >
-              <div className='flex gap-1 xxs:gap-2 md:gap-6 w-full border-[3px] border-grey lg:w-fit items-center px-3 py-4 sm:p-4 bg-white/10 justify-between glass-card bg-opacity-50 shadow-xl rounded-xl'>
+              <div className='flex gap-1 xxs:gap-2 md:gap-6 w-full border-[3px] border-b-0 md:border-b-[3px] bg-neutral/50 border-grey lg:w-fit items-center px-3 py-4 sm:p-4 justify-between glass-card bg-opacity-50 shadow-xl rounded-t-xl md:rounded-b-xl'>
                 <div className='flex flex-col gap-1 items-start'>
                   <div className='flex gap-2 items-center'>
                     <p className='text-4xl 3xs:text-5xl sm:text-6xl font-bold'>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -423,6 +423,20 @@ input {
   transition: all 200ms ease-in-out;
 }
 
+/* @starting-style {
+  .nav-menu {
+    transform: translateY(100%);
+  }
+}
+
+@media (max-width: 1024px) {
+  @starting-style {
+    .nav-menu {
+      transform: translateY(-100%);
+    }
+  }
+} */
+
 .loading-ellipsis:after {
   overflow: hidden;
   display: inline-block;