Replace comics/items loading with wagmi useContractReader

NiftyLeague · Sep 29, 2024 · 2cab8f3 · 2cab8f3
1 parent 2893488
commit 2cab8f3
Show file tree

Hide file tree

Showing 17 changed files with 237 additions and 185 deletions.
diff --git a/apps/app/src/app/(private-routes)/dashboard/degens/page.tsx b/apps/app/src/app/(private-routes)/dashboard/degens/page.tsx
@@ -75,15 +75,15 @@ const DashboardDegensPage = (): JSX.Element => {
 
   const { loading: loadingAllRentals, data } = useFetch<Degen[]>(`${DEGEN_BASE_API_URL}/cache/rentals/rentables.json`);
 
-  const { degensBalance, loadingDegens } = useNFTsBalances();
+  const { degensBalances, loadingDegens } = useNFTsBalances();
 
   const loading = loadingAllRentals || loadingDegens;
 
   const populatedDegens: Degen[] = useMemo(() => {
-    if (!degensBalance.length || !data) return [];
+    if (!degensBalances.length || !data) return [];
     // TODO: remove temp fix for 7th tribes
     // return degens.map((degen) => data[degen.id]);
-    return degensBalance.map(degen =>
+    return degensBalances.map(degen =>
       Number(degen.id) <= 9900
         ? (data[Number(degen.id)] as Degen)
         : ({
@@ -108,7 +108,7 @@ const DashboardDegensPage = (): JSX.Element => {
           } as Degen),
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [degensBalance.length, !!data]);
+  }, [degensBalances.length, !!data]);
 
   const theme = useTheme();
   const isScreenLg = useMediaQuery(theme.breakpoints.between('lg', 'xl'));
@@ -320,7 +320,7 @@ const DashboardDegensPage = (): JSX.Element => {
             [...Array(8)].map(renderSkeletonItem)
           ) : dataForCurrentPage.length ? (
             dataForCurrentPage.map(renderDegen)
-          ) : !degensBalance?.length ? (
+          ) : !degensBalances?.length ? (
             <Link href={DEGEN_COLLECTION_URL} target="_blank" rel="noreferrer">
               <EmptyState
                 message="No DEGENs found. Please check your address or go purchase a degen if you have not done so already!"
@@ -343,7 +343,7 @@ const DashboardDegensPage = (): JSX.Element => {
     [
       currentPage,
       dataForCurrentPage,
-      degensBalance?.length,
+      degensBalances?.length,
       filteredData.length,
       isConnected,
       isDrawerOpen,

diff --git a/apps/app/src/app/(private-routes)/dashboard/gamer-profile/page.tsx b/apps/app/src/app/(private-routes)/dashboard/gamer-profile/page.tsx
@@ -38,22 +38,22 @@ const GamerProfile = (): JSX.Element => {
   const { avatarsAndFee } = useProfileAvatarFee();
   const { data } = useFetch<Degen[]>(`${DEGEN_BASE_API_URL}/cache/rentals/rentables.json`);
 
-  const { comicsBalance, degenCount, degensBalance, itemsBalance } = useNFTsBalances();
+  const { comicsBalances, degenCount, degensBalances, itemsBalances } = useNFTsBalances();
 
   const filteredDegens: Degen[] = useMemo(() => {
-    if (degensBalance.length && data) {
-      const mapDegens = degensBalance.map(degen => data[Number(degen.id)]) as Degen[];
+    if (degensBalances.length && data) {
+      const mapDegens = degensBalances.map(degen => data[Number(degen.id)]) as Degen[];
       return mapDegens;
     }
     return [];
-  }, [degensBalance, data]);
+  }, [degensBalances, data]);
 
   const filteredComics = useMemo(
-    () => comicsBalance.filter(comic => comic.balance && comic.balance > 0),
-    [comicsBalance],
+    () => comicsBalances.filter(comic => comic.balance && comic.balance > 0),
+    [comicsBalances],
   );
 
-  const filteredItems = useMemo(() => itemsBalance.filter(item => item.balance && item.balance > 0), [itemsBalance]);
+  const filteredItems = useMemo(() => itemsBalances.filter(item => item.balance && item.balance > 0), [itemsBalances]);
 
   const renderEmptyProfile = () => {
     return (

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/comics-grid.tsx b/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/comics-grid.tsx
@@ -82,7 +82,7 @@ export default function ComicsGrid({
   setSelectedComics: React.Dispatch<React.SetStateAction<Comic[]>>;
   refreshKey: number;
 }) {
-  const { comicsBalance, loadingComics } = useNFTsBalances();
+  const { comicsBalances, loadingComics } = useNFTsBalances();
   const keyCount = useMemo(() => (burnCount.some(v => v === 0) ? 0 : Math.min(...burnCount)), [burnCount]);
   const itemCount = useMemo(() => sum(burnCount) - keyCount * 6, [burnCount, keyCount]);
 
@@ -98,7 +98,7 @@ export default function ComicsGrid({
     if (removed) {
       newBurnCount[comic.id - 1] = 0;
     } else {
-      const comicCount = comicsBalance.find(c => c.id === comic.id)?.balance || 0;
+      const comicCount = comicsBalances.find(c => c.id === comic.id)?.balance || 0;
       newBurnCount[comic.id - 1] = comicCount;
     }
     setBurnCount(newBurnCount);
@@ -122,7 +122,7 @@ export default function ComicsGrid({
           ...gridStyles,
         }}
       >
-        {comicsBalance.map(comic => (
+        {comicsBalances.map(comic => (
           <ImageListItem key={comic.image}>
             <Image
               src={COMPRESSED_COMIC_IMAGES[comic.id - 1] as string}
@@ -166,7 +166,7 @@ export default function ComicsGrid({
                         inputMode: 'numeric',
                         pattern: '[0-9]*',
                         min: 0,
-                        max: comicsBalance.find(c => c.id === comic.id)?.balance || 0,
+                        max: comicsBalances.find(c => c.id === comic.id)?.balance || 0,
                         style: {
                           textAlign: 'center',
                           padding: 2.5,

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/page.tsx b/apps/app/src/app/(private-routes)/dashboard/items/burner/page.tsx
@@ -22,7 +22,7 @@ import ItemsGrid from './_components/items-grid';
 
 const ComicsBurner = () => {
   const router = useRouter();
-  const { itemsBalance } = useNFTsBalances();
+  const { itemsBalances } = useNFTsBalances();
   const { address, tx, writeContracts } = useNetworkContext();
   const [isApprovedForAll, setIsApprovedForAll] = useState(false);
   const [helpDialogOpen, setHelpDialogOpen] = useState(false);
@@ -34,10 +34,10 @@ const ComicsBurner = () => {
   const burnDisabled = burning || selectedComics.length < 1 || burnCount.every(c => !c);
 
   useEffect(() => {
-    if (itemsBalance.length) {
-      setItemsCounts(itemsBalance.map(it => it.balance || 0));
+    if (itemsBalances.length) {
+      setItemsCounts(itemsBalances.map(it => it.balance || 0));
     }
-  }, [itemsBalance]);
+  }, [itemsBalances]);
 
   useEffect(() => {
     const getAllowance = async () => {

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/page.tsx b/apps/app/src/app/(private-routes)/dashboard/items/page.tsx
@@ -26,7 +26,7 @@ const DashboardComicsPage = (): JSX.Element => {
   const [selectedComic, setSelectedComic] = useState<Comic | null>(null);
   const [selectedItem, setSelectedItem] = useState<Item | null>(null);
   const [selectedSubIndex, setSelectedSubIndex] = useState<number>(-1);
-  const { comicsBalance, loadingComics, itemsBalance, loadingItems } = useNFTsBalances();
+  const { comicsBalances, loadingComics, itemsBalances, loadingItems } = useNFTsBalances();
   const router = useRouter();
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
@@ -68,14 +68,14 @@ const DashboardComicsPage = (): JSX.Element => {
   const handleLaunchBurner = () => router.push('items/burner');
 
   const renderComics = useMemo(() => {
-    if (comicsBalance.length === 0 && loadingComics) {
+    if (comicsBalances.length === 0 && loadingComics) {
       return [...Array(6)].map(() => (
         <Grid2 key={uuidv4()}>
           <ComicPlaceholder />
         </Grid2>
       ));
-    } else if (comicsBalance.length > 0) {
-      return comicsBalance.map(comic => (
+    } else if (comicsBalances.length > 0) {
+      return comicsBalances.map(comic => (
         <Grid2 key={comic.id}>
           <ComicCard
             data={comic}
@@ -86,17 +86,17 @@ const DashboardComicsPage = (): JSX.Element => {
       ));
     }
     return null;
-  }, [comicsBalance, loadingComics, selectedComic]);
+  }, [comicsBalances, loadingComics, selectedComic]);
 
   const renderItems = useMemo(() => {
-    if (itemsBalance.length === 0 && loadingItems) {
+    if (itemsBalances.length === 0 && loadingItems) {
       return [...Array(6)].map(() => (
         <Grid2 key={uuidv4()}>
           <ComicPlaceholder />
         </Grid2>
       ));
-    } else if (itemsBalance.length > 0) {
-      return itemsBalance
+    } else if (itemsBalances.length > 0) {
+      return itemsBalances
         .filter(item => !selectedItem?.balance || selectedItem?.balance <= 1 || item.id !== selectedItem?.id)
         .map(item => (
           <Grid2 key={item.id}>
@@ -110,7 +110,7 @@ const DashboardComicsPage = (): JSX.Element => {
     }
     return null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [itemsBalance, loadingItems, selectedItem]);
+  }, [itemsBalances, loadingItems, selectedItem]);
 
   const renderSubItems = useMemo(() => {
     if (!selectedItem?.balance || selectedItem?.balance <= 1) return null;
@@ -159,12 +159,12 @@ const DashboardComicsPage = (): JSX.Element => {
                 onClick={removeComicSelection}
               >
                 {renderComics}
-                {comicsBalance.length > 0 && (
+                {comicsBalances.length > 0 && (
                   <Grid2>
                     <Link href={COMICS_PURCHASE_URL} target="_blank" rel="noreferrer">
                       <BuyCard
                         onBuy={() => {}}
-                        isNew={!comicsBalance.some(comic => comic.balance && comic.balance > 0)}
+                        isNew={!comicsBalances.some(comic => comic.balance && comic.balance > 0)}
                       />
                     </Link>
                   </Grid2>
@@ -212,10 +212,10 @@ const DashboardComicsPage = (): JSX.Element => {
                 )}
                 <Grid2 container flexWrap="wrap" gap={2} justifyContent={{ xs: 'space-between', sm: 'inherit' }}>
                   {renderItems}
-                  {itemsBalance.length > 0 && (
+                  {itemsBalances.length > 0 && (
                     <Grid2>
                       <Link href={ITEM_PURCHASE_URL} target="_blank" rel="noreferrer">
-                        <BuyCard onBuy={() => {}} isNew={!itemsBalance.some(it => it.balance && it.balance > 0)} />
+                        <BuyCard onBuy={() => {}} isNew={!itemsBalances.some(it => it.balance && it.balance > 0)} />
                       </Link>
                     </Grid2>
                   )}

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/MyComics.tsx b/apps/app/src/app/(private-routes)/dashboard/overview/MyComics.tsx
@@ -17,10 +17,10 @@ import { COMICS_PURCHASE_URL } from '@/constants/url';
 const MyComics = (): JSX.Element => {
   const [selectedComic, setSelectedComic] = useState<Comic | null>(null);
   const router = useRouter();
-  const { comicsBalance, loadingComics } = useNFTsBalances();
+  const { comicsBalances, loadingComics } = useNFTsBalances();
   const filteredComics = useMemo(
-    () => comicsBalance.filter(comic => comic.balance && comic.balance > 0),
-    [comicsBalance],
+    () => comicsBalances.filter(comic => comic.balance && comic.balance > 0),
+    [comicsBalances],
   );
 
   const handleViewComic = (comic: Comic) => {

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/MyDegens.tsx b/apps/app/src/app/(private-routes)/dashboard/overview/MyDegens.tsx
@@ -56,16 +56,16 @@ const MyDegens = (): JSX.Element => {
     }
   }, [favsData, setFavDegens]);
 
-  const { loadingDegens, degensBalance } = useNFTsBalances();
+  const { loadingDegens, degensBalances } = useNFTsBalances();
 
   const { data: degensData } = useFetch<Degen[]>(`${DEGEN_BASE_API_URL}/cache/rentals/rentables.json`);
 
   const filteredDegens = useMemo(() => {
-    if (degensBalance.length && degensData) {
-      return degensBalance.map(degen => degensData[Number(degen.id)]).filter(Boolean);
+    if (degensBalances.length && degensData) {
+      return degensBalances.map(degen => degensData[Number(degen.id)]).filter(Boolean);
     }
     return [];
-  }, [degensBalance, degensData]) as Degen[];
+  }, [degensBalances, degensData]) as Degen[];
 
   const settings = {
     slidesToShow: 3,
@@ -147,7 +147,7 @@ const MyDegens = (): JSX.Element => {
   return (
     <>
       <SectionSlider
-        isSlider={filteredDegens.length > 0 && degensBalance.length > 0}
+        isSlider={filteredDegens.length > 0 && degensBalances.length > 0}
         firstSection
         title="My DEGENs"
         variant="h3"
@@ -165,7 +165,7 @@ const MyDegens = (): JSX.Element => {
               <SkeletonDegenPlaceholder />
             </Grid2>
           ))
-        ) : filteredDegens.length && degensBalance.length ? (
+        ) : filteredDegens.length && degensBalances.length ? (
           filteredDegens.map(degen => (
             <Box sx={BoxDegenStyles} key={degen.id}>
               <DegenCard

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/MyItems.tsx b/apps/app/src/app/(private-routes)/dashboard/overview/MyItems.tsx
@@ -12,8 +12,8 @@ import { ITEM_PURCHASE_URL } from '@/constants/url';
 
 const MyItems = (): JSX.Element => {
   const router = useRouter();
-  const { itemsBalance, loadingItems } = useNFTsBalances();
-  const filteredItems = useMemo(() => itemsBalance.filter(item => item.balance && item.balance > 0), [itemsBalance]);
+  const { itemsBalances, loadingItems } = useNFTsBalances();
+  const filteredItems = useMemo(() => itemsBalances.filter(item => item.balance && item.balance > 0), [itemsBalances]);
 
   const settings = {
     slidesToShow: 4,

diff --git a/apps/app/src/components/dialog/DegenDialog/EquipDegenContentDialog.tsx b/apps/app/src/components/dialog/DegenDialog/EquipDegenContentDialog.tsx
@@ -85,10 +85,10 @@ const initEquipped: boolean[] = new Array(6).fill(false);
 
 const EquipDegenContentDialog = ({ degen, name }: EquipDegenContentDialogProps) => {
   const dispatch = useDispatch();
-  const { comicsBalance, loadingComics } = useNFTsBalances();
+  const { comicsBalances, loadingComics } = useNFTsBalances();
   const filteredComics = useMemo(
-    () => comicsBalance.filter(comic => comic.balance && comic.balance > 0),
-    [comicsBalance],
+    () => comicsBalances.filter(comic => comic.balance && comic.balance > 0),
+    [comicsBalances],
   );
   const [animationType, setAnimationType] = useState<string>('pose');
   const [equipped, setEquipped] = useState<boolean[]>(initEquipped);

diff --git a/apps/app/src/constants/contracts/index.ts b/apps/app/src/constants/contracts/index.ts
@@ -1,4 +1,4 @@
-import type { InterfaceAbi } from 'ethers6';
+import type { Abi } from 'viem';
 import type { Network } from '@/types/web3';
 import { SEPOLIA_ID, MAINNET_ID } from '../networks';
 import DEPLOYMENTS from './deployments';
@@ -7,7 +7,7 @@ export const getDeployedContract = (chainId: Network['chainId'], contractName: s
   const deployments = DEPLOYMENTS[chainId] as {
     [contractName: string]: {
       address: `0x${string}`;
-      abi: InterfaceAbi;
+      abi: Abi;
     };
   };
   return deployments[contractName];
@@ -18,7 +18,7 @@ export const getContractAddress = (chainId: Network['chainId'], contractName: st
 };
 
 export const getContractABI = (chainId: Network['chainId'], contractName: string) => {
-  return getDeployedContract(chainId, contractName)?.abi as InterfaceAbi;
+  return getDeployedContract(chainId, contractName)?.abi as Abi;
 };
 
 // Ethereum contracts