reduced the recent tables to 3 rows + navbar backdrop effect

Author: Ojas13-git

src/views/landing-page/Navbar.tsx

@@ -15,7 +15,7 @@ const Navbar = () => {
     };
 
     return (
-        <nav className="bg-[#F8F8F8] opacity-100 dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600 shadow-md">
+        <nav className="bg-[#F8F8F8] backdrop-blur-lg bg-white/30 opacity-100 dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600 shadow-md">
             <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
                 <a href="" className="flex items-center space-x-3 rtl:space-x-reverse">
                     <svg width="52" height="35" viewBox="0 0 52 35" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -122,7 +122,7 @@ const Navbar = () => {
                     className={`items-center justify-between ${isOpen ? 'block' : 'hidden'} w-full md:flex md:w-auto md:order-1`}
                     id="navbar-sticky"
                 >
-                    <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-16 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[F8F8F8] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+                    <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg md:space-x-16 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[F8F8F8] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
                         <li className="relative">
                             <button
                                 className="flex items-center py-2 px-3 text-[#5A5A62] rounded md:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:text-blue-500"

src/views/landing-page/SearchBar.tsx

@@ -44,7 +44,6 @@ const SearchBar = () => {
     const refreshBundlesTable = async (network: string) => {
         setBundleTableLoading(true);
         const bundles = await getLatestBundles(network, 5, 0, toast);
-        console.log(bundles);
         let newRows = [] as tableDataT['rows'];
         bundles.forEach((bundle) => {
             newRows.push({
@@ -58,12 +57,11 @@ const SearchBar = () => {
                 status: true,
             });
         });
-        bundlesTables[network] = { ...bundlesTables[network], rows: newRows.slice(0, 5) };
+        bundlesTables[network] = { ...bundlesTables[network], rows: newRows.slice(0, 3) }; // Slicing to 3 rows
         setBundlesTables(bundlesTables);
-        // console.log("bundlesTables",{ ...bundlesTables[network], rows: newRows.slice(0, 5) })
         setBundleTableLoading(false);
     };
-
+    
     const refreshPaymastersTable = async (network: string) => {
         setPaymasterTableLoading(true);
         const paymasters = await getTopPaymasters(network, 5, 0, toast);
@@ -79,11 +77,11 @@ const SearchBar = () => {
                 fee: getFee(parseInt(paymaster.gasSponsored), network),
             });
         });
-        paymastersTables[network] = { ...paymastersTables[network], rows: newRows.slice(0, 10) };
+        paymastersTables[network] = { ...paymastersTables[network], rows: newRows.slice(0, 3) }; // Slicing to 3 rows
         setPaymastersTables(paymastersTables);
         setPaymasterTableLoading(false);
     };
-
+    
     const refreshBundlersTable = async (network: string) => {
         setBundlerTableLoading(true);
         const bundlers = await getTopBundlers(network, 5, 0, toast);
@@ -99,12 +97,11 @@ const SearchBar = () => {
                 fee: getFee(parseInt(bundler.actualGasCostSum), network),
             });
         });
-        bundlersTables[network] = { ...bundlersTables[network], rows: newRows.slice(0, 5) };
+        bundlersTables[network] = { ...bundlersTables[network], rows: newRows.slice(0, 3) }; // Slicing to 3 rows
         setBundlersTables(bundlersTables);
-        // console.log('bundlersTables',{ ...bundlersTables[network], rows: newRows.slice(0, 5) })
         setBundlerTableLoading(false);
     };
-
+    
     const refreshUserOpsTable = async (network: string) => {
         setUserOpTableLoading(true);
         const userOps = await getLatestUserOps(network, 5, 0, toast);
@@ -122,11 +119,11 @@ const SearchBar = () => {
                 status: userOp.success!,
             });
         });
-        setLoading(false);
-        operationsTables[network] = { ...operationsTables[network], rows: newRows.slice(0, 5) };
+        operationsTables[network] = { ...operationsTables[network], rows: newRows.slice(0, 3) }; // Slicing to 3 rows
         setOperationsTables(operationsTables);
         setUserOpTableLoading(false);
     };
+    
 
     useEffect(() => {
         const networkName = networkValue !== -1 ? NETWORK_LIST[networkValue].key : 'mainnet';