From a3cdc9ef32bdc8f32b2363f97dd6ed792116d54b Mon Sep 17 00:00:00 2001 From: MananTank Date: Thu, 10 Jul 2025 03:00:26 +0000 Subject: [PATCH] Dashboard: Remove OP superchain banner, CTAs, credits (#7569) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## 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}` ## 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. --- apps/dashboard/src/@/api/chain.ts | 36 ---------- .../src/@/components/billing/CreditsItem.tsx | 69 ++----------------- .../src/@/components/billing/PlanCard.tsx | 31 +++------ .../app/(app)/(dashboard)/(chain)/utils.ts | 28 +------- .../[team_slug]/(team)/~/billing/page.tsx | 16 +---- .../AccountAbstractionPage.tsx | 45 ------------ 6 files changed, 15 insertions(+), 210 deletions(-) diff --git a/apps/dashboard/src/@/api/chain.ts b/apps/dashboard/src/@/api/chain.ts index e231c0dc59e..b03b854d7c3 100644 --- a/apps/dashboard/src/@/api/chain.ts +++ b/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`, diff --git a/apps/dashboard/src/@/components/billing/CreditsItem.tsx b/apps/dashboard/src/@/components/billing/CreditsItem.tsx index 6d7f46e42b1..41f6ac11a46 100644 --- a/apps/dashboard/src/@/components/billing/CreditsItem.tsx +++ b/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 = ({ - 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 = ({ 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 = ({
- {isOpCredit ? ( - - ) : isTwCredit ? ( + {isTwCredit ? ( tw-credit = ({
)}
- - {hasAppliedForOpGrant && !credit && isOpCredit && ( - - - Grant application pending approval - - You will receive an email once your application's status - changes. - - - )}
- - {!hasAppliedForOpGrant && isOpCredit && ( -
- -
- )} ); }; diff --git a/apps/dashboard/src/@/components/billing/PlanCard.tsx b/apps/dashboard/src/@/components/billing/PlanCard.tsx index 57851c027db..1fc34862f09 100644 --- a/apps/dashboard/src/@/components/billing/PlanCard.tsx +++ b/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 (
- - {restCredits?.map((credit) => ( - + {restCredits.map((credit) => ( + ))}
); diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/utils.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/utils.ts index 408d45be040..1d90dbc0e0e 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/utils.ts +++ b/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; } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/page.tsx index 39f6eaf1863..270379039a2 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/page.tsx +++ b/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: { /> )} - + ); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionPage.tsx index 77cca5b82c9..86aface52d7 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionPage.tsx +++ b/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 && ( )} -
@@ -89,40 +81,3 @@ export function AccountAbstractionLayout(props: {
); } - -function GasCreditAlert(props: { teamSlug: string; projectId: string }) { - return ( - - Redeem credits towards gas Sponsorship.
- - Learn More - -
- -
- - } - localStorageId={`${props.projectId}-gas-credit-alert`} - title="OP Gas Credit Program" - /> - ); -}