Dashboard: Remove OP superchain banner, CTAs, credits (#7569)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the code by removing unnecessary imports and simplifying components, particularly in the billing and chain management sections. It also eliminates unused functions and optimizes the handling of credits.

### Detailed summary
- Removed `getGasSponsoredChains` function and its usage.
- Simplified `CreditsInfoCard` by removing props and using `useAccountCredits`.
- Removed `GasCreditAlert` component and its references.
- Cleaned up `CreditsItem` by removing unnecessary props and logic.
- Removed unused imports in various files, improving code clarity.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **Refactor**
  * Simplified the billing credits display by removing special handling and application UI for "Optimism sponsorship credits".
  * Streamlined the CreditsInfoCard component to reduce dependencies and remove special credit handling.
  * Removed logic and UI related to gas-sponsored chains and gas sponsorship call-to-actions.
  * Deleted the GasCreditAlert component and its alert UI from the account abstraction page.
  * Reduced authentication and client dependencies in the billing page for improved simplicity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/api/chain.ts

@@ -1,44 +1,8 @@
 import "server-only";
 import type { ChainMetadata } from "thirdweb/chains";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { API_SERVER_SECRET } from "@/constants/server-envs";
 import type { ChainService } from "@/types/chain";
 
-export async function getGasSponsoredChains() {
-  if (!API_SERVER_SECRET) {
-    throw new Error("API_SERVER_SECRET is not set");
-  }
-  const res = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains/gas-sponsored`,
-    {
-      headers: {
-        "Content-Type": "application/json",
-        "x-service-api-key": API_SERVER_SECRET,
-      },
-      next: {
-        revalidate: 15 * 60, //15 minutes
-      },
-    },
-  );
-
-  if (!res.ok) {
-    console.error(
-      "Failed to fetch gas sponsored chains",
-      res.status,
-      res.statusText,
-    );
-    res.body?.cancel();
-    return [];
-  }
-
-  try {
-    return (await res.json()).data as number[];
-  } catch (e) {
-    console.error("Failed to parse gas sponsored chains", e);
-    return [];
-  }
-}
-
 export function getChains() {
   return fetch(
     `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains`,

apps/dashboard/src/@/components/billing/CreditsItem.tsx

@@ -1,45 +1,18 @@
 import { formatDistance } from "date-fns";
-import { CircleAlertIcon } from "lucide-react";
 import Image from "next/image";
-import Link from "next/link";
-import type { ThirdwebClient } from "thirdweb";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import type { Account, BillingCredit } from "@/hooks/useApi";
-import { useLocalStorage } from "@/hooks/useLocalStorage";
-import { ChainIconClient } from "@/icons/ChainIcon";
+import type { BillingCredit } from "@/hooks/useApi";
 import { formatToDollars } from "./formatToDollars";
 
 interface CreditsItemProps {
   credit?: BillingCredit;
-  isOpCreditDefault?: boolean;
-  onClickApply?: () => void;
-  twAccount: Account;
-  client: ThirdwebClient;
-  teamSlug: string;
 }
 
-export const CreditsItem: React.FC<CreditsItemProps> = ({
-  credit,
-  isOpCreditDefault,
-  onClickApply,
-  twAccount,
-  client,
-  teamSlug,
-}) => {
-  const [hasAppliedForOpGrant] = useLocalStorage(
-    `appliedForOpGrant-${twAccount.id}`,
-    false,
-  );
-
-  const isOpCredit = credit?.name.startsWith("OP -") || isOpCreditDefault;
+export const CreditsItem: React.FC<CreditsItemProps> = ({ credit }) => {
   const isTwCredit = credit?.name.startsWith("TW -");
   const isStartupCredit = credit?.name.startsWith("SU -");
 
   let creditTitle = credit?.name ?? "thirdweb credits";
-  if (isOpCredit) {
-    creditTitle = "Optimism sponsorship credits";
-  } else if (isTwCredit) {
+  if (isTwCredit) {
     creditTitle = "thirdweb credits";
   } else if (isStartupCredit) {
     creditTitle = "Startup grant credits";
@@ -50,13 +23,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
       <div className="flex flex-col gap-3 p-4 lg:p-6">
         <div className="relative">
           <div className="absolute top-0 right-0">
-            {isOpCredit ? (
-              <ChainIconClient
-                className="size-6"
-                client={client}
-                src="ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/optimism/512.png"
-              />
-            ) : isTwCredit ? (
+            {isTwCredit ? (
               <Image
                 alt="tw-credit"
                 className="size-6"
@@ -112,35 +79,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
             </div>
           )}
         </div>
-
-        {hasAppliedForOpGrant && !credit && isOpCredit && (
-          <Alert variant="info">
-            <CircleAlertIcon className="size-5" />
-            <AlertTitle>Grant application pending approval</AlertTitle>
-            <AlertDescription>
-              You will receive an email once your application&apos;s status
-              changes.
-            </AlertDescription>
-          </Alert>
-        )}
       </div>
-
-      {!hasAppliedForOpGrant && isOpCredit && (
-        <div className="mt-2 flex justify-end border-t px-4 py-4 lg:px-6">
-          <Button asChild size="sm" variant="outline">
-            <Link
-              href={`/team/${teamSlug}/~/settings/credits`}
-              onClick={() => {
-                if (onClickApply) {
-                  onClickApply();
-                }
-              }}
-            >
-              Apply Now
-            </Link>
-          </Button>
-        </div>
-      )}
     </div>
   );
 };

apps/dashboard/src/@/components/billing/PlanCard.tsx

@@ -2,41 +2,26 @@
 
 // TODO - convert to RSC
 
-import type { ThirdwebClient } from "thirdweb";
-import { type Account, useAccountCredits } from "@/hooks/useApi";
+import { useAccountCredits } from "@/hooks/useApi";
 import { CreditsItem } from "./CreditsItem";
 
-export const CreditsInfoCard = (props: {
-  twAccount: Account;
-  client: ThirdwebClient;
-  teamSlug: string;
-}) => {
+export const CreditsInfoCard = () => {
   const { data: credits } = useAccountCredits();
 
   if (!credits) {
     return null;
   }
 
-  const opCredit = credits.find((crd) => crd.name.startsWith("OP -"));
   const restCredits = credits.filter((crd) => !crd.name.startsWith("OP -"));
 
+  if (restCredits.length === 0) {
+    return null;
+  }
+
   return (
     <section className="flex flex-col gap-4">
-      <CreditsItem
-        client={props.client}
-        credit={opCredit}
-        isOpCreditDefault={true}
-        teamSlug={props.teamSlug}
-        twAccount={props.twAccount}
-      />
-      {restCredits?.map((credit) => (
-        <CreditsItem
-          client={props.client}
-          credit={credit}
-          key={credit.couponId}
-          teamSlug={props.teamSlug}
-          twAccount={props.twAccount}
-        />
+      {restCredits.map((credit) => (
+        <CreditsItem credit={credit} key={credit.couponId} />
       ))}
     </section>
   );

apps/dashboard/src/app/(app)/(dashboard)/(chain)/utils.ts

@@ -2,11 +2,7 @@ import "server-only";
 
 import { notFound } from "next/navigation";
 import type { ChainMetadata } from "thirdweb/chains";
-import {
-  getChainServices,
-  getChains,
-  getGasSponsoredChains,
-} from "@/api/chain";
+import { getChainServices, getChains } from "@/api/chain";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import type { ChainMetadataWithServices, ChainServices } from "@/types/chain";
 import type { ChainCTAProps } from "./[chain_id]/(chainPage)/components/server/cta-card";
@@ -25,7 +21,6 @@ import cotiBanner from "./temp-assets/COTI_Banner.jpg";
 import cotiCTA from "./temp-assets/COTI_CTA.jpg";
 import creatorBanner from "./temp-assets/creatorBanner.png";
 import creatorCTA from "./temp-assets/creatorCTA.png";
-import superchainCTABG from "./temp-assets/cta-bg-superchain.png";
 import xaiCTABg from "./temp-assets/cta-bg-xai-connect.png";
 import thirdwebCTA from "./temp-assets/cta-thirdweb.png";
 import cyberChainBanner from "./temp-assets/cyberChainBanner.png";
@@ -135,17 +130,6 @@ type ExtraChainMetadata = Partial<{
   cta: ChainCTAProps;
 }>;
 
-// TEMPORARY
-
-const OP_CTA = {
-  backgroundImageUrl: superchainCTABG.src,
-  buttonLink: "/team/~/~/settings/credits",
-  buttonText: "Apply now",
-  description:
-    "Successful applicants receive gas grants for use across all supported Optimism Superchain networks. These grants can sponsor gas fees for any onchain activity using our Account Abstraction tools.",
-  title: "Optimism Superchain App Accelerator",
-} satisfies ChainCTAProps;
-
 const chainMetaRecord = {
   // Flare
   14: {
@@ -933,22 +917,12 @@ const chainMetaRecord = {
 export async function getChainMetadata(
   chainId: number,
 ): Promise<(ExtraChainMetadata & { gasSponsored?: true }) | null> {
-  const gasSponsoredChains = await getGasSponsoredChains();
-
-  const isGasSponsored = gasSponsoredChains.includes(chainId);
-
   // TODO: fetch this from the API
   if (chainId in chainMetaRecord) {
     return {
-      ...(isGasSponsored ? { cta: OP_CTA, gasSponsored: true } : {}),
       // this will OVERRIDE the op CTA if there is a custom one configured
       ...chainMetaRecord[chainId as keyof typeof chainMetaRecord],
     };
-  } else if (isGasSponsored) {
-    return {
-      cta: OP_CTA,
-      gasSponsored: true,
-    };
   }
   return null;
 }

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

@@ -1,12 +1,10 @@
 import { redirect } from "next/navigation";
 import { getStripeBalance } from "@/actions/stripe-actions";
-import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug, type Team } from "@/api/team";
 import { getMemberByAccountId } from "@/api/team-members";
 import { getTeamSubscriptions } from "@/api/team-subscription";
 import { CreditsInfoCard } from "@/components/billing/PlanCard";
 import { Coupons } from "@/components/billing/SubscriptionCoupons/Coupons";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { getValidAccount } from "../../../../../account/settings/getAccount";
 import { CreditBalanceSection } from "./components/credit-balance-section.client";
 import { PlanInfoCardClient } from "./components/PlanInfoCard.client";
@@ -28,9 +26,8 @@ export default async function Page(props: {
 
   const account = await getValidAccount(pagePath);
 
-  const [team, authToken, teamMember] = await Promise.all([
+  const [team, teamMember] = await Promise.all([
     getTeamBySlug(params.team_slug),
-    getAuthToken(),
     getMemberByAccountId(params.team_slug, account.id),
   ]);
 
@@ -50,11 +47,6 @@ export default async function Page(props: {
     );
   }
 
-  const client = getClientThirdwebClient({
-    jwt: authToken,
-    teamId: team.id,
-  });
-
   const highlightPlan =
     typeof searchParams.highlight === "string"
       ? (searchParams.highlight as Team["billingPlan"])
@@ -84,11 +76,7 @@ export default async function Page(props: {
         />
       )}
 
-      <CreditsInfoCard
-        client={client}
-        teamSlug={team.slug}
-        twAccount={account}
-      />
+      <CreditsInfoCard />
       <Coupons isPaymentSetup={validPayment} teamId={team.id} />
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionPage.tsx

@@ -1,10 +1,6 @@
 "use client";
 
 import { SmartWalletsBillingAlert } from "@app/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/Alerts";
-import { ArrowRightIcon } from "lucide-react";
-import Link from "next/link";
-import { DismissibleAlert } from "@/components/blocks/dismissible-alert";
-import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { AAFooter } from "./AAFooterSection";
@@ -44,10 +40,6 @@ export function AccountAbstractionLayout(props: {
           {props.hasSmartWalletsWithoutBilling && (
             <SmartWalletsBillingAlert teamSlug={props.teamSlug} />
           )}
-          <GasCreditAlert
-            projectId={props.projectId}
-            teamSlug={props.teamSlug}
-          />
         </div>
 
         <div className="h-4" />
@@ -89,40 +81,3 @@ export function AccountAbstractionLayout(props: {
     </div>
   );
 }
-
-function GasCreditAlert(props: { teamSlug: string; projectId: string }) {
-  return (
-    <DismissibleAlert
-      description={
-        <>
-          Redeem credits towards gas Sponsorship. <br className="lg:hidden" />
-          <UnderlineLink
-            href="https://thirdweb.com/superchain"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Learn More
-          </UnderlineLink>
-          <div className="mt-4 flex items-center gap-4">
-            <Button
-              asChild
-              className="bg-background"
-              size="sm"
-              variant="outline"
-            >
-              <Link
-                className="gap-2"
-                href={`/team/${props.teamSlug}/~/settings/credits`}
-                target="_blank"
-              >
-                Claim your credits <ArrowRightIcon className="size-4" />
-              </Link>
-            </Button>
-          </div>
-        </>
-      }
-      localStorageId={`${props.projectId}-gas-credit-alert`}
-      title="OP Gas Credit Program"
-    />
-  );
-}