Feat/Moonbeam Gassless Batch Integrations

src/app/(main)/marketPlace/page.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import Image from 'next/image';
-import React, { useState } from 'react';
+import { useState } from 'react';
+
+import useWeb3auth from '@/hooks/useWeb3auth';
 
 import CustomizedTables from '@/components/ui/marketPlaceTable';
 import SwiperCoverflow from '@/components/ui/swiper';
@@ -11,6 +13,11 @@ import { coinData } from '@/utils/natworkData';
 
 function Page() {
   const [collection, setCollection] = useState('Your Collection');
+  const { login } = useWeb3auth(2)
+  const [chain, setChain] = useState('')
+
+
+
   return (
     <div className=' border-l border  flex gap-10 flex-col w-full items-start py-6 overflow-x-hidden'>
       <SwiperCoverflow />
@@ -20,6 +27,12 @@ function Page() {
             <button
               className='group/button relative z-40  inline-flex h-10 w-10 items-center gap-4 justify-center overflow-hidden rounded-lg bg-transparent font-medium text-white transition-all duration-300 hover:w-24'
               key={coin.name}
+              onClick={async () => {
+                if (coin.name.toLowerCase() === "moonbeam") {
+                  await login(2)
+                }
+                setChain(coin.name)
+              }}
             >
               <div className='absolute left-0 w-7 h-7 p-0.5  rounded-full'>
                 <Image src={coin.icon} alt={coin.name} />
@@ -35,24 +48,22 @@ function Page() {
         <div className='flex text-white  justify-around px-10 pb-6 '>
           <span
             onClick={() => setCollection('Your Collection')}
-            className={`${
-              collection === 'Your Collection'
-                ? 'text-fuchsia-500'
-                : 'text-white'
-            } cursor-pointer font-bold text-xl`}
+            className={`${collection === 'Your Collection'
+              ? 'text-fuchsia-500'
+              : 'text-white'
+              } cursor-pointer font-bold text-xl`}
           >
             Your Collection
           </span>
           <span
             onClick={() => setCollection('Buy Nft')}
-            className={`${
-              collection === 'Buy Nft' ? 'text-fuchsia-500' : 'text-white'
-            } cursor-pointer font-bold text-xl`}
+            className={`${collection === 'Buy Nft' ? 'text-fuchsia-500' : 'text-white'
+              } cursor-pointer font-bold text-xl`}
           >
             Buy Collection
           </span>
         </div>
-        {collection === 'Buy Nft' ? <CustomizedTables /> : <YourCollection />}
+        {collection === 'Buy Nft' ? <CustomizedTables chain={chain} /> : <YourCollection chain={chain} />}
       </div>
     </div>
   );

src/components/creator-profile/index.tsx

@@ -1,36 +1,35 @@
 'use client';
-import { ethers } from 'ethers';
 import React, { useState } from 'react';
+import toast from 'react-hot-toast';
 
-import { balanceOffModel, getModalPayment } from '@/lib/func';
+import useGlobalStore from '@/hooks/useGlobalStore';
+import useWeb3auth from '@/hooks/useWeb3auth';
+import { getModalPayment } from '@/lib/func';
+import { toastStyles } from '@/lib/utils';
 
 import ModelBanner from '@/app/(main)/profile/(components)/banner';
 import ModelFeed from '@/app/(main)/profile/(components)/feed';
 import RightSideBar from '@/app/(main)/profile/(components)/rightSideBar';
 import { Props } from '@/app/(main)/profile/[id]/page';
 import NotFound from '@/app/not-found';
 import { allModelData } from '@/utils/modelData';
-import useWeb3auth from '@/hooks/useWeb3auth';
-import toast from 'react-hot-toast';
-import { toastStyles } from '@/lib/utils';
-import useGlobalStore from '@/hooks/useGlobalStore';
 const CreatorProfile = ({ params }: Props) => {
   const [modelFees, setModelFees] = useState<number>(0);
   const [isUnlocked, setIsUnlocked] = useState<boolean>(false);
   const modelData = allModelData.filter((item) => item.slug === params.id)[0];
-  const { address } = useWeb3auth();
+  const { address, email } = useWeb3auth();
 
   const fetchModalFees = async () => {
     const data = await getModalPayment(modelData.id);
 
     setModelFees(parseInt(data));
   };
-  const fetchStatus = async (address: string) => {
+  const fetchStatus = async (address: string, email: string) => {
     // const res = await balanceOffModel(provider, modelData.id.toString());
     // setIsUnlocked(res);
     try {
       const resp = await fetch(
-        `https://db-graph-backend.onrender.com/api/user-info?wallet_address=${address}`,
+        `https://db-graph-backend.onrender.com/api/user-info-moonbeam?email=${email}`,
         {
           method: 'GET',
         }
@@ -50,13 +49,13 @@ const CreatorProfile = ({ params }: Props) => {
       toast.error('Something went wrong', toastStyles);
     }
   };
-  const { smartAddress } = useGlobalStore();
+  const { walletAddress } = useGlobalStore();
   React.useEffect(() => {
-    if (smartAddress) {
-      fetchStatus(smartAddress);
+    if (walletAddress && email) {
+      fetchStatus(walletAddress, email);
     }
     fetchModalFees();
-  }, []);
+  }, [email, walletAddress]);
 
   if (!modelData) return <NotFound />;
   return (

src/components/ui/avatar.tsx

@@ -1,7 +1,8 @@
 'use client';
-import RippleLoader from '@/components/ui/RippleLoader';
 import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+
+import RippleLoader from '@/components/ui/RippleLoader';
 
 const Avatar = ({
   userName,
@@ -38,9 +39,9 @@ const Avatar = ({
     }
   }, [ipfsUrl]);
 
-  if (!teaseData) {
-    return <div>Loading...</div>;
-  }
+  // if (!teaseData) {
+  //   return <div>Loading...</div>;
+  // }
   return (
     <a
       href={`https://testnets.opensea.io/assets/avalanche-fuji/0x82376da85a76360bc9ffc9a542961429a2a653ff/${openId}`}
@@ -49,19 +50,16 @@ const Avatar = ({
       className=' flex flex-col gap-1 items-center justify-center cursor-pointer'
     >
       <div className='rounded-full'>
-        {avatarLoading ? (
-          <RippleLoader />
-        ) : (
+        {teaseData && teaseData.image && teaseData.image !== "" ?
           <Image
             src={teaseData.image}
             alt={teaseData.name}
             width={50}
             height={50}
             className=' rounded-full'
-          />
-        )}
+          /> : <RippleLoader />
+        }
       </div>
-
       <p className='text-[#CEB9E9] text-sm font-semibold'>
         {teaseData.name}.tease
       </p>