refactor-cart

package.json

@@ -39,6 +39,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.3.0",
+    "react-virtualized": "^9.22.5",
     "server-only": "^0.0.1",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.2.1",
@@ -59,6 +60,7 @@
     "@types/node": "^20.11.6",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/react-virtualized": "^9.21.30",
     "@vercel/analytics": "^1.1.2",
     "@vercel/blob": "^0.19.0",
     "@vercel/speed-insights": "^1.0.7",

src/app/cart/hooks/use-checkout.ts

@@ -63,7 +63,7 @@ const useCheckout = () => {
   const initialCurrentChainId = useChainId()
   const { address: userAddress } = useAccount()
   const { data: walletClient } = useWalletClient()
-  const { cartItems, resetCart, setCartItems } = useCart()
+  const { cartItems, resetCart, removeCartItem } = useCart()
   const { mint, nonce: mintNonce, listHasBeenMinted } = useMintEFP()
 
   const [currentChainId, setCurrentChainId] = useState(initialCurrentChainId)
@@ -155,7 +155,7 @@ const useCheckout = () => {
       setListOpsFinished(true)
 
       if (hash) {
-        setCartItems(cartItems.filter(item => !items.includes(item)))
+        items.forEach(item => removeCartItem(item.listOp))
         queryClient.invalidateQueries({ queryKey: ['following'] })
         queryClient.invalidateQueries({ queryKey: ['profile'] })
       }
@@ -183,7 +183,7 @@ const useCheckout = () => {
     const splitSize = LIST_OP_LIMITS[chainId || DEFAULT_CHAIN.id] || 1000
 
     for (let i = 0; i < cartItems.length; i += splitSize) {
-      splitListOps.push(cartItems.slice(i, i + splitSize))
+      splitListOps.push(Array.from(cartItems.values()).slice(i, i + splitSize))
     }
 
     const cartItemActions: Action[] = splitListOps.map((listOps, i) => ({
@@ -282,8 +282,9 @@ const useCheckout = () => {
   }, [moveToNextAction, executeActionByIndex, getRequiredChain, currentChainId, currentActionIndex])
 
   const onFinish = useCallback(() => {
-    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
-    if (regex.test(navigator.userAgent)) track(`${listHasBeenMinted ? 'Mint' : 'Checkout'} - Mobile`)
+    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+    if (regex.test(navigator.userAgent))
+      track(`${listHasBeenMinted ? 'Mint' : 'Checkout'} - Mobile`)
     else track(`${listHasBeenMinted ? 'Mint' : 'Checkout'} - Desktop`)
 
     if (fetchFreshStats) refetchStats()

src/app/cart/hooks/useImportModal.ts

@@ -2,10 +2,10 @@ import type { Address } from 'viem'
 import { useEffect, useMemo, useState } from 'react'
 import { init, useQuery, useQueryWithPagination } from '@airstack/airstack-react'
 
-import { useCart } from '#/contexts/cart-context'
 import { listOpAddListRecord } from '#/utils/list-ops'
 import type { ImportPlatformType } from '#/types/common'
 import { useEFPProfile } from '#/contexts/efp-profile-context'
+import { useCart, type CartItem } from '#/contexts/cart-context'
 
 init('0366bbe276e04996af5f92ebb7899f19', { env: 'dev', cache: true })
 
@@ -28,7 +28,7 @@ const useImportModal = (platform: ImportPlatformType) => {
   const [onlyImportWithEns, setOnlyImportWithEns] = useState(true)
   const [isFollowingsLoading, setIsFollowingsLoading] = useState(false)
 
-  const { cartItems, setCartItems, getAddressesFromCart } = useCart()
+  const { cartItems, getAddressesFromCart, setCartItems } = useCart()
   const { allFollowingAddresses } = useEFPProfile()
 
   useEffect(() => {
@@ -144,12 +144,16 @@ const useImportModal = (platform: ImportPlatformType) => {
             getAddressesFromCart().includes(addr.toLowerCase())
           )
       )
-      .map(followingAddress => ({
-        listOp: listOpAddListRecord(followingAddress.address as Address),
-        import: platform
-      }))
+      .map(
+        followingAddress =>
+          ({
+            listOp: listOpAddListRecord(followingAddress.address as Address),
+            import: platform
+          }) as CartItem
+      )
+      .concat(Array.from(cartItems.values()))
 
-    setCartItems([...cartItems, ...newCartItems])
+    setCartItems(newCartItems)
   }
 
   const alreadyFollow = followings.filter(({ address: addr }) =>

src/app/swipe/components/loading-recommended-cards.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+
 import UserProfileCard from "#/components/user-profile-card";
 import type { ProfileDetailsResponse } from "#/types/requests";
 

src/components/follow-button/hooks/use-follow-button.ts

@@ -155,13 +155,13 @@ export const useFollowButton = ({
 
     // remove address and tags for this address from cart if it's a pending follow
     if (buttonState === 'Pending Following') {
-      const addressTags = cartItems.filter(item =>
+      const addressTags = Array.from(cartItems.values()).filter(item =>
         item.listOp.opcode > 2 && isTagListOp(item.listOp)
           ? extractAddressAndTag(item.listOp).address === address
           : false
       )
       removeCartItem(listOpAddListRecord(address))
-      addressTags.flatMap(item => removeCartItem(item.listOp))
+      addressTags.forEach(item => removeCartItem(item.listOp))
       return
     }
     // remove from cart if it's a pending unfollow

src/components/follow-list/components/list-item/follow-list-item.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Address } from "viem";
 import { useQuery } from "@tanstack/react-query";
 
@@ -24,52 +25,54 @@ export interface FollowListItemProps {
   isBlockedBy?: boolean;
 }
 
-const FollowListItem: React.FC<FollowListItemProps> = ({
-  className = "",
-  address,
-  ensProfile,
-  showFollowsYouBadges,
-  showTags,
-  tags,
-  counts,
-  isFollowers,
-  canEditTags,
-  isBlockedList,
-  isBlockedBy,
-}) => {
-  const { data: fetchedEnsProfile, isLoading: isEnsProfileLoading } = useQuery({
-    queryKey: ["ens metadata", address],
-    queryFn: async () => (ensProfile ? ensProfile : await resolveEnsProfile(address)),
-  });
+const FollowListItem: React.FC<FollowListItemProps> = React.memo(
+  ({
+    className = "",
+    address,
+    ensProfile,
+    showFollowsYouBadges,
+    showTags,
+    tags,
+    counts,
+    isFollowers,
+    canEditTags,
+    isBlockedList,
+    isBlockedBy,
+  }) => {
+    const { data: fetchedEnsProfile, isLoading: isEnsProfileLoading } = useQuery({
+      queryKey: ["ens metadata", address],
+      queryFn: async () => (ensProfile ? ensProfile : await resolveEnsProfile(address)),
+    });
 
-  const profileName = fetchedEnsProfile?.name;
-  const profileAvatar = fetchedEnsProfile?.avatar;
+    const profileName = fetchedEnsProfile?.name;
+    const profileAvatar = fetchedEnsProfile?.avatar;
 
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between hover:bg-text/5 transition-all p-1.5 2xl:p-2 rounded-xl",
-        className
-      )}
-    >
-      {/* Left section: Avatar, Name, and Tags */}
-      <FollowListItemName
-        address={address}
-        avatarUrl={profileAvatar}
-        name={profileName}
-        counts={counts}
-        showFollowsYouBadges={showFollowsYouBadges}
-        showTags={showTags}
-        tags={tags}
-        isFollowers={isFollowers}
-        canEditTags={canEditTags}
-        isEnsProfileLoading={isEnsProfileLoading}
-        isBlockedList={isBlockedList}
-      />
-      {/* Right section: Follow Button with consistent width */}
-      <FollowButton isBlockedBy={isBlockedBy} address={address} />
-    </div>
-  );
-};
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-between hover:bg-text/5 transition-all p-1.5 2xl:p-2 rounded-xl",
+          className
+        )}
+      >
+        {/* Left section: Avatar, Name, and Tags */}
+        <FollowListItemName
+          address={address}
+          avatarUrl={profileAvatar}
+          name={profileName}
+          counts={counts}
+          showFollowsYouBadges={showFollowsYouBadges}
+          showTags={showTags}
+          tags={tags}
+          isFollowers={isFollowers}
+          canEditTags={canEditTags}
+          isEnsProfileLoading={isEnsProfileLoading}
+          isBlockedList={isBlockedList}
+        />
+        {/* Right section: Follow Button with consistent width */}
+        <FollowButton isBlockedBy={isBlockedBy} address={address} />
+      </div>
+    );
+  }
+);
 
 export default FollowListItem;

src/components/follow-list/components/socials/social-follow-button.tsx

@@ -12,7 +12,7 @@ interface SocialFollowButtonProps {
 
 const SocialFollowButton: React.FC<SocialFollowButtonProps> = ({ profiles }) => {
   const { t } = useTranslation();
-  const { cartItems, setCartItems } = useCart();
+  const { cartItems, removeCartItem } = useCart();
 
   const removeCarItems = async () => {
     const address = profiles?.[0]?.address;
@@ -26,7 +26,7 @@ const SocialFollowButton: React.FC<SocialFollowButtonProps> = ({ profiles }) =>
         : !addresses.includes(`0x${item.listOp.data.toString("hex")}`.toLowerCase())
     );
 
-    setCartItems(filteredCartItems);
+    filteredCartItems.forEach((item) => removeCartItem(item.listOp));
   };
 
   return (

src/components/follow-list/components/socials/socialTagDropdown.tsx

@@ -26,8 +26,14 @@ const SocialTagDropdown: React.FC<SocialTagDropdownProps> = ({ profiles, platfor
     setTagDropdownOpen(false);
   });
 
-  const { cartItems, setCartItems, hasListOpAddTag, hasListOpRemoveTag, getTagsFromCartByAddress } =
-    useCart();
+  const {
+    cartItems,
+    addCartItem,
+    removeCartItem,
+    hasListOpAddTag,
+    hasListOpRemoveTag,
+    getTagsFromCartByAddress,
+  } = useCart();
   const { t } = useTranslation();
   const { recentTags, addRecentTag } = useEFPProfile();
 
@@ -51,7 +57,7 @@ const SocialTagDropdown: React.FC<SocialTagDropdownProps> = ({ profiles, platfor
         import: platform,
       }));
 
-      setCartItems([...cartItems, ...newCartItems]);
+      newCartItems.forEach((item) => addCartItem(item));
     }
   };
 
@@ -64,15 +70,15 @@ const SocialTagDropdown: React.FC<SocialTagDropdownProps> = ({ profiles, platfor
     setDisplayedTags((prevTags) => prevTags.filter((prevTag) => prevTag !== tag));
     await yieldToMain();
 
-    const filteredCartItems = cartItems.filter(
+    const filteredCartItems = Array.from(cartItems.values()).filter(
       (item) =>
         !(isTagListOp(item.listOp)
           ? addresses.includes(extractAddressAndTag(item.listOp).address.toLowerCase()) &&
             extractAddressAndTag(item.listOp).tag === tag
           : false)
     );
 
-    setCartItems(filteredCartItems);
+    filteredCartItems.forEach((item) => removeCartItem(item.listOp));
   };
 
   const addCustomTag = () => {

src/components/follow-list/index.tsx

@@ -1,4 +1,5 @@
 import type { Address } from "viem";
+import { List } from "react-virtualized";
 import { useTranslation } from "react-i18next";
 import Image, { type StaticImageData } from "next/image";
 
@@ -126,7 +127,7 @@ export function FollowList({
                 </div>
               )
           )}
-          {profiles?.map(({ address, tags, ens, counts }) => (
+          {/* {profiles?.map(({ address, tags, ens, counts }) => (
             <FollowListItem
               className={listItemClassName}
               key={address}
@@ -141,7 +142,37 @@ export function FollowList({
               isBlockedBy={isBlockedBy}
               isFollowers={isFollowers}
             />
-          ))}
+          ))} */}
+          <List
+            autoHeight={true}
+            autoWidth={true}
+            height={100000}
+            width={2000}
+            rowCount={profiles?.length || 0}
+            rowHeight={64}
+            className="gap-1"
+            rowRenderer={({ key, index }) => {
+              const profile = profiles?.[index];
+              if (!profile) return null;
+
+              return (
+                <FollowListItem
+                  className={listItemClassName}
+                  key={profile.address}
+                  address={profile.address}
+                  ensProfile={profile.ens}
+                  showFollowsYouBadges={showFollowsYouBadges}
+                  showTags={showTags}
+                  tags={profile.tags}
+                  counts={profile.counts}
+                  canEditTags={canEditTags}
+                  isBlockedList={isBlockedList}
+                  isBlockedBy={isBlockedBy}
+                  isFollowers={isFollowers}
+                />
+              );
+            }}
+          />
           {isLoadingMore &&
             new Array(loadingRows)
               .fill(1)

src/components/top-eight/hooks/use-edit-top-eight.ts

@@ -25,7 +25,7 @@ export const useEditTopEight = (profiles: TopEightProfileType[]) => {
   const { cartItems, addCartItem, setLoadingCartItems } = useCart()
   const topEightInCart = useMemo(
     () =>
-      cartItems
+      Array.from(cartItems.values())
         .filter(
           ({ listOp }) =>
             listOp.opcode === 3 &&
@@ -41,7 +41,7 @@ export const useEditTopEight = (profiles: TopEightProfileType[]) => {
   const [editedProfiles, setEditedProfiles] = useState([...profiles, ...topEightInCart])
 
   const validTopEightsLength = useMemo(() => {
-    const topEightRemoved = cartItems.filter(
+    const topEightRemoved = Array.from(cartItems.values()).filter(
       ({ listOp }) =>
         listOp.opcode === 4 && isTagListOp(listOp) && extractAddressAndTag(listOp).tag === 'top8'
     )
@@ -102,26 +102,6 @@ export const useEditTopEight = (profiles: TopEightProfileType[]) => {
     if (!roles?.isManager) return toast.error(t('not manager'))
 
     setAddProfileSearch('')
-
-    // const hasMultipleNames =
-    //   addProfileSearch.includes(',') ||
-    //   addProfileSearch.includes(' ') ||
-    //   addProfileSearch.includes('\n')
-
-    // if (hasMultipleNames) {
-    //   const namesToAdd = addProfileSearch
-    //     .replaceAll(',', ' ')
-    //     .replaceAll('\n', ' ')
-    //     .split(' ')
-    //     .map(name => name.trim())
-    //     .filter(name => !!name)
-
-    //   const addedToCart = await Promise.all(namesToAdd.map(async name => await addToCart(name)))
-
-    //   const erroredNames = addedToCart.filter(item => item?.user).map(item => item?.user)
-    //   if (erroredNames.length > 0) toast.error(`${t('unresolved')} ${formatError(erroredNames)}`)
-    // }
-
     const addedToCart = await addToCart(addProfileSearch)
     if (addedToCart?.user) toast.error(`${t('unresolved')} ${addProfileSearch}`)
   }