Add pagination in InApp wallet users table and update tabs (#4325)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to implement pagination functionality for displaying a specific number of items per page in the Users component of the embedded wallets feature.

### Detailed summary
- Added pagination logic to display a subset of wallets per page based on active page
- Implemented pagination buttons for navigating through multiple pages
- Updated the Users component to show items based on pagination
- Added state management for active page selection
- Updated URL search parameters based on selected tab in the EmbeddedWallets component

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/components/embedded-wallets/Users/index.tsx

@@ -1,3 +1,4 @@
+import { PaginationButtons } from "@/components/pagination-buttons";
 import type { EmbeddedWalletUser } from "@3rdweb-sdk/react/hooks/useEmbeddedWallets";
 import { Flex, Switch } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -104,6 +105,19 @@ export const Users: React.FC<UsersProps> = ({
     tempLink.click();
   }, [theWalletsWeWant]);
 
+  const [activePage, setActivePage] = useState(1);
+  const itemsPerPage = 20;
+  const totalPages =
+    theWalletsWeWant.length <= itemsPerPage
+      ? 1
+      : Math.ceil(theWalletsWeWant.length / itemsPerPage);
+
+  const itemsToShow = useMemo(() => {
+    const startIndex = (activePage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return theWalletsWeWant.slice(startIndex, endIndex);
+  }, [activePage, theWalletsWeWant]);
+
   return (
     <Flex flexDir="column" gap={10}>
       <Flex flexDir="column" gap={6}>
@@ -129,11 +143,19 @@ export const Users: React.FC<UsersProps> = ({
 
         <TWTable
           title="active in-app wallets"
-          data={theWalletsWeWant}
+          data={itemsToShow}
           columns={columns}
           isLoading={isLoading}
           isFetched={isFetched}
         />
+
+        {totalPages > 1 && (
+          <PaginationButtons
+            activePage={activePage}
+            onPageClick={setActivePage}
+            totalPages={totalPages}
+          />
+        )}
       </Flex>
 
       <Analytics trackingCategory={trackingCategory} />

apps/dashboard/src/components/embedded-wallets/index.tsx

@@ -1,6 +1,7 @@
+import { TabButtons } from "@/components/ui/tabs";
 import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import type { EmbeddedWalletUser } from "@3rdweb-sdk/react/hooks/useEmbeddedWallets";
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import { useState } from "react";
 import { Configure } from "./Configure";
 import { Users } from "./Users";
 
@@ -21,26 +22,55 @@ export const EmbeddedWallets: React.FC<EmbeddedWalletsProps> = ({
   trackingCategory,
   defaultTabIndex,
 }) => {
+  const [selectedTab, setSelectedTab] = useState<"users" | "config">(
+    defaultTabIndex === 0 ? "users" : "config",
+  );
+
+  function updateSearchParams(value: string) {
+    const url = new URL(window.location.href);
+    url.searchParams.set("tab", value);
+    window.history.pushState(null, "", url.toString());
+  }
+
   return (
-    <Tabs defaultIndex={defaultTabIndex || 0}>
-      <TabList px={0} borderBottomColor="borderColor" borderBottomWidth="1px">
-        <Tab>Users</Tab>
-        <Tab>Configuration</Tab>
-      </TabList>
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "Users",
+            onClick: () => {
+              setSelectedTab("users");
+              updateSearchParams("0");
+            },
+            isActive: selectedTab === "users",
+            isEnabled: true,
+          },
+          {
+            name: "Configuration",
+            onClick: () => {
+              setSelectedTab("config");
+              updateSearchParams("1");
+            },
+            isActive: selectedTab === "config",
+            isEnabled: true,
+          },
+        ]}
+      />
+
+      <div className="h-6" />
+
+      {selectedTab === "users" && (
+        <Users
+          wallets={wallets}
+          isLoading={isLoading}
+          isFetched={isFetched}
+          trackingCategory={trackingCategory}
+        />
+      )}
 
-      <TabPanels pt={6}>
-        <TabPanel px={0}>
-          <Users
-            wallets={wallets}
-            isLoading={isLoading}
-            isFetched={isFetched}
-            trackingCategory={trackingCategory}
-          />
-        </TabPanel>
-        <TabPanel px={0}>
-          <Configure apiKey={apiKey} trackingCategory={trackingCategory} />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+      {selectedTab === "config" && (
+        <Configure apiKey={apiKey} trackingCategory={trackingCategory} />
+      )}
+    </div>
   );
 };