[TOOL-3766] Dashboard: Account Abstraction page updates

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/_components/TotalSponsoredCard.tsx

@@ -88,10 +88,10 @@ export async function TotalSponsoredChartCardUI({
     const filteredData = timeSeriesData.filter((d) => d.mainnet > 0);
     return (
       <div className={cn("rounded-lg border p-4 lg:p-6", className)}>
-        <h3 className="mb-1 font-semibold text-xl tracking-tight">
+        <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
           {title || "Total Sponsored"}
         </h3>
-        <p className="text-muted-foreground"> {description}</p>
+        <p className="text-muted-foreground text-sm"> {description}</p>
         <BarChart
           isCurrency
           chartConfig={chartConfig}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx

@@ -5,7 +5,6 @@ import { BillingPortalButton } from "@/components/billing";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { differenceInDays, isAfter } from "date-fns";
 import { format } from "date-fns/format";
 import { CircleAlertIcon } from "lucide-react";
@@ -37,7 +36,7 @@ export function PlanInfoCard(props: {
     <div className="rounded-lg border border-border bg-card">
       <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
         <div>
-          <div className="flex flex-col items-start gap-1">
+          <div className="flex flex-col items-start gap-0.5">
             <h3 className="font-semibold text-2xl capitalize tracking-tight">
               {validPlan} Plan
             </h3>
@@ -56,6 +55,7 @@ export function PlanInfoCard(props: {
 
         <div className="flex flex-row items-center gap-2">
           {/* go to invoices page */}
+
           <Button asChild variant="outline">
             <Link href={`/team/${team.slug}/~/settings/invoices`}>
               View Invoices
@@ -73,20 +73,6 @@ export function PlanInfoCard(props: {
           >
             Manage Billing
           </BillingPortalButton>
-
-          {isActualFreePlan && (
-            <Button asChild variant="outline">
-              <TrackedLinkTW
-                category="account"
-                href="/pricing"
-                label="pricing-plans"
-                target="_blank"
-                className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              >
-                View Pricing
-              </TrackedLinkTW>
-            </Button>
-          )}
         </div>
       </div>
 

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx

@@ -73,7 +73,7 @@ export function SponsoredTransactionsTableUI(
     <div className="overflow-hidden rounded-lg border bg-card">
       {/* header */}
       <div className="flex flex-col justify-between gap-3 border-b px-4 py-4 lg:flex-row lg:items-center lg:px-6">
-        <h2 className="font-semibold text-lg">Sponsored Transactions</h2>
+        <h2 className="font-semibold text-xl">Sponsored Transactions</h2>
         <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
           {/* Filters */}
           <div className="flex gap-2">

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx

@@ -23,13 +23,13 @@ export const UsageCard: React.FC<UsageCardProps> = ({
   totalUsage,
 }) => {
   return (
-    <div className="relative flex min-h-[190px] flex-col rounded-lg border border-border bg-card p-4 lg:p-6">
-      <h3 className="mb-1 font-semibold text-xl tracking-tight">{name}</h3>
-      <p className="text-muted-foreground"> {description}</p>
+    <div className="relative flex flex-col rounded-lg border border-border bg-card p-4 lg:p-6">
+      <h3 className="mb-0.5 font-semibold text-xl tracking-tight">{name}</h3>
+      <p className="text-muted-foreground text-sm"> {description}</p>
 
       <div className="h-6" />
 
-      <div className="mt-auto flex flex-col gap-1.5">
+      <div className="flex flex-col gap-1 text-sm">
         {title && <p className="text-foreground">{title}</p>}
 
         {total !== undefined && (

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx

@@ -34,12 +34,12 @@ function FooterCard(props: {
   trackingCategory: string;
 }) {
   return (
-    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
-      <h3 className="mb-5 font-semibold text-lg tracking-tight lg:text-xl">
+    <div className="rounded-lg border border-border bg-card p-4">
+      <h3 className="mb-4 border-border border-b pt-1 pb-4 font-semibold text-lg leading-none tracking-tight">
         {props.title}
       </h3>
 
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2.5">
         {props.links.map((link) => (
           <TrackedLinkTW
             key={link.href}

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

@@ -1,75 +1,54 @@
 "use client";
 
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
-import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
+import {
+  TrackedLinkTW,
+  TrackedUnderlineLink,
+} from "@/components/ui/tracked-link";
 import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
-import { CircleAlertIcon } from "lucide-react";
-import { useActiveWalletChain } from "thirdweb/react";
-import type { UserOpStats } from "types/analytics";
-import { AccountAbstractionSummary } from "../../../../../../components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { ArrowRightIcon } from "lucide-react";
+import { XIcon } from "lucide-react";
 import { AAFooterSection } from "./AAFooterSection";
-import { isOpChainId } from "./isOpChain";
 
 const TRACKING_CATEGORY = "smart-wallet";
 
 export function AccountAbstractionLayout(props: {
   projectSlug: string;
+  projectId: string;
   teamSlug: string;
   projectKey: string;
   children: React.ReactNode;
   hasSmartWalletsWithoutBilling: boolean;
-  userOpStats: UserOpStats;
 }) {
-  const chain = useActiveWalletChain();
-
-  const isOpChain = chain?.id ? isOpChainId(chain.id) : false;
-
   const smartWalletsLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/connect/account-abstraction`;
 
   return (
     <div>
-      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
+      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
         Account Abstraction
       </h1>
       <p className="text-muted-foreground text-sm">
-        Easily integrate Account abstraction (ERC-4337) compliant smart accounts
-        into your apps.{" "}
+        Integrate ERC-4337 compliant smart accounts for gasless sponsorships and
+        more. <br className="lg:hidden" />
         <TrackedUnderlineLink
           target="_blank"
           label="docs-wallets"
           category={TRACKING_CATEGORY}
           href="https://portal.thirdweb.com/wallets/smart-wallet"
         >
-          View Documentation
+          Learn more about Account Abstraction
         </TrackedUnderlineLink>
       </p>
+
       <div className="h-6" />
+
       <div className="flex flex-col gap-6">
-        {props.hasSmartWalletsWithoutBilling ? (
-          <SmartWalletsBillingAlert />
-        ) : (
-          isOpChain && (
-            <Alert variant="info">
-              <CircleAlertIcon className="size-4" />
-              <AlertTitle>
-                Using the gas credits for OP chain paymaster
-              </AlertTitle>
-              <AlertDescription>
-                Credits will automatically be applied to cover gas fees for any
-                onchain activity across thirdweb services. <br />
-                Eligible chains: OP Mainnet, Base, Zora, Frax, Mode.
-              </AlertDescription>
-            </Alert>
-          )
-        )}
+        {props.hasSmartWalletsWithoutBilling && <SmartWalletsBillingAlert />}
+        <GasCreditAlert teamSlug={props.teamSlug} projectId={props.projectId} />
 
         <div>
-          <AccountAbstractionSummary
-            aggregateUserOpUsageQuery={props.userOpStats}
-          />
-
-          <div className="h-12" />
           <TabPathLinks
             links={[
               {
@@ -93,8 +72,64 @@ export function AccountAbstractionLayout(props: {
           {props.children}
         </div>
       </div>
+
       <div className="h-14" />
+
       <AAFooterSection trackingCategory={TRACKING_CATEGORY} />
     </div>
   );
 }
+
+function GasCreditAlert(props: {
+  teamSlug: string;
+  projectId: string;
+}) {
+  const [isVisible, setIsVisible] = useLocalStorage(
+    `gas-credit-${props.projectId}`,
+    true,
+    false,
+  );
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="relative rounded-lg border border-border bg-card p-4">
+      <Button
+        onClick={() => setIsVisible(false)}
+        className="absolute top-4 right-4 h-auto w-auto p-1 text-muted-foreground"
+        aria-label="Close alert"
+        variant="ghost"
+      >
+        <XIcon className="size-5" />
+      </Button>
+      <div>
+        <h2 className="mb-0.5 font-semibold">OP Gas Credit Program</h2>
+        <p className="text-muted-foreground text-sm">
+          Redeem credits towards gas Sponsorship. <br className="lg:hidden" />
+          <TrackedUnderlineLink
+            target="_blank"
+            label="superchain-landing"
+            category={TRACKING_CATEGORY}
+            href="https://thirdweb.com/grant/superchain"
+          >
+            Learn More
+          </TrackedUnderlineLink>
+        </p>
+
+        <div className="mt-4 flex items-center gap-4">
+          <Button asChild variant="outline" size="sm" className="bg-background">
+            <TrackedLinkTW
+              href={`/team/${props.teamSlug}/~/settings/credits`}
+              target="_blank"
+              className="gap-2"
+              category={TRACKING_CATEGORY}
+              label="claim-credits"
+            >
+              Claim your credits <ArrowRightIcon className="size-4" />
+            </TrackedLinkTW>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/isOpChain.ts

@@ -1,4 +1,3 @@
-import { getAggregateUserOpUsage } from "@/api/analytics";
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import type { Metadata } from "next";
@@ -34,18 +33,13 @@ export default async function Page(props: {
     team.billingStatus !== "validPayment" &&
     team.billingStatus !== "pastDue";
 
-  const userOpStats = await getAggregateUserOpUsage({
-    teamId: team.id,
-    projectId: project.id,
-  });
-
   return (
     <AccountAbstractionLayout
-      userOpStats={userOpStats}
       projectSlug={project.slug}
       teamSlug={team_slug}
       projectKey={project.publishableKey}
       hasSmartWalletsWithoutBilling={hasSmartWalletsWithoutBilling}
+      projectId={project.id}
     >
       {props.children}
     </AccountAbstractionLayout>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/layout.tsx

@@ -1,5 +1,6 @@
-import { getUserOpUsage } from "@/api/analytics";
+import { getAggregateUserOpUsage, getUserOpUsage } from "@/api/analytics";
 import { getProject } from "@/api/projects";
+import { getTeamBySlug } from "@/api/team";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import {
   type Range,
@@ -31,7 +32,14 @@ export default async function Page(props: {
     notFound();
   }
 
-  const project = await getProject(params.team_slug, params.project_slug);
+  const [team, project] = await Promise.all([
+    getTeamBySlug(params.team_slug),
+    getProject(params.team_slug, params.project_slug),
+  ]);
+
+  if (!team) {
+    redirect("/team");
+  }
 
   if (!project) {
     redirect(`/team/${params.team_slug}`);
@@ -52,21 +60,32 @@ export default async function Page(props: {
     type: rangeType,
   };
 
-  const userOpStats = await getUserOpUsage({
+  const userOpStatsPromise = getUserOpUsage({
     teamId: project.teamId,
     projectId: project.id,
     from: range.from,
     to: range.to,
     period: interval,
   });
 
+  const aggregateUserOpStatsPromise = getAggregateUserOpUsage({
+    teamId: team.id,
+    projectId: project.id,
+  });
+
+  const [userOpStats, aggregateUserOpStats] = await Promise.all([
+    userOpStatsPromise,
+    aggregateUserOpStatsPromise,
+  ]);
+
   return (
     <AccountAbstractionAnalytics
       userOpStats={userOpStats}
       client={getThirdwebClient(authToken)}
       teamId={project.teamId}
       projectId={project.id}
       teamSlug={params.team_slug}
+      aggregateUserOpStats={aggregateUserOpStats}
     />
   );
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx

@@ -5,18 +5,16 @@ export const Stat: React.FC<{
   formatter?: (value: number) => string;
 }> = ({ label, value, formatter, icon: Icon }) => {
   return (
-    <dl className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-4 lg:p-6">
+    <dl className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-4 pr-6">
       <div>
-        <dd className="font-semibold text-3xl tracking-tight lg:text-5xl">
+        <dd className="mb-0.5 font-semibold text-2xl tracking-tight">
           {value !== undefined && formatter
             ? formatter(value)
             : value?.toLocaleString()}
         </dd>
-        <dt className="font-medium text-muted-foreground text-sm tracking-tight lg:text-lg">
-          {label}
-        </dt>
+        <dt className="text-muted-foreground text-sm">{label}</dt>
       </div>
-      <Icon className="hidden size-12 text-muted-foreground opacity-50 lg:block" />
+      <Icon className="hidden size-8 text-muted-foreground opacity-50 lg:block" />
     </dl>
   );
 };