Add credits page in team settings (chakra) (#4458)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the settings page for gas credits, adding a new component and improving the layout.

### Detailed summary
- Added a new component `SettingsGasCreditsPage` for gas credits settings
- Updated the layout of the gas credits settings page
- Removed unused imports and components
- Renamed `SettingsGasCreditsPage` to `Page` and updated references

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

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
+import { Flex } from "@chakra-ui/react";
+import { ApplyForOpCreditsModal } from "components/onboarding/ApplyForOpCreditsModal";
+import { Heading, LinkButton } from "tw-components";
+
+export const SettingsGasCreditsPage = () => {
+  const { isLoading } = useLoggedInUser();
+
+  if (isLoading) {
+    return (
+      <div className="grid w-full min-h-[400px] place-items-center">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
+  return (
+    <Flex flexDir="column" gap={8}>
+      <Flex direction="row" gap={4} align="center">
+        <Heading size="title.lg" as="h1">
+          Apply to the Optimism Superchain App Accelerator
+        </Heading>
+        <LinkButton
+          display={{ base: "none", md: "inherit" }}
+          isExternal
+          href="https://blog.thirdweb.com/accelerating-the-superchain-with-optimism/"
+          size="sm"
+          variant="outline"
+        >
+          Learn More
+        </LinkButton>
+      </Flex>
+
+      <ApplyForOpCreditsModal />
+    </Flex>
+  );
+};

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/page.tsx

@@ -1,9 +1,10 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { SettingsGasCreditsPage } from "./SettingsCreditsPage";
+
 export default function Page() {
   return (
-    <div className="h-full py-6 container flex items-center justify-center">
-      <h1 className="text-4xl tracking-tighter text-muted-foreground">
-        Credits Settings
-      </h1>
-    </div>
+    <ChakraProviderSetup>
+      <SettingsGasCreditsPage />
+    </ChakraProviderSetup>
   );
 }

apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx

@@ -117,14 +117,11 @@ export const ApplyForOpCreditsModal: React.FC = () => {
                   size="label.sm"
                   px={3}
                   bgColor={creditsRecord.color}
+                  color="#fff"
+                  textTransform="capitalize"
+                  fontWeight="bold"
                 >
-                  <Text
-                    color="#fff"
-                    textTransform="capitalize"
-                    fontWeight="bold"
-                  >
-                    {creditsRecord.title}
-                  </Text>
+                  {creditsRecord.title}
                 </Badge>
               </Box>
               <Flex alignItems="center" gap={2} flexDir="column">

apps/dashboard/src/components/onboarding/PlanCard.tsx

@@ -16,10 +16,11 @@ export const PlanCard: React.FC<PlanCardProps> = ({ creditsRecord }) => {
             size="label.sm"
             px={3}
             bgColor={creditsRecord.color}
+            color="#fff"
+            textTransform="capitalize"
+            fontWeight="bold"
           >
-            <Text color="#fff" textTransform="capitalize" fontWeight="bold">
-              {creditsRecord.title}
-            </Text>
+            {creditsRecord.title}
           </Badge>
         </Box>
         <Flex flexDir="column" gap={1}>

apps/dashboard/src/pages/dashboard/settings/gas-credits.tsx

@@ -1,53 +1,21 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex } from "@chakra-ui/react";
 import { AppLayout } from "components/app-layouts/app";
-import { ApplyForOpCreditsModal } from "components/onboarding/ApplyForOpCreditsModal";
 import { SettingsSidebar } from "core-ui/sidebar/settings";
 import { PageId } from "page-id";
-import { Heading, LinkButton } from "tw-components";
+import {} from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
+import { SettingsGasCreditsPage } from "../../../app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage";
 
-const SettingsGasCreditsPage: ThirdwebNextPage = () => {
-  const { isLoading } = useLoggedInUser();
-
-  if (isLoading) {
-    return (
-      <div className="grid w-full place-items-center">
-        <Spinner className="size-14" />
-      </div>
-    );
-  }
-
-  return (
-    <Flex flexDir="column" gap={8}>
-      <Flex direction="row" gap={4} align="center">
-        <Heading size="title.lg" as="h1">
-          Apply to the Optimism Superchain App Accelerator
-        </Heading>
-        <LinkButton
-          display={{ base: "none", md: "inherit" }}
-          isExternal
-          href="https://blog.thirdweb.com/accelerating-the-superchain-with-optimism/"
-          size="sm"
-          variant="outline"
-        >
-          Learn More
-        </LinkButton>
-      </Flex>
-
-      <ApplyForOpCreditsModal />
-    </Flex>
-  );
+const Page: ThirdwebNextPage = () => {
+  return <SettingsGasCreditsPage />;
 };
 
-SettingsGasCreditsPage.getLayout = (page, props) => (
+Page.getLayout = (page, props) => (
   <AppLayout {...props} hasSidebar={true}>
     <SettingsSidebar activePage="gas-credits" />
     {page}
   </AppLayout>
 );
 
-SettingsGasCreditsPage.pageId = PageId.SettingsUsage;
+Page.pageId = PageId.SettingsUsage;
 
-export default SettingsGasCreditsPage;
+export default Page;